locked
Gridview RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below Gridview . Since there are records in thousands Gridview takes time to fill . I want in meantine message should appear Loading Data with Loader image.

    Secondly i want Column Rows should have AutoAdjust width

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvw').dataTable({
                    "bPaginate": false
                });
            });
    
        </script>
    
    <asp:GridView ID="gvw" OnPreRender="gvw_PreRender"  runat="server"
                    CssClass="table table-bordered table-striped" AutoGenerateColumns="false"
                    ClientIDMode="Static" BorderWidth="1px" BackColor="#DEBA84" 
                    CellPadding="3" CellSpacing="2" BorderStyle="None" BorderColor="#DEBA84">
                    <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                        <Columns>
    <asp:BoundField DataField="Location" HeaderText="Location" />
                            <asp:BoundField DataField="Document No" HeaderText="Document No" />
                            <asp:BoundField DataField="Date" HeaderText="Date" DataFormatString="{0:dd-M-yyyy}" />
    </Columns>
    
                    </asp:GridView>
    
    
    if (!IsPostBack)
                {
                    GetData();
                }

    Thanks

    Monday, December 3, 2018 9:07 AM

All replies

  • User-893317190 posted

    Hi JagjitSingh,

    Since you have thousands of records, I suggest you could use paging.

    You could refer to the link below to learn how to paging in gridview.

    Please read Retrieving and Displaying Data first and then read Sorting, Paging, and Filtering Data

    https://docs.microsoft.com/en-us/aspnet/web-forms/overview/presenting-and-managing-data/

    If you must show the whole data in one page,I suggest you use ajax, ajax could work with loading image while gridview without ajax couldn't.

    About autoadjust, you could use bootstrap grid system.

    https://getbootstrap.com/docs/4.1/layout/grid/

    Below is my code.

     <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
       
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    
    
    
        
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="row"><div class="col col-sm-3"></div><div  class="col-10 col-sm-6" ><img id="img" src="../images/WingtipToys/planeglider.png" width="100%" ></div><div class="col-3"></div></div>
         <div class="row" id="table"><div class="col-1"></div> <div class="col-10">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" >Add New</button><br /><br />
            <table id="tblCategory" class="ui celled table" width="100%" >
                <thead class="bg-primary text-white">
                    <tr>
                        <th>No</th>
                        <th>Code</th>
                        <th>Description</th>
                        <th>Months</th>
                        <th>Action</th>  
                    </tr>  
                </thead>  
            </table>
        </div><div class="col-1 col-sm-3"></div></div>
    
        </form>
    </body>
        <script>
            loadData();
          function loadData()
          {
              $("#table").hide();//hide the table at first
    
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: "/Services/WebService.asmx/GetCategories",
            success: function (data) {
                var dt = $('#tblCategory').DataTable({
                    //stop initial ordering
                    order: [],
    
                    "data": data.d,
                    "columns": [
                        { 'data': 'No' },
                        { 'data': 'Code' },
                        { 'data': 'Description' },
                        { 'data': 'Months'},
                        {
                            "mRender": function (data, type, row) {
                                return '<a class="btn btn-warning" onClick="getbyID(row.No)" href="#">Edit</a>';
                            }
    
                        
                });
    
                $("#table").show();//when the data returns , show the table and hide the image
                $("#img").hide();
            }
        });
            }
    
    
    
        </script>
    </html>
    

    Code behind.

       [WebMethod]
            public Category[] GetCategories()
            {
               
                Category[] categories = new Category[] {
    
                    new Category{No=1,Code="hello",Description="product",Months=11},
                      new Category{No=25,Code="toy",Description="dtoy",Months=9},
                        new Category{No=31,Code="computer",Description="goodcomputer",Months=2},
                          new Category{No=86,Code="mobile",Description="it's good",Months=5},
                            new Category{No=67,Code="apple",Description="fruit",Months=7},
                };
                Thread.Sleep(3000);//to stop for three seconds to simulate much data
                return categories;
            }

    The result.

    Best regards,

    Ackerly Xu

    Tuesday, December 4, 2018 3:00 AM
  • User1341756031 posted

    Better use paging  for thousands of records. You can use an ObjectDataSource, so sorting and Paging will work automatically.

    <asp:GridView ID="GridView1" Runat="server"
    AutoGenerateColumns="False"
    AllowPaging="True" >

    source....Asp.Net Gridview

    Wednesday, January 23, 2019 5:05 AM