Grid Columns filterable item templates dependent on two values

[Jeffrey]

Hi,

I have a question regarding custom filterable itemTemplates for kendo grids.

My team has a grid bound to a datasource that has rows of data containing two notable columns as follows:

 

1. Stage - (Can have values Draft, Pending, or Final)

2. DraftStage - (can have values ValidDraft and InvalidDraft)

 

Stage is a column that we display in the grid and DraftStage is kept hidden from the user.  However when the grid row has Stage = Draft, we mask that cell and display the row's DraftStage instead.  We have a function that converts Stage to its rows' DraftStage for display purposes only which we also utilize in creating the item template.  The issue though is that the kendo grid filters for our Stage column doesn't seem able to differentiate ValidDraft vs InvalidDraft when we mask the Draft Stage because the underlying data is still just "Draft" and so our filtering logic below does not work.  In an ideal world our filter dropdown for the Stage column will show the 4 possible filter options: ValidDraft, InvalidDraft, Pending, and Final.  As of today it will only display ValidDraft, Pending, and Final.  Selecting ValidDraft will filter for all "Draft" stages including the ones that are "InvalidDraft" which we do not want to see.  Any suggested work-arounds so that we can get our Stage column's filtering to work against two different data values for our one visible column?  Thanks for the help!

if (cols[c]["field"] == "STAGE") {
    cols[c].filterable = {
        multi: true,
        search: true,
        itemTemplate: function (e) {
            if (e.field == "all") {
                return '<li class="k-item"><label class="k-label"><input type="checkbox" class="k-check-all" value="Select All">Select All</label></li>';
            } else {
                return '<li class="k-item"><label class="k-label"><input type="checkbox" class="" value="#=data.STAGE#">#=getDisplayStage(data)#</label></li>'
            }
        }
    };
}

 

the masking function if interested:

getDisplayStage= function (dataItem) {
    return dataItem.STAGE === "Draft" ? dataItem.DRAFTSTAGE: dataItem.STAGE;
}

[Konstantin Dikov]

Hello Jeffrey,

All data operations are performed over a single field in the dataSource, so applying filter expression to two fields is not supported out of the box. However, if you want to modify the filter expressions you could handle the "filter" event of the Grid and add custom expressions or modified the existing ones:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filter

Additionally, in the following dojo example you can see how the "filter" method of dataSource could be used with "operator" as a function, where entirely custom logic could be applied (note that this is applicable for client-side operations only):

• https://dojo.telerik.com/uLEjaTiQ/14

Regards,
Konstantin Dikov
Progress Telerik