Posts Tagged ‘drag&drop’

jqGrid drag and drop

Posted: July 18, 2013 in Jquery, PHP
Tags: ,

1)      Add primary key field in colNames and colModel


colNames:['Id','Sort Order','Question','Created By', 'Status', 'Action'],

{name:'poll_question_id',index:'id',align:'center',hidden:true,sortable:false,editable:false},

Now your column is sortable

2)      Add mouse over effect to sort order column


{name:'order_index', sortable: true, search: false, classes:'data-cell-style mousecursor', width:col_1 ..

<style>.mousecursor{ldelim}cursor:move;{rdelim}</style>

jQuery('.mousecursor').live("mouseover", function() { jQuery(this).attr('title', 'Drag row to update sort order');

3)      Increase default rows loading:

rowNum:200,

4)      Add php file to update sort_order in database


jQuery("#applicationListGrid").jqGrid('sortableRows', {

update: function (ev, ui) {

var str = '';

var ids = jQuery("#applicationListGrid").jqGrid('getDataIDs');

for (var i = 0; i < ids.length; i++)

{

var rowId = ids[i];

if(str!="") str = str + ',';

str = str+rowId;

}

var sort_url = 'update.php?table=mytest&auto_id=question_id';

jQuery.ajax({

type: "POST",

url: sort_url,

data: { all_id: str}

}).done(function( msg ) {
jQuery("#applicationListGrid").setGridParam({sortorder: "asc"}).jqGrid("sortGrid", "order_index", true);
jQuery("#applicationListGrid").trigger("reloadGrid");

});

});

});

Advertisements