How to disable Drag and Drop on fixed columns in datatable ??

satti

HI Allan,
i am new to datatable , i am using ColReorder with FixedColumn plugin. bellow are my issues.
a) able to drop column onto fixed columns this should not happen how can i handle this??
b) able to reordering fixed columns. it should not happen how can i prevent it??

bellow is my code.

in js:

function displayQGData(){
objQG.bIsSKPD = StarsUtility.GetData("isstandardsskipped", {"iGradeID" : objQG.gradeBased ? $("#selQGGrade").val() : -1 , "lAssessmentID" : $("#SC_ASSESSMENT_ID").val()}, true);
var col = [];
col.push({ "mData": "SortOrder", "sWidth": "50px"});
col.push({ "mData": "ShortName", "sWidth": "60px"});
col.push({ "mData": "StandardName", "sWidth": ""});
var i = 1;
if(StarsUtility.GetSize(objQG.mpQGH) > 0){
$.each(objQG.mpQGH, function(key, objS){
col.push({"mData": "GroupItems_"+ i++, "sWidth": "150px"});
});
}else{
objQG.iNoQG = parseInt($("#no-of-groups").val());
for(var j = 0; j< objQG.iNoQG; j++){
col.push({"mData": "GroupItems_"+ i++, "sWidth": "150px"});
}
}
var table = $('#create-groups-all-in-one-table')
.dataTable({
"bDestroy":true,
"bServerSide": true,
"bProcessing": false,
"bSearchable": false,
"scrollY": "300px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"bSortCellsTop": true,
"bAutoWidth": false,
"bInfo": true,
"bFilter":false,
"sAjaxSource": $("#SC_CONTEXT_PATH").val() + '/sc/getqgdata',
"oScroller": {
"loadingIndicator": true
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
var o = CommonFunctions.StringifyData(aoData);
var arTemp = {};
if(StarsUtility.IsEmptyObject(objQG.params)) {
arTemp = getAllParams();
} else { arTemp = objQG.params ;}
o['dataparams'] = arTemp;
//console.log(">>--------------->"+JSON.stringify(o));
$.ajax( {
dataType: 'json',
contentType: "application/json;charset=UTF-8",
type: "POST",
url: sSource,
data: JSON.stringify(o),
success: function(z){
z = buildQGTableData(z);
objQG.totalRec = z.iTotalRecords;
$("#sp-no-of-que").html(objQG.totalRec);
fnCallback(z);
},
error : function (e) {}
} );
},
"fnDrawCallback": function ( oSettings ) {
if (this.fnSettings().fnRecordsDisplay() == 0) {
$('#create-groups-all-in-one-table_thead, .dataTables_length, .dataTables_info, .dataTables_paginate, #divFunction').hide();
$('.dataTables_info').parent().hide();
} else {
$('#create-groups-all-in-one-table_thead, .dataTables_length, .dataTables_info, .dataTables_paginate, #divFunction').show();
$('.dataTables_info').parent().show();
}
CommonFunctions.PageNumbers(objQG.totalRec, 'create-groups-all-in-one-table', oSettings);
$(".dataTables_info,.row-fluid").hide();
},
"oLanguage": {
"sZeroRecords": "No data available.",
"sProcessing": "

"
},
"aoColumnDefs": [
{"bSortable": false, "aTargets": objQG.arr},
{ "targets": [2], "visible": !objQG.bIsSKPD }
],
"aoColumns": col,
"aaSorting": [[0,'asc']]
} );
$("[data-toggle=popover]").popover();

new $.fn.dataTable.FixedColumns( table, {
    leftColumns: 3
} );
new $.fn.dataTable.ColReorder( table );

}

in jsp i hav included bellow js:

please give some solution to fix this issues.

allan

I had thought that there was an option to stop reordering being allowed on a column, but looking at the docs and code, that doesn't appear to be the case. So I'm afraid there is no option for that at the moment.

Allan

satti

Hello Allan,
Thank you for replay.
actually
i was passing arguments like this new $.fn.dataTable.ColReorder( table );
so able to reorder for fixed column as in plugin default "iFixedColumns": is 0,
hence fixed column was reordering
now
issue no b) able to reordering fixed columns. this issue fixed by passing argument like this

new $.fn.dataTable.ColReorder( table, {
"iFixedColumns": 3
} );

but for fixing a) able to drop column onto fixed columns
in plugin for time being i fixed like bellow

in dataTables.colReorder.js

bellow function when reordering event is fired :

i hard coded like

if(iTo < 3){
return;
}

if TO column is less than 3 then am retuning back so its fixed. but it should be dynamic.
how will i get to know fixed column size dynamically??? so that i can include dynamically.

$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )
{
var v110 = $.fn.dataTable.Api ? true : false;
var i, iLen, j, jLen, iCols=oSettings.aoColumns.length, nTrs, oCol;
var attrMap = function ( obj, prop, mapping ) {
if ( ! obj[ prop ] ) {
return;
}

    var a = obj[ prop ].split('.');
    var num = a.shift();

    if ( isNaN( num*1 ) ) {
        return;
    }

    obj[ prop ] = mapping[ num*1 ]+'.'+a.join('.');
};
alert(oSettings.iFixedColumns);
if(iTo < 3){
    return;
}

/* Sanity check in the input */
if ( iFrom == iTo )
{
    /* Pointless reorder */
    return;
}

if ( iFrom < 0 || iFrom >= iCols )
{
    this.oApi._fnLog( oSettings, 1, "ColReorder 'from' index is out of bounds: "+iFrom );
    return;
}

if ( iTo < 0 || iTo >= iCols )
{
    this.oApi._fnLog( oSettings, 1, "ColReorder 'to' index is out of bounds: "+iTo );
    return;
}

/*
 * Calculate the new column array index, so we have a mapping between the old and new
 */
var aiMapping = [];
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
    aiMapping[i] = i;
}
fnArraySwitch( aiMapping, iFrom, iTo );
var aiInvertMapping = fnInvertKeyValues( aiMapping );


/*
 * Convert all internal indexing to the new column order indexes
 */
/* Sorting */
for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ )
{
    oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ];
}

/* Fixed sorting */
if ( oSettings.aaSortingFixed !== null )
{
    for ( i=0, iLen=oSettings.aaSortingFixed.length ; i<iLen ; i++ )
    {
        oSettings.aaSortingFixed[i][0] = aiInvertMapping[ oSettings.aaSortingFixed[i][0] ];
    }
}

/* Data column sorting (the column which the sort for a given column should take place on) */
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
    oCol = oSettings.aoColumns[i];
    for ( j=0, jLen=oCol.aDataSort.length ; j<jLen ; j++ )
    {
        oCol.aDataSort[j] = aiInvertMapping[ oCol.aDataSort[j] ];
    }

    // Update the column indexes
    if ( v110 ) {
        oCol.idx = aiInvertMapping[ oCol.idx ];
    }
}

if ( v110 ) {
    // Update 1.10 optimised sort class removal variable
    $.each( oSettings.aLastSort, function (i, val) {
        oSettings.aLastSort[i].src = aiInvertMapping[ val.src ];
    } );
}

/* Update the Get and Set functions for each column */
for ( i=0, iLen=iCols ; i<iLen ; i++ )
{
    oCol = oSettings.aoColumns[i];

    if ( typeof oCol.mData == 'number' ) {
        oCol.mData = aiInvertMapping[ oCol.mData ];

        // regenerate the get / set functions
        oSettings.oApi._fnColumnOptions( oSettings, i, {} );
    }
    else if ( $.isPlainObject( oCol.mData ) ) {
        // HTML5 data sourced
        attrMap( oCol.mData, '_',      aiInvertMapping );
        attrMap( oCol.mData, 'filter', aiInvertMapping );
        attrMap( oCol.mData, 'sort',   aiInvertMapping );
        attrMap( oCol.mData, 'type',   aiInvertMapping );

        // regenerate the get / set functions
        oSettings.oApi._fnColumnOptions( oSettings, i, {} );
    }
}