Datatable column filter plugin applied on a ASP.NET GridView
Datatable column filter plugin applied on a ASP.NET GridView
Hello,
First, I would like to thank you guys for the wonderful datatable column filter plugin. I was able to apply the plugin on an ASP.NET Gridview control. I have sorting, filtering, paging features on the datatable and the datatable itself is working as expected. Now, I have added one more column to the datatable which has checkboxes for each row and a checkbox in the header for that row. And I had added a few javascript code such that when the header checkbox is clicked, all the checkboxes in all the rows on that page of the gridview (datatable) would get checked, which is also working with exception of one issue that I am running into.
When the datatable displays the data, when I click on Page 2 and check the checkbox in the header, its checking all the checkboxes in all the rows on Page 2 but its bringing back the users to Page 1. I mean its checking the items in Page 2 but displays Page 1. I tried to use fnStandingRedraw() function but didnt have any success yet.
Below mentioned is the code:
$(document).ready(function() {
function fixGridView(tableEl) {
var jTbl = $(tableEl);
if (jTbl.find("tbody>tr>th").length > 0) {
jTbl.find("tbody").before("");
jTbl.find("thead tr").append(jTbl.find("th"));
jTbl.find("tbody tr:first").remove();
}
}
fixGridView($("#gv_Prov_To_Add"));
//$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable().columnFilter();
$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bStateSave": true
}).columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
// { type: "text" },
{type: "text" },
{ type: "text" },
{ type: "text" }
]
});
$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
});
These are the js functions:
function HeaderClick(CheckBox)
{
var oTable = $("#gv_Prov_To_Add").dataTable();
oTable.fnStandingRedraw();
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gv_Prov_To_Add.ClientID %>');
var TargetChildControl = "ChkBox_Prov_To_Add";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes in side the GridView.
for(var n = 0; n < Inputs.length; ++n)
if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;
//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
And its a ASP.NET GridView with a template field as mentioned below:
Can you please let me know what I am missing ?
First, I would like to thank you guys for the wonderful datatable column filter plugin. I was able to apply the plugin on an ASP.NET Gridview control. I have sorting, filtering, paging features on the datatable and the datatable itself is working as expected. Now, I have added one more column to the datatable which has checkboxes for each row and a checkbox in the header for that row. And I had added a few javascript code such that when the header checkbox is clicked, all the checkboxes in all the rows on that page of the gridview (datatable) would get checked, which is also working with exception of one issue that I am running into.
When the datatable displays the data, when I click on Page 2 and check the checkbox in the header, its checking all the checkboxes in all the rows on Page 2 but its bringing back the users to Page 1. I mean its checking the items in Page 2 but displays Page 1. I tried to use fnStandingRedraw() function but didnt have any success yet.
Below mentioned is the code:
$(document).ready(function() {
function fixGridView(tableEl) {
var jTbl = $(tableEl);
if (jTbl.find("tbody>tr>th").length > 0) {
jTbl.find("tbody").before("");
jTbl.find("thead tr").append(jTbl.find("th"));
jTbl.find("tbody tr:first").remove();
}
}
fixGridView($("#gv_Prov_To_Add"));
//$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable().columnFilter();
$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bStateSave": true
}).columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
// { type: "text" },
{type: "text" },
{ type: "text" },
{ type: "text" }
]
});
$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;
oSettings.oApi._fnReDraw(oSettings);
// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}
// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};
});
These are the js functions:
function HeaderClick(CheckBox)
{
var oTable = $("#gv_Prov_To_Add").dataTable();
oTable.fnStandingRedraw();
//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gv_Prov_To_Add.ClientID %>');
var TargetChildControl = "ChkBox_Prov_To_Add";
//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");
//Checked/Unchecked all the checkBoxes in side the GridView.
for(var n = 0; n < Inputs.length; ++n)
if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}
function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);
//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;
//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}
And its a ASP.NET GridView with a template field as mentioned below:
Can you please let me know what I am missing ?
This discussion has been closed.
Replies
Can someonw help me on this ?