I am facing problem in moving selected row up or down in JQgrid, I need to move rows up and down within same grid, but because of transactions( grouping) its not working. Without grouping it works fine for JQgrid :
grouping:true,
groupingView : {
groupField : ['address'],
groupColumnShow : [false],
groupText : ['<b>Address: {0} - {1} Transaction(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
},
is it possible to move selected row up or down when grouping is true. can anyone share sample code to do it?
Code for move up/Down
function move(direction){
var selRowIds = getRowIDs('list4');
if(selRowIds.length == 0)
{
alert('Select Units to be moved '+direction);
}
else
{
if($('#list4').getGridParam('selrow')){
var ids = $('#list4').getDataIDs();
var temp = 0;
var currRow = $('#list4').getGridParam('selrow');
if(direction === 'up' && currRow > 1)
{
var r1 = $('#list4').getRowData(currRow-1);
var r2 = $('#list4').getRowData(currRow);
$('#list4').delRowData(currRow-1);
$('#list4').delRowData(currRow);
temp = r1.id; //16
r1.id = r2.id; // 17
r2.id = temp;// 16
$('#list4').addRowData(r1.id, r1); // 17
$('#list4').addRowData(r2.id, r2); // 16
}
var recordCount = jQuery("#list4").getGridParam("records");
if(direction === 'down' && currRow < recordCount)
{
var r1 = $('#list4').getRowData(currRow);
var r2 = $('#list4').getRowData(parseInt(currRow)+1);
$('#list4').delRowData(currRow);
$('#list4').delRowData(parseInt(currRow)+1);
temp = r1.id;
r1.id = r2.id;
r2.id = temp;
$('#list4').addRowData(r1.id, r1);
$('#list4').addRowData(r2.id, r2);
// $('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
// Sort the table
$('#list4').setGridParam({sortname:'id'}).trigger('reloadGrid');
}
}
}
jqgrid code:
var mandatoryFiled;
grid.jqGrid({
datastr: <%=jsonGridData%>,
datatype: "jsonstring",
height: 400,
colNames:['S No','Block/House No','Floor No', 'Unit No', 'Street Name',' 6- Digit Postal Code' ,'Trans Id','Address','Property Type','Area (sqm)','Date of Option Issued','Nett Price ($)','Gross Price ($)','Unit Price ($psf)','Nationality Of Buyer','Interested Party Transaction','Date of Option Aborted','Unit Status','listPriceFilter','salePriceFilter','sale_Date_Filter','aborted_Date_Filter','outlierFlag','row_Index'],
colModel:[
{name:'id',index:'id', width:40,align:"center", sorttype:"int"},
{name:'blkNo',index:'blkNo', width:100, align:"center",sorttype:"text",sortable:true,editable:true,editrules:{custom:true, custom_func:mandatoryChk}},
{name:'storey',index:'storey',align:"center",width:40,sorttype:"text",sortable:true,editable:true,
editrules:{custom:true, custom_func:mandatoryChk}},
{name:'unit_No',index:'unit_No', width:40,align:"center",sorttype:"text",editable:true,editrules:{custom:true,custom_func:mandatoryChk},onblur: 'submit'},
{name:'street_Name',index:'street_Name', width:60, align:"center",sorttype:"text",editable:true,editrules:{required:true}},
{name:'postal_code',index:'postal_code', width:60, align:"center",sorttype:"text",editable:true,editrules:{custom:true, custom_func:postalCode}},
// {name:'postal_code',index:'postal_code', width:60, align:"center",sorttype:"text",editable:true,editrules:{custom:true}},
{name:'trans_Id',index:'trans_Id', width:60, align:"center",sorttype:"text",editable:false},
{name:'address',index:'address', width:60, align:"center",sorttype:"text",editable:false},
{name:'property_Type',index:'property_Type', align:"center",width:80,sortable:true,
editable:true,edittype:"select",editoptions:{value:pptyTypeStr},formatter:'select',stype: 'select'
},
{name:'area',index:'area', width:50, align:"center",sorttype:"text",editable:true,
editrules:{custom:true, custom_func:myAreaCheck,number:true,required:true}},
{name:'sale_Date',index:'sale_Date',align:"center", width:75, sorttype:"date",sortable:true,editable:true,
editoptions: {
dataInit: function (element) {
$(element).datepicker({
dateFormat:"dd/mm/yy",
onSelect: function(dateText, inst) {
var $input = inst.input; // the datepicker input
var $row = $input.parents("tr");
$("#list4").jqGrid('saveRow',$row.attr("id"), false);
}
});
}
}},
// {name:'nett_Price',index:'nett_Price', width:80,align:"center",sorttype:"currency", formatter: 'currency',formatoptions: { thousandsSeparator: ", " , decimalPlaces: 0, defaultValue: '' }, editable:true ,editrules:{custom:true, custom_func:mynettpricecheck , number:true} },
{name:'nett_Price',index:'nett_Price', width:80,align:"center",sorttype:"text", editable:true, editrules:{custom:true, custom_func:mynettpricecheck }},
// {name:'sale_Price',index:'sale_Price', width:80,align:"center",sorttype:"currency", formatter: 'currency',formatoptions: { thousandsSeparator: ", " , decimalPlaces: 0},editable:true ,editrules:{custom:true, custom_func:mypricecheck,number:true}},
{name:'sale_Price',index:'sale_Price', width:80,align:"center",sorttype:"text", editable:true ,editrules:{custom:true, custom_func:mypricecheck} },
{name:'pricePSF',index:'pricePSF', width:80,align:"center",sorttype:"text", editable:false},
{name:'nationality_Code',index:'nationality_Code', width:80,align:"center",editable:true,sortable:true,
edittype:"select",formatter:'select',stype: 'select',
searchoptions:{
sopt: ['eq'],
dataInit:function(el){
var defOption = $("option:contains("+defaultCategory+")",el);
defOption.attr("selected", "selected");
setTimeout(function(){
$(el).trigger('change');
},500);
}
},
sorttype: function(cell, obj) {
return purchaserDtail[cell];
},
editoptions:{value:purchaserDtailStr}
},
{name:'interested',index:'interested', align:"center",width:70, sortable:true,editable:true,edittype:"select",formatter:'select',stype: 'select',editoptions:{value:interestedStr}},
{name:'dateAborted',index:'dateAborted',align:"center", width:75, sorttype:"date",sortable:true,editable:true,
editoptions: {
dataInit: function (element) {
$(element).datepicker({
dateFormat:"dd/mm/yy",
onSelect: function(dateText, inst) {
var $input = inst.input; // the datepicker input
var $row = $input.parents("tr");
$("#list4").jqGrid('saveRow',$row.attr("id"), false);
}
});
}
}},
{name:'unitStatus',index:'unitStatus', align:"center",width:60, sortable:true,editable:false},
{name:'listPriceFilter',index:'listPriceFilter', align:"center",width:40,editable:false},
{name:'salePriceFilter',index:'salePriceFilter', align:"center",width:40,editable:false},
{name:'sale_Date_Filter',index:'sale_Date_Filter', align:"center",width:40,editable:false},
{name:'aborted_Date_Filter',index:'aborted_Date_Filter', align:"center",width:40,editable:false},
{name:'outlierFlag',index:'outlierFlag', width:60, align:"center",sorttype:"text",editable:false} ,
{name:'row_Index',index:'row_Index', align:"center",width:40,editable:false,key:true}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
},
editurl: "clientArray",
multiselect: true,
enableSearch: true,
pagination:true,
pager: '#search',
rowNum: 30,
rowList: [5, 10,20,30,40,50],
sortname: 'id',
sortorder: 'asc',
sortable:true,
viewrecords: true,
//page: 4,
loadonce: true,
//pgtext : "Page {0} of {1}",
emptyrecords:'No Records',
// loadtext:'Loading ...',
showpage:true,
caption: "Details of individual units",
headertitles: true,
cellEdit: true,
cellsubmit: 'clientArray',
grouping:true,
groupingView : {
groupField : ['address'],
groupColumnShow : [false],
groupText : ['<b>Address: {0} - {1} Transaction(s)</b>'],
groupCollapse : false,
groupOrder: ['asc'],
groupDataSorted : true
}
thanks
After Move up new grid should look like this : Data is coming from database, using JSON for that
