Filtering a Column with a Template

5 posts, 0 answers
  1. Mathew
    Mathew avatar
    3 posts
    Member since:
    Apr 2014

    Posted 24 Aug Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 25 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Mathew
    Mathew avatar
    3 posts
    Member since:
    Apr 2014

    Posted 26 Aug in reply to Stefan Link to this post

    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?

  5. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 30 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Mathew
    Mathew avatar
    3 posts
    Member since:
    Apr 2014

    Posted 31 Aug in reply to Stefan Link to this post

    Hi Stefan,

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

Back to Top
Kendo UI is VS 2017 Ready