Load Grid view From client side using JSON

Load Grid view From client side using JSON

At first take a .aspx page  then drag a a gridview with in the page and a html button .

 Page name :Default.aspx

 Gridview name :  dataGridtrte

 Code behind Web Method function name : ClientGridLoad

Now on the aspx page with in scripting tag write the following code:

  <script type="text/javascript" language="javascript">

        function bind() {
            $.ajax({
                type: "POST",
                url: "Default.aspx/ClientGridLoad",
                data: "{}",
                contentType: "application/json",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (result) {
                    alert('Service call failed: ' + result.status + ' ' + result.statusText);
                    // varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null;
                }
            })
        }


        function OnSuccess(response) {
            //  init_xml(response)
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);

            var customers = xml.find("Table");
            var row = $("[id*=dataGridtrte] tr:last-child").clone(true);
            $("[id*=dataGridtrte] tr").not($("[id*=dataGridtrte] tr:first-child")).remove();
            // $("[id*=dataGridtrte] tr").not($("[id*=dataGridtrte] tr:last-child")).remove();

            var count = 0;
            $.each(customers, function () {
                var customer = $(this);

                $("td", row).eq(0).html($(this).find("Full_Name").text());
                $("td", row).eq(1).html($(this).find("capture_dt").text());
                 $("[id*=dataGridtrte]").append(row);


                if (count == document.getElementById("ctl00_CPH_hddnselectrow").value) {
                    $(row).css("background-color", "#A1DCF2"); //A1DCF2
                }
                else {
                    $(row).css("background-color", "#ffffff");
                }
                count = count + 1;
                row = $("[id*=dataGridtrte] tr:last-child").clone(true);
                //  row = $("[id*=dataGridtrte] tr:last-child").clone(true);

            });
            response.d = "";
        }
 </script>

Now with in page  write this code  :

 <table>

<tr>

 <td align="left" width="33%" style="height: 33px">
                                            <asp:Button ID="btnBack" runat="server" Font-Bold="True" Text="Back to Previous Page" Width="200px" Height="26px"  OnClientClick="demo()" />
                                        </td>

</tr>

</table> 

Code Behind Code :

  Private Sub iniGrid()
        Dim dummy As New DataTable()
        dummy.Columns.Add("Full_Name")
        dummy.Columns.Add("Icode")
        dummy.Columns.Add("capture_dt")
        dummy.Rows.Add()
        dataGridtrte.DataSource = dummy
        dataGridtrte.DataBind()
    End Sub

With in web method write this :

 

   <WebMethod()>
    Public Shared Function ClientGridLoad() As String

        Dim obj_trteimage As New TRTE_image_insert
        Dim ds As New DataSet()
        '**************************** Populate Grid Corrrectly**************

        Dim obj_trte As New TRTE_image_insert()

        Try
            Dim dt = obj_trte.select_admission_date(qno, qyear)
            If dt.Rows(0)(0).ToString = DateTime.Today.ToString() Then
                ds = 'Populate ds with filled name   'Full_Name','Icode','Capture_dt'    

                      Return ds.GetXml()
          
                          End If
        Catch ex As Exception
            Throw New Exception("Exception while loading Grid: " & ex.Message)
        End Try


        '*******************************************************************

    End Function