Filtering a Column with a Template

[Mathew]

I have the following grid:

$("#mygrid").kendoGrid({
    dataSource: gridDataSource,
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: "Starts with",
                eq: "Is equal to"
            },
            date: {
                eq: "Is equal to"
            }
        }
    },
    columns: [
        { 'field': 'RateType', 'title': 'Rate', editor: brDropDownEditor, template: "#=RateType.Name#" },
        ...
    ]
});

There are other fields but "RateType" is the one I have a question about. The field is an object and I'm using the template so the Name property is displayed in the grid.

When I attempt to filter by that column I get the following javascript error:

Uncaught TypeError: (d.RateType || "").toLowerCase is not a function

My question is, how do I get it to filter by the Name property instead of the object? I tried searching the forums and found this post: http://www.telerik.com/forums/inline-grid-filtering---column-bound-to-property-object

In that post, Plamen provided a sample (http://dojo.telerik.com/@zdravkov/ApiJU/2) which has the Category column setup the same way my RateType column is setup. In that sample, when I try to apply a filter on the Category column, I get the same javascript error:

Uncaught TypeError: (d.Category || "").toLowerCase is not a function

Is this a bug? How can I get the filter to compare against the Name property that I'm using in the template?

[Stefan]

Hello Mathew,

The provided example is showing how to filter the column CategoryID which is added as a separate column. Indeed the example is not working correctly when filtering the column which value is an object.

Filtering is not supported out of the box for columns that are bound to objects.

I can suggest you to check a different example which is filtering an object field, but by ID not by name. The column gets filtered when a CategoryID is typed e.g. (1, 2, 3...):

http://dojo.telerik.com/IhETA 

To be able to filter the column with a string value, I can suggest the following:

- Please remove the type:"number" from the schema.model configuration of the DataSource in order to be able to type string values in the filter textbox.

- Use the existing keydown handler to implement custom logic, which takes the textbox value and checks if it is matching the newItem.text value from the categories array. If a matching item is found, use its numeric newItem.value to filter the Grid dataSource instance.

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

I hope this is helpful.

Regards,
Stefan
Telerik by Progress

 

 

[Mathew]

Hi Stefan,

Thanks for the suggestion. I was able to get the filter working on the object field. I'm not using the row mode for filters but using filter menus instead.

The problem I have now is that the filter icon in the header of the object field's column is not getting the k-state-active class applied so it's not obvious there is a filter being applied based on that column.

From what I can tell, this seems to be happening because the field in my filter doesn't match the value of the data-field attribute on the th element.

My filter would be created like this:

var newFilter = { field: "RateType.Name", operator: "startswith", value: $(element).val() };

But the value of the data-field attribute is just "RateType". If I change the field in the column definition for the grid to "RateType.Name", the filter icon has the CSS class applied properly. I can't do that though because it breaks the binding of the dropdown for this column in edit mode.

I've tried overriding the click event of the Filter button in the filter menu so that it applies the CSS class to the icon but it doesn't work. I also tried applying the CSS class in the dataBound event of the grid using Dimiter's suggestions from this thread: http://www.telerik.com/forums/way-to-show-remind-user-that-a-column-is-applying-a-filter-

In both cases, it seems like there is an event that is being fired after I apple the CSS class that is reverting it back.

Do you have a suggestion on how I can ensure the CSS class is applied to the filter icon so it's clear there is a filter applied on that column?

[Stefan]

Hello Mathew,

The dataBound is the last event of the Grid, which will be fired after filtering. I can suggest executing the code provided by Dimiter in a setTimeout function again on the dataBound event, to ensure that it will be executed last.

If this does not resolve the issue, could you please send a runnable example so we can investigate further.

Regards,
Stefan
Telerik by Progress

 

 

[Mathew]

Hi Stefan,

Adding the setTimeout did the trick. Thanks so much for your help.