Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
$(function () {
//define the grid.
var oColModel = [
{
title: "Business Unit",
dataIndx: "BusinessUnit",
editable: false,
width: 70,
filter: {
type: 'select',
crules: [{ condition: 'range' }],
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/Home/GetBusinessUnits");
},
maxCheck: 1
}
},
{
title: "Sector",
dataIndx: "Sector",
editable: false,
width: 80,
filter: {
type: 'select',
crules: [{ condition: 'range' }],
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/Home/GetSectors");
},
maxCheck: 1
}
},
{
title: "Location", dataIndx: "LocationName", editable: false, width: 70, align: "center",
filter: {
type: 'select',
crules: [{ condition: 'range' }],
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/Home/GetLocations");
},
maxCheck: 1
}
},
];
//Set up ParamQuery data model
var oDataModel = {
dataType: "JSON",
location: "remote",
recIndx: "EmpCode",
method: "GET",
url: "/Home/spGetUserList",
getData: function (response) {
return { data: response };
}
}
var obj = {
height: 'flex',
rowHt: 30,
wrap: false,
hwrap: false,
editable:false,
columnBorders: false,
scrollModel: { autoFit: true },
title: "<b>Header Filters</b>",
colModel: oColModel,
filterModel: {
on: true,
mode: "AND",
header: true,
type: "remote"
},
dataModel: oDataModel
};
var grid = pq.grid("#grid_array", obj);
function buildFilterDropDown(ui, strControllerUrl) {
//Gets the filter options from the supplied controller URL
ui.obj.dataModel = {
location: 'remote',
url: strControllerUrl,
getData: function (response) {
var val = ui.column.filter.crules[0].value || [],
di = ui.column.dataIndx,
//data = response.data;
data = response;
data.forEach(function (rd) {
if (val.indexOf(rd[di]) >= 0) {
rd.selected = true;
}
})
return { data: data };
}
}
}
});
\.pq-grid-title, .pq-group-header {
background: #332985;
border-color: #332985;
}
.pq-grid-row.pq-striped {
background: #edecff;
}
.ui-widget-header {
border: 1px solid #332985;
background: #332985;
color: #fff;
font-weight: bold;
}
<!--ParamQuery Grid custom theme e.g., office, bootstrap, rosy, chocolate, etc (optional)-->
<link rel="stylesheet" href="path to custom theme pqgrid.css" />
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/theControllerUrl", this.getColModel());
}
Filters cascade nicely now.
obj.colModel =
[
{
title: "Business Unit",
dataIndx: "BusinessUnit",
editable: false,
width: 70,
filter: {
type: 'select',
crules: [{ condition: 'range' }],
valueIndx: "BusinessUnit",
labelIndx: "BusinessUnitName",
gridOptions: {
filterModel: { header: false }
},
selectGridObj: function (ui) {
buildFilterDropDown(ui, "/theControllerUrl");
}
},
filterFn: function (ui) {
if (ui.condition == 'range') {
return {
maxCheck: 1
}
}
}
},
...
]
...
function buildFilterDropDown(ui, strControllerUrl) {
var strDataIndx = ui.column.dataIndx;
var oData = { [strDataIndx]: ui.obj.dataModel.data[0][strDataIndx] || "" }; //Can only access the current column here. Need to send state of all other header filters too.
ui.obj.dataModel = {
location: "remote",
getUrl: function () {
return { url: strControllerUrl, data: oData };
},
getData: function (response) {
var val = ui.column.filter.crules[0].value || [];
var strDataIndx = ui.column.dataIndx;
response.forEach(function (oOption) {
if (val.indexOf(oOption[strDataIndx]) >= 0) {
oOption.selected = true;
}
})
return { data: response };
}
}
}
