Datatables inside ASP.NET UpdatePanel

f.dalpozzo

I'm using datatabels within ASP.NET UpdatePanel.
Someone can tell me why it does not work in it and if there may be solutions?

Thanks in advance.
Fabrizio

Wennsoft

I'm having the same issue. When we remove the UpdatePanel then we can get the Datatable to work. Have you found a solution yet? In our case we have a treeview click getting the data to display it in the datatable.

Wennsoft

I figured out what my issue was:
I needed to add this code to my Master file:
[code]
function fnClickRedraw() {
$(document).ready(function() {
oTable = $('table#ctl00_PortalMainPh_GridViewEquipment').dataTable({ "bStateSave": true });
});
[/code]
Then I added this C# code to my aspx.cs file to reset the DataTable that was in an UpdatePanel
[code]
private void ResetDataTablesPlugin()
{

StringBuilder builder = new StringBuilder();

builder.Append("");
builder.Append("fnClickRedraw();");
builder.Append("");
ScriptManager.RegisterStartupScript(this, this.GetType(), "fnClickRedraw", builder.ToString(), false);

}
[/code]

sawargaonkaramit

Hello Wennsoft,
Can you please elaborate on this?

It is not working with my code. I am initializing datatable on Master Page and using the same on the content page.

Wennsoft

I would then call the ResetDataTablesPlugin after calling our UpdateGridViewHeader code. So basically when anything was changed on the page, Page_PreRender code was called, Treeview Changed code was called, I would call the ResetDataTablesPlugin.
What I ended up doing was creating a case for each of my Gridviews. Here is the code:
[code]
function fnClickRedraw(param) {
$(document).ready(function() {
switch (param) {
case 1:
oTable = $('table#ctl00_PortalMainPh_GridViewEquipment').dataTable({ "bStateSave": true });
case 2:
oTable = $('table#ctl00_PortalMainPh_GridViewMaintenance').dataTable({ "bStateSave": true });
case 3:
oTable = $('table#ctl00_PortalMainPh_ServiceCallsGridView').dataTable({ "bStateSave": true });
case 4:
oTable = $('table#ctl00_PortalMainPh_LocationGridView').dataTable({ "bStateSave": true });
case 5:
oTable = $('table#ctl00_PortalMainPh_EquipmentServHistGridView').dataTable({ "bStateSave": true });
}
});
}
[/code]
And then I added the parameter pass into it like this:
[code]
public static void ResetDataTablesPlugin(Control ctl, int caseConst)
{

StringBuilder builder = new StringBuilder();


builder.Append("");
builder.Append("fnClickRedraw(" + caseConst.ToString() + ");");
builder.Append("");
ScriptManager.RegisterStartupScript(ctl, ctl.GetType(), "fnClickRedraw", builder.ToString(), false);
}
[/code]
Then i would call it like this:
[code]
PortalUtil.ResetDataTablesPlugin(this, 3);
[/code]

I don't consider myself a aspx coder. I was thrown into this thing. So this code probably could be cleaned up a bit. I really hope this helps.

sawargaonkaramit

Thanks for your solution :)