For a column that stores IDs in the data and displays labels via a select editor (valueIndx / labelIndx) and render, header filtering works on the raw cell values (IDs), not the displayed labels. This is expected since filters compare raw data, but it's confusing for end users. Here is a complete setup for pqGrid Pro v10 that makes the whole filtering UX label-based, without changing the underlying data model (cells keep storing IDs).
Three parts are needed:
1. Show labels in the range/equal checklist popup — copy the column's render and editor into the popup grid column via selectGridObj (this part is documented in the demos):
filter: {
crules: [{ condition: 'range' }],
selectGridObj: function (ui) {
var col = ui.obj.colModel[0];
col.renderLabel = ui.column.render;
col.editor = ui.column.editor;
col.editable = false;
}
}
2. Make text conditions (contain, begin, end, …) compare against labels — override compare of those conditions via filter.conditions, translating the cell's ID to its label before comparing. Note that pqGrid passes the filter input normalized (trimmed + uppercased) for string columns, so normalize the label the same way:
function labelCompare(fn) {
return {
compare: function (cellData, value, value2, rowData, column) {
var raw = rowData ? rowData[column.dataIndx] : cellData;
var label = (idToLabelMap[String(raw)] || '').trim().toUpperCase();
return fn(label, value, value2);
}
};
}
filter.conditions = {
contain: labelCompare(function (a, b) { return a.indexOf(b) !== -1; }),
begin: labelCompare(function (a, b) { return a.indexOf(b) === 0; }),
end: labelCompare(function (a, b) { return a.endsWith(b); })
// ...same pattern for notcontain, notbegin, notend, less, great, lte, gte, between, regexp
};
Important: do not override range, equal and notequal. Their input UI is the checklist whose checked values are the raw IDs, so the default ID comparison is the correct one there (the display is already handled by step 1). empty / notempty also work unchanged.
3. The search box inside the filter popup — this was the non-obvious part for us. The popup is a separate internal pqGrid whose rows also hold raw IDs (renderLabel only affects display), and its search box is a contain filter on that internal grid. So typing a label there finds nothing. Fix: apply the same condition overrides to the popup grid's column, inside the same selectGridObj callback:
selectGridObj: function (ui) {
var col = ui.obj.colModel[0];
col.renderLabel = ui.column.render;
col.editor = ui.column.editor;
col.editable = false;
// make the popup's search box label-based too
col.filter = col.filter || {};
col.filter.conditions = ui.column.filter.conditions;
}
With these three pieces, the checklist shows labels, free-text conditions match against labels (case-insensitive, same as regular text columns), and the popup's search box filters the checklist by label — while the actual filtering rules still operate on the ID values internally.
Optionally, add a label-based column.sortType as well, since sorting has the same raw-value behavior.
