Extra(true), Set Default Option to OR

7 posts, 0 answers
  1. Freddy
    Freddy avatar
    5 posts
    Member since:
    May 2016

    Posted 07 Feb Link to this post

    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?
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    603 posts

    Posted 09 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Freddy
    Freddy avatar
    5 posts
    Member since:
    May 2016

    Posted 09 Feb Link to this post

    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?
  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    603 posts

    Posted 13 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Freddy
    Freddy avatar
    5 posts
    Member since:
    May 2016

    Posted 14 Feb in reply to Dimiter Topalov Link to this post

    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.  

  6. Freddy
    Freddy avatar
    5 posts
    Member since:
    May 2016

    Posted 14 Feb in reply to Freddy Link to this post

    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.

  7. Freddy
    Freddy avatar
    5 posts
    Member since:
    May 2016

    Posted 14 Feb in reply to Freddy Link to this post

    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>
Back to Top