[Solved] Filter On Different Type Than Type Column Is Bound To

[David]

I have a question about filtering on the Kendo Grid.  I have looked all over the API docs, these forums, and SO and haven't come up with anything, so I figured I'd ask here.

Is there a straightforward way to set the filtering type to a different type other than the underlying type of the bound column?  

E.g.
I have a column called "ActivityID" bound to an int property in my ViewModel.  In the ClientTemplate of the bound column, I'm showing a property from my ViewModel called "ActivityNumber", which is a string.  When the user hits the filter drop down in the column header, I want them to be able to filter based on the string operators I have set up in the grid, not the number operators.

Does anyone know if there a straightforward way in the Kendo().Grid() configuration to achieve this?  I'm sure there's  a way to do it on the client side, but I was hoping that I was missing something really obvious before going down that path.

[Dimiter Madjarov]

Hi David,

 
The built-in filter does not support filtering on different field. As you assume the workaround is to filter manually. It could be done on the client side using the dataSource.filter method.

All the best,
Dimiter Madjarov
the Telerik team

[David]

Thanks for the response.  One more question.  I'm already taking the bound column, "ActivityID", and translating that to the displayed column, "ActivityNumber", on the server side in my action method.  Since I'm doing it that way, I don't really need to fire the filter manually from the client side.

I was wondering, though, if there's some way on the client side to specify different filter operations for that specific column.  Could I use jquery, grab the HTML elements of the filter for that column and change them or their CSS classes so that the user sees the string filter operations?

[Dimiter Madjarov]

Hello David,

Here is an approach that you could use. In the following example I am traversing to find the header cell of the specific column, then I get the data for the kendoFilterMenu and manually specify the operators in the dropdown lists.
 E.g.

<button id="filtersChange">Change filters</button>
<script>
    $("#filtersChange").click(function () {
        var index = 1; //column index
        var grid = $("#Grid").data("kendoGrid");
        grid.thead.find("th:not(.k-hierarchy-cell,.k-group-cell):eq(" + index + ")")
            .each(function () {
                var model = grid.dataSource.options.schema.model.fields;
                if (grid.columns[index].field && model[grid.columns[index].field].type == "string") {
                    var filterMenu = $(this).data("kendoFilterMenu");
                    $(filterMenu.form).find('select[data-role="dropdownlist"]:even').each(function () {
                        var dropDown = $(this).data("kendoDropDownList");
                        var operators = [
                            { text: "Contains", value: "contains" },
                            { text: "Does not contain", value: "doesnotcontain" },
                            { text: "Starts with", value: "startswith" },
                            { text: "Ends with", value: "endswith" }
                        ]
                        dropDown.dataSource.data(operators);
                    })

                    //we could also set initial values of the filters
                    filterMenu.filterModel.filters[0].set("operator", "endswith");
                    filterMenu.filterModel.filters[1].set("operator", "startswith");
                }
            });
    });
</script>

I hope this will work in your scenario.


All the best,
Dimiter Madjarov
the Telerik team