display gridview on button click

Question

User639567535 posted

first for test i try to call gridivew in jquery and i use this feature for gridview    https://datatables.net/examples/basic_init/scroll_xy.html

i use this

<script type="text/javascript">
    $(document).ready(function () {
        $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
            "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
            "scrollY":200,
            "scrollX": true,
            dom: 'Bfrtip',
            buttons: [
                'excelHtml5'

            ]
        });
    });

and i create 

public DataTable info(id){

 function and call on page load

but when i call this on button click then gridview not display here i use two function on one button

for display data in gridview i use datatable and for display data in chart i use static web method

<script type="text/javascript">

 var strarr = [["sfdsdfLi", 9], ["Kiwsdfi", 3], ["Mixesdfdnuts", 1], ["Oranges", 6], ["Grapes (bunch)", 1]];
 $(function () {
     $("#<%=search_dat.ClientID%>").on('click', function () {
         var fromdate = $('[ID*=fromdate]').val();
         var todate = $('[ID*=todate]').val();
         var region = $('[ID*=regiondrop] option:selected')[0].value;
         var obj = {};
         var reg = {};       
         obj.fromdate = fromdate;
         obj.todate = todate;
         obj.region = region;
         reg = region;
         Getdata(obj, reg);
         return false;
     });
 });
 function Getdata(obj, reg) {

     $.ajax({
         type: "POST",
         url: "WebForm1.aspx/GetVo",
         data: JSON.stringify(obj),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         async: true,
         cache: false,
         success: function (result) {

             var myData = JSON.parse(result.d);

             console.log(JSON.parse(result.d));

             if (myData !== null && Object.keys(myData).length !== 0) {
                 strarr = result.d;
                 var myarr = strarr;
                 $("#<%=GridView1.ClientID%>").show();
                 $("#container").show();
                 $("#Button6").show();
                 $("#<%=Label5.ClientID%>").hide();
                 $("#<%=Label4.ClientID%>").hide();
                 $("#<%=CrystalReportViewer1.ClientID%>").hide();

          }
          else {
              $("#<%=GridView1.ClientID%>").hide();
              $("#container").hide();
              $("#cont").hide();
              $("#<%=Label5.ClientID%>").show();
              $("#<%=Label5.ClientID%>").text("DATA NOT FOUND");
              $("#<%=Label4.ClientID%>").hide();

              return;
             }
             $('#container').highcharts({
                 chart: {
                     events: {
                         load: function (event) {
                             var total = 0;
                             for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                 total += this.series[0].yData[i];
                             }
                             var text = this.renderer.text(
                               'Total: ' + total,
                               this.plotLeft,
                               this.plotTop - 20
                           ).attr({
                               zIndex: 5
                           }).add()
                         }
                     },


                     borderColor: 'Grey',
                     borderWidth: 2,
                     width: 500,
                     height: 300,
                     type: 'pie',
                     options3d: {
                         enabled: true,
                         alpha: 45
                     }
                 },
                 title: {
                     text: 'Region:' + reg

                 },
                 subtitle: {
                     text: '<br> From Date:' + obj.fromdate + '<br> To Date:' + obj.todate
                 },
                 plotOptions: {
                     pie: {
                         innerSize: 100,
                         depth: 45,
                         allowPointSelect: true,
                         cursor: 'pointer',
                         dataLabels: {
                             enabled: true,
                             format: '<b>{point.name}</b>: {point.y}',
                         },
                         showInLegend: true
                     }
                 },
                 series: [{
                     name: 'Delivered amount',
                     data: JSON.parse(myarr)
                 }]

             });
        },

        error: function (error) {
            alert('no data');
        }
    });    

}

button html

<asp:Button ID="search_dat" class="sear_btn"  value="Search Data" runat="server" Text="Button" OnClick="search_dat_Click" />

and

 protected void search_dat_Click(object sender, EventArgs e)
        {
            griddata(Convert.ToDateTime(fromdate), Convert.ToDateTime(todate), Convert.ToString(regiondrop.SelectedValue));
         GridView1.Datasource=dt;
          Gridview1.DataBind();
        }



<asp:GridView ID="GridView1" runat="server"
        Width="100%" CellPadding="0"
        Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None" 
        BorderWidth="1px" Font-Size="9pt">
    <FooterStyle BackColor="White" ForeColor="#000066" />
    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
    <RowStyle ForeColor="#000066" />
    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#007DBB" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>

div where chart is display

  <div id="container" class="container1">

  </div>

when i set breakpoint and click on button then griddata not call whereas this container is display on button click ..

any solution?