Filter On Different Type Than Type Column Is Bound To

4 posts, 0 answers
  1. David
    David avatar
    8 posts
    Member since:
    Oct 2012

    Posted 31 Jan 2013 Link to this post

    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.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 04 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David
    David avatar
    8 posts
    Member since:
    Oct 2012

    Posted 04 Feb 2013 Link to this post

    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?
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2304 posts

    Posted 06 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top