DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

asp.net gridview as datatable - Loading data twice

asp.net gridview as datatable - Loading data twice

maniitsmemaniitsme Posts: 12Questions: 5Answers: 0
in Free community support

I defined asp.net Gridview as jQuery datatable. Whenever i am loading the page My Datatable displays twice.
Onload - 1 time flickers with Datatable values and after load is complete datatable is getting binded with expected result

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    Hi @maniitsme ,

    We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • maniitsmemaniitsme Posts: 12Questions: 5Answers: 0

    Since my Web page is designed in ASPX and ASPX.cs format i am not able to create test cases in HTML.
    To Clarify the issue again. On the page load, Datatable expands to entire browser footer and binds after few seconds.

  • maniitsmemaniitsme Posts: 12Questions: 5Answers: 0

    Source Code below:

    <head runat="server">
    <title>Demo page</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" />

    </head>
    <body>
    <div>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>





    <script type="text/javascript">
    $(document).ready(function () {
    var table = $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
    dom: 'Bfrtip',
    dom: 'frtipB',
    searching: false,
    scrollX: true,
    scrollCollapse: false,
    autoWidth: true,
    responsive: true,
    'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [0]}],
    'iDisplayLength': 8,
    buttons: [
    { extend: 'copy', text: 'Copy to clipboard', className: 'exportExcel', exportOptions: { modifier: { page: 'all'}} },
    { extend: 'excel', text: 'Export to Excel', className: 'exportExcel', filename: 'Agenda_Excel', exportOptions: { modifier: { page: 'all'}} },
    { extend: 'csv', text: 'Export to CSV', className: 'exportExcel', filename: 'Agenda_Csv', exportOptions: { modifier: { page: 'all'}} },
    { extend: 'pdf', text: 'Export to PDF', className: 'exportExcel', filename: 'Agenda_Pdf', orientation: 'landscape', pageSize: 'LEGAL', exportOptions: { modifier: { page: 'all' }, columns: ':visible'} }
    ]
    });
    });
    </script>

  • maniitsmemaniitsme Posts: 12Questions: 5Answers: 0

    Content Page:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Employee.aspx.cs" MasterPageFile="~/Site1.Master" Inherits="searchsamplemodal.Employee" %>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    </head>
    <body>
    <form id="no" method="post" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div class="container">
    <br />
    <br />
    <br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="w3-table-all w3-hoverable"
    HeaderStyle-BackColor="#FFCCCC" Width="100%" ClientIDMode="Static">
    <Columns>
    <asp:TemplateField>
    <HeaderTemplate>
    <asp:CheckBox ID="checkAll" runat="server" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="CheckBox1" runat="server" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblaid" runat="server" Text='<%#Eval("aid") %>'> </asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    HeaderText="Action Point">
    <ItemTemplate>
    <asp:Label ID="lblagenda" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("agenda_name") %>'>
    </asp:Label>
    </ItemTemplate>
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    HeaderText="Agenda No.">
    <ItemTemplate>
    <asp:Label ID="lblfid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("a_id") %>'>
    </asp:Label>
    </ItemTemplate>
    <ControlStyle Width="100px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblghmail" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("gh_mail") %>'>
    </asp:Label>
    </ItemTemplate>
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    HeaderText="Group Name">
    <ItemTemplate>
    <asp:Label ID="lblgname" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("group_name") %>'>
    </asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblgid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("gh_id") %>'>
    </asp:Label>
    </ItemTemplate>
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    HeaderText="Status">
    <ItemTemplate>
    <asp:Label ID="lblstatus" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("agenda_status") %>'>
    </asp:Label>
    </ItemTemplate>
    <ControlStyle Width="100px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblduedate" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("due_date") %>'>
    </asp:Label>
    </ItemTemplate>
    <ControlStyle Width="100px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblreminder" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("REMINDER_DATE") %>'>
    </asp:Label>
    </ItemTemplate>
    <ControlStyle Width="100px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
    Visible="false">
    <ItemTemplate>
    <asp:Label ID="lblpo" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
    Text='<%#Eval("A_PO") %>'>
    </asp:Label>
    </ItemTemplate>
    <ControlStyle Width="100px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    </asp:TemplateField>
    <asp:BoundField DataField="mdate" HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px"
    HeaderStyle-ForeColor="Black" HeaderText="Meeting Date" ItemStyle-Font-Bold="True"
    ItemStyle-Font-Names="Arial" ItemStyle-Font-Size="12px" DataFormatString="{0:dd/MMM/yyyy}">
    <ControlStyle Width="60px" />
    <HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
    <ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="12px" />
    </asp:BoundField>
    </Columns>
    <HeaderStyle BackColor="#4dc3ff" />
    <EmptyDataTemplate>
    No Record Available
    </EmptyDataTemplate>
    </asp:GridView>
    </div>
    </form>

    </body>

    </html>
    </asp:Content>

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    "On the page load, Datatable expands to entire browser footer and binds after few seconds."

    That's something that would be dependent upon your setup, so we really need to see your code in action to be able to help.

  • maniitsmemaniitsme Posts: 12Questions: 5Answers: 0

    i guess the problem is due to lot of data(4000 records) present in my DataTable. Once the data is loaded in GridView the DataTable plugin is applied.
    please see the screenshot

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    Maybe you can hide the GridView, load the data, initialize Datatables then show the GridView? Not sure as I'm not familiar with asp.net nor GridView. If you do this you may need to use columns.adjust() after showing the Datatable to fix the column widths.

    Kevin

  • maniitsmemaniitsme Posts: 12Questions: 5Answers: 0

    Gridview is a Server side databound control. I think i need to try server side processing to fix this issue

  • kthorngrenkthorngren Posts: 21,327Questions: 26Answers: 4,949

    I think i need to try server side processing to fix this issue

    Are you thinking of using Datatables server side processing? Not sure that will help in your case. I might be getting the sequence backwards but it looks like the GirdView is loading the 4000 records first then you are initializing Datatbles. For server side processing to be useful you would need to have Datatables fetch the data via the ajax option and populate the table.

    Kevin

  • walshcottwalshcott Posts: 2Questions: 0Answers: 0

    Beter 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

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.