select rows not working in fixed column

hvm

hi,
i m new with this datatables. Please help me I m stuck in one functionality.

In my requirement i want fixed column and its done perfectly. Now i want select and deselect rows this functionality is working only scrollable columns for fixed columns its not working. PLease help me how to resolve this.
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="Datatabedotnetexample._Default" %>



















var oTable;
$(document).ready(function () {

oTable = $('#myDataTable').dataTable
({

//"sDom": 'T<"clear">lfrtip',
//"sDom": 'C<"top"lp<"clear">>rt<"bottom"i<"clear">>T',

"sDom": 'CT<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none"]
},
"oColVis":
{
"activate": "mouseover",
"buttonText": "Change columns",
"aiExclude": [0, 1]

},
"oColReorder": {
},

"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": true,
//"sScrollY": "200px",
//"bPaginate": false,
"bStateSave": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {

var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText)
}
});
},

"aoColumns": [
//Assign the data to rows
{"mDataProp": "ID",
"fnRender": function (obj, val) {
return "" + obj.aData.ID + "";
}
},
{ "mDataProp": "Name"
, "fnRender": function (obj, val) {
return "";
}
},
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": false }
]
});
new FixedColumns(oTable, {
"sLeftWidth": 'relative',
"iLeftColumns": 2,
"iLeftWidth": 30
});
oTable.fnAdjustColumnSizing();

// *** FIX WIDTHS ON LEFT SIDE ***
var widths = [];

// first fix widths on tbody ...
$('.DTFC_LeftBodyWrapper thead th').each(
function () {
$(this).css('width', $(this).width());
});

// ... now save the actual widths on array
$('.DTFC_LeftBodyWrapper thead th').each(
function () {
widths.push($(this).width());
});

// ... now update widths on thead
$('.DTFC_LeftHeadWrapper thead th').each(
function (i, val) {
console.log('i:', i, ', width:', widths[i]);
$(this).css('width', widths[i]);
});

$("#dialog").dialog({
autoOpen: false,
width: 600,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});

$(".myClass").live('click', function (event) {
//$( "#dialog" ).dialog( "open" );
$("#dialog").html('').dialog("open");
$("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
//return false;
event.preventDefault();
});

});


function closepopup() {
$("#dialog").dialog('close');
}

<%--





--%>





ID


Company name


Address


Town


Country


Email


Gender


Phone










<%--/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).val();
} );
}

/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') select', tr).val();
} );
}

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function ( oSettings, iColumn )
{
return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
} );
}

/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
null,
{ "sSortDataType": "dom-text" },
{ "sSortDataType": "dom-text", "sType": "numeric" },
{ "sSortDataType": "dom-select" },
{ "sSortDataType": "dom-checkbox" }
]
} );
} );--%>

allan

You need to use the FixedColumns fnUpdate method to tell FixedColumns to redraw with the updated table information: http://datatables.net/docs/FixedColumns/2.0.3/#fnUpdate

Allan

hvm

hi allan,
it's not working..even fixed column functionality not working with this fnUpdate.

haffoudhi

Ok, This is a code to help people in this issue
[code]
var oTable; // This is the variable associated with your datatable
var gaiSelected = []; // This is initialisation should be done before "$(document).ready( function () {"
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
$('#datatable_wrapper table tr').live(event, function () {
// datatable in "#datatable_wrapper" is the name of the class associated with your table.
var aData = oTable.fnGetData( $(this).index()+1 );
var iId = aData[0]; // change 0 with the name of the column you need to grab its data
if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
var trIndex = $(this).index()+2;
$("#datatable_wrapper table").find("tr:eq("+(trIndex)+")").toggleClass("row_selected");
// "row_selected" is a class, it needs to be added to your css with some specific background-color
oTable.fnDraw(false); // This line is needed to hover the correct line
} );
[/code]

That's it.

hvm

hi haffoudhi,

its also not working, if fixed column functionality would be removed than select deselect all rows working but if added this fixed column functionality than it would not be working.

haffoudhi

Update:

[code]
var oTable; // This is the variable associated with your datatable
var gaiSelected = []; // This is an array where we are going to save our checked data
var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
$('#datatable_wrapper table tbody tr').live(event, function () {
// datatable in "#datatable_wrapper" is the name of the id associated with your table.
var iId = $(".DTFC_LeftWrapper:first tr:eq("+($(this).index()+2)+") td:eq(0)").text(); // Here i m extracting the data from the fixed column
if ( $(this).hasClass("row_selected") == false )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
var trIndex = $(this).index()+2;
$("#datatable_wrapper table").find("tr:eq("+(trIndex)+")").toggleClass("row_selected");
// "row_selected" is a class, it needs to be added to your css with some specific background-color
oTable.fnDraw(false); // This line is needed to hover the correct line
} );
[/code]

Try this out. I ve made some changes. Then leave your comment. I may help you in this issue.

hvm

hi,

its also not working. PLease see below code so you can get better idea.
















var oTable;
var gaiSelected = []; // This is initialisation should be done before "$(document).ready( function () {"
$(document).ready(function () {

oTable = $('#myDataTable').dataTable
({
"sDom": 'CT<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "multi",
"aButtons": ["select_all", "select_none"]
},
"oColVis":
{
"activate": "mouseover",
"buttonText": "Change columns",
"aiExclude": [0, 1]

},
"oColReorder": {
},
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": true,
"bStateSave": false,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"bJQueryUI": false,
"bLengthChange": true,
"bServerSide": true,
"sAjaxSource": "Default.aspx/binddata",
"fnServerData": function (sUrl, aoData, fnCallback, oSettings) {
var data1 = JSON.stringify(aoData);
$.ajax({
type: "POST",
url: sUrl,
contentType: 'application/json',
dataType: 'json',
data: "{'Collection': '" + data1 + "'}",
success: function (json) {

var s = $.parseJSON(json.d);
fnCallback(s);
},
error: function (xmlHttpRequest, textStatus, errorThrown) {
alert(xmlHttpRequest.responseText);
}
});
},

"aoColumns": [
//Assign the data to rows
{"mDataProp": "ID"
//,"fnRender": function (obj, val) {
//return "" + obj.aData.ID + "";
//return "";
//}
},
{ "mDataProp": "Name"
//, "fnRender": function (obj, val) {
//return "";
//}
},
{ "mDataProp": "Address" },
{ "mDataProp": "Town" },
{ "mDataProp": "Country" },
{ "mDataProp": "Email" },
{ "mDataProp": "Gender" },
{ "mDataProp": "Phone", "bVisible": false }
]
});
var oFC = new FixedColumns(oTable, {
"iLeftColumns": 2,
"iLeftWidth": 10
});

//var oTable; // This is the variable associated with your datatable

var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click"; // This 2 lines to make it work on iPAD too.
$('#myDataTable table tbody tr').live(event, function () {
debugger;
// datatable in "#datatable_wrapper" is the name of the id associated with your table.
var iId = $(".DTFC_LeftWrapper:first tr:eq(" + ($(this).index() + 2) + ") td:eq(0)").text(); // Here i m extracting the data from the fixed column
if ($(this).hasClass("row_selected") == false) {
gaiSelected[gaiSelected.length++] = iId;
}
else {
gaiSelected = jQuery.grep(gaiSelected, function (value) {
return value != iId;
});
}
var trIndex = $(this).index() + 2;
$("#myDataTable table").find("tr:eq(" + (trIndex) + ")").toggleClass("row_selected");
oTable.fnDraw(false); // This line is needed to hover the correct line
});


$(".myClass").live('click', function (event) {
//$( "#dialog" ).dialog( "open" );
$("#dialog").html('').dialog("open");
$("#modalIframeIdaprv").attr("src", "Testpopup.aspx");
//return false;
event.preventDefault();
});

});


function closepopup() {
$("#dialog").dialog('close');
}

<%--





--%>





ID


Company name


Address


Town


Country


Email


Gender


Phone