This is my obj and i do have Virtual mode on
var obj = {
dataModel: dataModel,
width: "100%",
height: 425,
copy: false,
virtualX: true,
virtualY: true,
fillHandle: 'vertical',
filterModel: { type: 'local', header: true },
pageModel: { type: 'local', rPP: 800, rPPOptions: [800, 1600] },
scrollModel: { lastColumn: null },
colModel: columns,
editModel: {
clicksToEdit: 1
},
selectionModel: { column: true },
numberCell: false,
freezeCols: 1,
resizable: true,
// For Auto Save Functionality //
change: function (evt, ui)
{
if (ui.source == 'commit' || ui.source == 'rollback') {
return;
}
var rowList = ui.rowList,
addList = [],
// recIndx = grid.option('dataModel').recIndx,
deleteList = [],
updateList = [];
for (var i = 0; i < rowList.length; i++) {
var obj = rowList,
rowIndx = obj.rowIndx,
newRow = obj.newRow,
type = obj.type,
rowData = obj.rowData;
if (type == 'update') {
var valid = grid.isValid({ rowData: rowData, allowInvalid: true }).valid;
if (valid) {
var jsonstring = { ..... };
updateList.push(jsonstring);
}
}
}
if (updateList.length)
{
var allvalues = { items: updateList }
$.ajax({
url: url,
//data: JSON.stringify(allvalues),
data: JSON.stringify({ allvalues: allvalues, }),
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
async: true,
beforeSend: function (jqXHR, settings) {
$(".saving", grid).show();
},
success: function (changes) {
var state = grid.saveState({ save: false });
saveState(state);
//commit the changes.
//grid.commit({ type: 'update', rows: changes.updateList });
},
complete: function () {
$(".saving", grid).hide();
}
});
}
},
create: function (evt, ui) {
loadState(this);
},
toolbar: {
items: [
{
type: 'select',
cls: 'columnSelector',
attr: "multiple='multiple'", style: "height:60px;",
options: function (ui) {
var CM = this.getColModel(),
opts = [];
for (var i = 0; i < CM.length; i++) {
var obj = {},
column = CM;
//if (column.cls != "default") {
obj[column.dataIndx] = column.title;
//}
opts.push(obj);
}
return opts;
},
listener: function (evt) {
var selectedarray = [];
var newCM = [];
//get array of sel ected options in select list.
var arr = $(evt.target).find("option:selected").map(function () {
return this.value;
}).get(),
CM = this.getColModel();
//newCM.push(ColSelectorVals);
for (var i = 0; i < CM.length; i++) {
var column = CM;
// if (column.cls != "default") {
column.hidden = ($.inArray(dataIndx, arr) === -1);
// }
if (!($.inArray(CM.dataIndx, ColSelectorVals) === -1)) {
newCM.push(column);
}
}
for (var i = 0; i < CM.length; i++) {
var column = CM,
dataIndx = column.dataIndx;
// if (column.cls != "default") {
//hide the column if not a selected option.
column.hidden = ($.inArray(dataIndx, arr) === -1);
// }
if ($.inArray(CM.dataIndx, ColSelectorVals) === -1) {
newCM.push(column);
}
}
this.option("colModel", newCM); // Changing the colmodel to refelect new colmodel i.e., to add columsn at the end not how they are defined.
var CM = this.getColModel(),
selopts = [];
for (var i = 0; i < CM.length; i++) {
var column = CM;
if (column.hidden !== true) {
selopts.push(column.dataIndx);
}
}
ColSelectorVals = selopts.slice(0);// Making the newly selected columns to stay where they are i.e., any new columns will be added at the end not.
this.option("colModel", this.option("colModel")); //refresh the colModel.
this.refresh();
var state = this.saveState({ save: false });
saveState(state);
}
}]
},
columnOrder: function (event, ui) {
var state = this.saveState({ save: false });
saveState(state);
}
