locked
ASP grid view in web method and jquery RRS feed

  • Question

  • User639567535 posted

    I try to use asp gridview for this i try webmethod and jquery to fetch data from database now when i use html gridview like this

    <div id="GridView1"></div>

    then gridview is display on page but when i use asp gridview like this

    <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
        GridLines="None" onpageindexchanging="GridView1_PageIndexChanging" 
        onselectedindexchanged="GridView1_SelectedIndexChanged"  
        AutoGenerateColumns="False" AllowPaging="True"  OnRowCommand="GridView1_select"
        onrowdatabound="GridView1_RowDataBound">
        <AlternatingRowStyle BackColor="White" />
        <EditRowStyle BackColor="#7C6F57" />
        <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#E3EAEB" />
        <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F8FAFA" />
        <SortedAscendingHeaderStyle BackColor="#246B61" />
        <SortedDescendingCellStyle BackColor="#D4DFE1" />
        <SortedDescendingHeaderStyle BackColor="#15524A" />
        <Columns>
        <asp:BoundField DataField="ID" HeaderText="ID"/>  
        <asp:BoundField DataField="OwnerName" HeaderText="OwnerName"/> 
        <asp:BoundField DataField="RegNo" HeaderText="RegNo"/> 
        <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lbViewChart" Text="View Chart" CssClass="lbViewChart"  runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    but grid is not display on page ..

    Jquery code

    <script type="text/javascript">
     $(function () {
         $('[ID*=search_data]').on('click', function () {
             var fromdate = $('[ID*=fromdate]').val();
             var todate = $('[ID*=todate]').val();
             var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
             var GridView1 = $('[ID*=GridView1]');
             var obj = {};
             obj.fromdate = fromdate;
             obj.todate = todate;
             obj.regiondrop = regiondrop;
             Getdataa(obj);
             return false;
         });
     });
       function Getdataa(obj) {
                 $.ajax({
                     type: "POST",
                     url: "WebForm1.aspx/search_data",
         data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
                     contentType: "application/json; charset=utf-8",
                     dataType: "json",
                     async: true,
                     cache: false,
                     success: function (result) {
                         var final = JSON.parse(result.d).response;
                         console.log(JSON.parse(result.d).response)
                         $("#GridView1").empty();
                         if (final.length > 0) {
                             $("#GridView1").append(
                        "<tr><th>ID</th><th>OwnerName</th><th>RegNo</th></tr>");
                             for (var i = 0; i < final.length; i++) {
                                 if (final[i] !== null) {
                                     $("#GridView1").append("<tr><td>" +
                                    final[i][0] + "</td> <td>" +
                                    final[i][1] + "</td> <td>" +
                                    final[i][2] + "</td> <td>" +
                                 }
                             }
                         }
                         else {
                             $("#GridView1").hide();
                             $("#Label4").text("No Data");
                         }
                     },
                     error: function (error) {
                         alert("error");
    
                     }
                 });
             }

    so is this possible to use asp grid view ? ANY solution?

    Monday, July 18, 2016 5:49 AM

Answers

  • User61956409 posted

    Hi Bakhtawar Ashiq,

    If you do not specify data source for ASP.NET GridView control, it will display nothing in browser, so you could not find the GridView via $("#GridView1"). Please check you code to make sure if you specify data source for GridView control from code behind.

    Besides, it seems that you’d like to populate GridView from client-side using jQuery, you could refer to this article.

    http://www.aspsnippets.com/Articles/Bind-data-to-GridView-with-jQuery-or-JSON-in-ASPNet.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 19, 2016 6:15 AM
  • User61956409 posted

    Hi Bakhtawar Ashiq,

    I know that you’d like to use asp.net GridView control and populate data in GridView using jQuery, as I mentioned in my previous reply, if you check the html source, you will find GridView does not be rendered as a <table> in browser if you do not specify data source. Do you really understand my meaning? You could try to populate the GridView with dummy data on page load event in order to make GridView render a HTML Table structure, and then we could generate data row (populate data) on AJAX success callback function.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 22, 2016 7:50 AM

All replies

  • User61956409 posted

    Hi Bakhtawar Ashiq,

    If you do not specify data source for ASP.NET GridView control, it will display nothing in browser, so you could not find the GridView via $("#GridView1"). Please check you code to make sure if you specify data source for GridView control from code behind.

    Besides, it seems that you’d like to populate GridView from client-side using jQuery, you could refer to this article.

    http://www.aspsnippets.com/Articles/Bind-data-to-GridView-with-jQuery-or-JSON-in-ASPNet.aspx

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 19, 2016 6:15 AM
  • User639567535 posted

    i also have static web-method from that web-method i fetch data from database and then i bind grid-view in jquery through div or table but i want to use asp gridview .. 

    when i try to use asp gridview then gridview not display but when i use table or div then simple gird is display without formatting

    Tuesday, July 19, 2016 6:19 AM
  • User61956409 posted

    Hi Bakhtawar Ashiq,

    I know that you’d like to use asp.net GridView control and populate data in GridView using jQuery, as I mentioned in my previous reply, if you check the html source, you will find GridView does not be rendered as a <table> in browser if you do not specify data source. Do you really understand my meaning? You could try to populate the GridView with dummy data on page load event in order to make GridView render a HTML Table structure, and then we could generate data row (populate data) on AJAX success callback function.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 22, 2016 7:50 AM