This is a migrated thread and some comments may be shown as answers.

Grid Columns filterable item templates dependent on two values

1 Answer 227 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeffrey
Top achievements
Rank 1
Jeffrey asked on 19 Mar 2019, 07:41 PM

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;
}

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Mar 2019, 02:03 PM
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:
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):

Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Jeffrey
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or