jQuery datatables customizable columns (asp.net usercontrol) - asp.net

Question

net webforms application.
In my .aspx page Im using jQuery datatables and its gets data using ajax.
In my jQuery datatables I have some configuration for setting up my columns:
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function(data, type, full, meta) {
//return '<input type="checkbox">';
if (data == "false") {
return '<input type="checkbox" class="styled green">';
} else {
return '<input type="checkbox" class="styled green" checked="' + data + '">';
}
}
}],
I have a requirement to move this jQuery datatable to an usercontrol so it can be reusable on other parts of the web application but I should be able to let the control know what columns to hide.
I was thinking on sending from server other property in my json, an array maybe named HideCols that has the index of the columns that I want to hide and then apply with jQuery some code to hide them.
Im getting the table data like this:
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push(
{ name: "filter", value: filterVal }
);
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(msg) {
// here I get my json table data from server
var json = jQuery.parseJSON(msg.d);
fnCallback(json);
// here I can do my jQuery code to hide columns
if(json.HideCols != null)
{
}
}
});
}
Other way would be great if I can send from server the columnDefs configuration but I guess its going to be more tricky.
Any clue?

Answer 1

I have implemented the dynamic columnDefs (colModel) functionality with jqGrid. You may read the post here jqgrid-dynamic-reading-of-colmodel-and-colnames-from-codebehind-of-aspx
You may get the basic idea of generating dynamic columnDefs (xxx_colModel in above post) and ajaxData (xxx_Data in above post) from code-behind and implement it in your way. Set properties of columns to hide in the dynamically generated columnDefs.
As regard to your approach of hiding the columns:
I was thinking on sending from server other property in my json, an array maybe named HideCols that has the index of the columns that I want to hide and then apply with jQuery some code to hide them.
You may add another property to top level of JSON along with xxx_colModel and xxx_Data say xxx_HiddenCols and store csv column IDs e.g. 2,8,9
Then on the client side, after the grid is initialized, you may use for loop to process each column to hide e.g.
var colArray = xxx_HiddenCols.split(',');
for (var i = 0; i < colArray.length; i++) {
table.column( colArray[i] ).visible( false );
}