Menu
I am using "DataTables Jquery" with an ASP.NET Gridview...
The gridview works perfectly fine for small datasets but for Large Datasets (>5000 rows) it takes some time to load and while the grid is loading the Loading Circle also Does not appear..
ASP.NET PseudoCode -
<body id="dt_example">
<form runat=server>
<asp:GridView ID="gv" runat="server" CellPadding="5" CellSpacing="5">
<RowStyle Wrap="False" />
</asp:GridView>
</form>
</body>
JavaScript -
<script type='text/javascript' charset='utf-8'>
$(document).ready(function () {
$('#gv').dataTable({
'bJQueryUI': true,
'sPaginationType': 'full_numbers',
'bAutoWidth': true
});
});
</script>
Code Behind -
protected void Page_Load(object sender, EventArgs e)
{
QueryRslt(passType, val);
gv.HeaderRow.TableSection = TableRowSection.TableHeader;
}
public void QueryRslt(string Type, string Value)
{
if (!string.IsNullOrEmpty(Type))
{
if (Type == "TaskStatus")
{
gv.DataSource = tsk
.Where(x => x.Status == Value)
.Select(m => new
{
ID = m.Incident_ID,
TaskID = m.Task_ID,
CI = m.CI,
Status = m.Status,
Priority = m.Priority,
ReportedDate = m.Task_Assign_Time,
AssigneeGroup = m.Assignee_Group,
AssignedGroup = m.Assigned_Group,
RespondDate = m.Incident_Responded_Date,
Reason = m.Status_Reason
}).ToList();
gv.DataBind();
}
else if (Type == "IncidentStatus")
{
gv.DataSource = inc
.Where(x => x.Status == Value)
.Select(m => new
{
ID = m.Incident_ID,
CI = m.CI,
Status = m.Status,
Priority = m.Priority,
ReportedDate = m.Incident_Reported_Date,
AssigneeGroup = m.Assignee,
AssignedGroup = m.Assigned_Group,
RespondDate = m.Incident_Responded_Date,
Reason = m.Status_Reason
}).ToList();
gv.DataBind();
}}}
The loading Gif appear for a fraction of second and then disappears...
So there are 2 things i want to know -
Display Loading gif until the whole gridview is populated..
Decrease the time of processing the data..
267
You can use ASP.NET generic handlers instead of ASP.NET GridView binding in code-behind.
like
$('#gv').dataTable({
'bJQueryUI': true,
'sPaginationType': 'full_numbers',
'bAutoWidth': true,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/handlers/handlerName.ashx'
});
and the handler contains
public class handlerName : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
try
{
// THOSE PARAMETERS ARE SENT BY THE PLUGIN
var iDisplayLength = int.Parse(context.Request["iDisplayLength"]);
////HOLD DISPLAY START
var iDisplayStart = int.Parse(context.Request["iDisplayStart"]);
////HOLD SORT COLUMN
var iSortCol = int.Parse(context.Request["iSortCol_0"]);
////HOLD SORT DIRECTION SUCH AS ASC AND DESC
var iSortDir = context.Request["sSortDir_0"];
////HOLD SEARCH KEYWORD
var sSearch = context.Request["sSearch"];
var variableToHoldData = className.functionName();
// DEFINE AN ORDER FUNCTION BASED ON THE ISORTCOL PARAMETER
Func<variableToHoldData, object> order = p =>
{
//IF SORT COLUMN IS 1, fieldName
if (iSortCol == 1)
{
return p.fieldName2;
}
// //IF SORT COLUMN IS 2, SORT BY fieldName
else if (iSortCol == 2)
{
return p.fieldName3;
}
}
//SORT BY fieldName
return p.fieldName1;
};
// DEFINE THE ORDER DIRECTION BASED ON THE ISORTDIR PARAMETER
variableToHoldData = "desc" == iSortDir ? variableToHoldData.OrderByDescending(order) : variableToHoldData.OrderBy(order);
// PREPARE AN ANONYMOUS OBJECT FOR JSON SERIALIZATION
var result = new
{
iTotalRecords = variableToHoldData.Count(),
iTotalDisplayRecords = variableToHoldData.Count(),
aaData = variableToHoldData
//SEARCH BY FIELD NAME
.Where(p => p.fieldName1.ToLower().Contains(sSearch.ToLower()) || p.fieldName2.ToLower().Contains(sSearch.ToLower()) || p.fieldName3.ToLower().Contains(sSearch.ToLower()) )
//SELECT FIELDS
.Select(p => new[] { p.fieldName1.ToString(), p.fieldName2.ToString(), p.fieldName3.ToString() })
.Skip(iDisplayStart)
.Take(iDisplayLength)
};
var serializer = new JavaScriptSerializer();
//CONVERT RESULT INTO JSON
var json = serializer.Serialize(result);
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
catch (Exception)
{
throw;
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
public class className
{
public string fieldName1 { get; set; }
public string fieldName2 { get; set; }
public string fieldName3 { get; set; }
public static IEnumerable<className> functionName()
{
//RETURN DATA FROM SOURCE
DT= obj.ReturnData();
//CHECK CANDIDATE PROFILE DATATABLE IS NULL
if (DT != null && DT.Rows.Count > 0)
{
foreach (DataRow row in DT.Rows)
{
yield return new className
{
fieldName1 = row["columnName1"].ToString(),
fieldName1 = row["columnName2"].ToString(),
fieldName1 = row["columnName3"].ToString(),
};
}
}
}
}
}
answered May 27 '26 00:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With