asp.net gridview as datatable - Loading data twice

maniitsme · October 2018

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

colin · October 2018

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

maniitsme · October 2018

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.

maniitsme · October 2018

Source Code below:

</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>

maniitsme · October 2018

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>

colin · October 2018

"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.

maniitsme · October 2018

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

kthorngren · October 2018

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

maniitsme · October 2018

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

kthorngren · October 2018

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

walshcott · January 2019

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

asp.net gridview as datatable - Loading data twice

asp.net gridview as datatable - Loading data twice

Answers

Howdy, Stranger!

Categories

DataTables

asp.net gridview as datatable - Loading data twice

asp.net gridview as datatable - Loading data twice

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables