Extra(true), Set Default Option to OR

[Freddy]

I would like to set the default option to OR instead of AND with extra is set to True.  How can I do that in Kendo UI MVC?

[Dimiter Topalov]

Hi Freddy,

The desired adjustment is not provided out-of-the-box, but can be achieved via some custom coding. A possible approach is to handle the filterMenuInit event, find the respective DropDownList, and change its value programmatically via the value() method, e.g.:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).ClientTemplate(
                    @"<div class='customer-photo'
                        style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>
                    <div class='customer-name'>#: ContactName #</div>")
              .Width(240);
            columns.Bound(c => c.ContactTitle);
            columns.Bound(c => c.CompanyName);
            columns.Bound(c => c.Country).Width(150);
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        .Filterable()
        .Groupable()
        .Sortable()
        .Events(e => e.FilterMenuInit("onFilterMenuInit"))
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Customers_Read", "Grid"))
            .PageSize(20)
        )
    )

<script>
    function onFilterMenuInit(e) {
        var ddl = e.container.find('.k-filter-and[data-role="dropdownlist"]').data('kendoDropDownList');
        ddl.value('or');
        ddl.trigger('change');
    }
</script>

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Freddy]

Thanks and it works great on initial call to create the menu but once the user clicks "Clear" the menu will show up as "AND" as the default value.  Is it possible to bind the "Clear" event so it will set the value to "or" again?

[Dimiter Topalov]

Hello Freddy,

The filterMenuInit event is triggered only once each time the filter menu is initialized for the respective column. Binding to the "Clear" button will not yield the desired results, as after pressing it, the filter will be cleared, and the menu - closed.

The dropdowns are bound to an object, containing the default empty filter options, and this is why on subsequent opening of the filter menu the logic will be the default one ('and').

You can achieve the desired behavior by using the filterMenuInit event handler to get a reference to the filter menu and its popup, and then bind to this popup's open event to change the Logic DropDownList's value, e.g.:

http://dojo.telerik.com/ORUSAh

Regards,
Dimiter Topalov
Telerik by Progress

[Freddy]

Thanks Dimiter for the example.  However, when I use your method in my MVC project, I get an error:

0x800a138f - JavaScript runtime error: Unable to get property 'popup' of undefined or null reference

I'm not sure why I'm getting this error.  

[Freddy]

I think I have it figured it out with Dimiter's suggestion.  For some reason I can't find the object with filtermenu but i can find it from data-role = popup

<script>
    function onFilterMenuInit(e) {
        $('.k-filter-menu[data-role="popup"]').each(function (i, obj) {
            var popup = $(obj).data("kendoPopup");
            popup.bind('open', function () {
                // might need more complex conditional logic if multiple filters are applied across different fields
                if (!e.sender.dataSource.filter()) {
                    var logicDropDown = e.container.find("select:eq(1)").data("kendoDropDownList");
                    logicDropDown.value("or");
                    logicDropDown.trigger("change");
                }
            });
        });
    }
</script>

 

Thanks for your help.

[Freddy]

For Ref, I have more than 1 column in my grid so I updated the function to do that:

<script>
  function onFilterMenuInit(e) {
        $('.k-filter-menu[data-role="popup"]').each(function (i, obj) {
            alert("i: " + i);
            var popup = $(obj).data("kendoPopup");
            popup.bind('open', function () {
                var ddl = $(obj).find('.k-filter-and[data-role="dropdownlist"]').data('kendoDropDownList');
                ddl.value("or");
                ddl.trigger("change");
            });
        });
    }
</script>