@paramquery
hi Admin,
i am using data from a dynamic table hide/show of column working for me, i also want use grouping of data with that please help me out from this.
Thanks.
my code Sample is Here: I used
groupModel: { dataIndx:[0],sorting: "local", location: "local" } for this but its not working for me.
var obj = j$.paramquery.tableToArray(tbl);
var newObj = { width: 1048, height: 350, numberCell: true, title: false, sortable: true,
freezeCols: 3, resizable: true, selectionModel: { type: 'cell', mode: 'block' },
editModel: {clicksToEdit:2},
flexHeight: true,
flexWidth: true
};
obj.colModel = [{title: "Resources", width: 100, dataType: "String"},
{ title: "Supplier", width: 100, dataType: "string"},
{ title: "Cost Type", width: 100, dataType: "string"},
{ title: "Project", width: 90, dataType: "String" },
{ title: "Item", width: 80, dataType: "String" },
{ title: "Unit", width: 70, dataType: "String" },
{ title: "Mon", width: 20, dataType: "Integer" },
{ title: "Tue", width: 20, dataType: "Integer" },
{ title: "Wed", width: 20, dataType: "Integer" },
{ title: "Thus", width: 20, dataType: "Integer" },
{ title: "Fri", width: 20, dataType: "Integer" },
{ title: "Sat", width: 20, dataType: "Integer" },
{ title: "Sun", width: 20, dataType: "Integer" },
{ title: "Total", width: 20, dataType: "Integer" },
{ title: "Costs", width: 20, dataType: "Integer" }
];
newObj.dataModel = { data: obj.data, sortIndx: 0,sorting: "local", location: "local" ,groupModel: {
dataIndx:[0],sorting: "local", location: "local" }};
newObj.colModel = obj.colModel;
dataMobile = newObj.dataModel;
var j$grid = j$("#grid_showhide_columns").pqGrid(newObj);
//menu with checkbox images.
j$.each(newObj.colModel, function (i, col) {
//var src = '/Content/images/checkbox-checked.png';
var cls = 'pq-sh-checkbox pq-sh-checkbox-checked';
if (col.hidden) {
cls = 'pq-sh-checkbox';
}
if((col.title != "Resources") && (col.title != "Mon") && (col.title != "Tue") && (col.title != "Wed") && (col.title != "Thus") && (col.title != "Fri") && (col.title != "Sat") && (col.title != "Sun"))
j$(".menu_cols").append("<li><input type='checkBox' style='float:left;' checked/><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
else
j$(".menu_cols").append("<li style='display:none;'><input type='checkBox' style='float:left;display:none;' checked/><a href='#'><span class='" + cls + "'></span> " + col.title + "</a></li>");
});
j$(".menu_cols").menu({ select: function (evt, ui) {
var indx = j$(ui.item).index();
var colM =j$grid.pqGrid("option", "colModel");
if (colM[indx].hidden == true) {
colM[indx].hidden = false;
console.log(ui.item);
j$(ui.item).find("span").addClass("pq-sh-checkbox-checked");
j$(ui.item).find("input").attr("checked","checked");
}
else {
colM[indx].hidden = true;
j$(ui.item).find("span").removeClass("pq-sh-checkbox-checked");
j$(ui.item).find("input").removeAttr("checked","checked");
}
j$grid.pqGrid("option", "colModel", colM);
evt.preventDefault();
return false;
}
});
