First Selected Filter in the MenuGrid

[K.Ramadan]

Hello,

I am trying to set "startswith" as a first selected filte instead of "eq".

 

This my Grid

<div id="gridFirmenSuche_PVIEW" style="height:100%;background-color:pink;">
    @(Html.Kendo().Grid<WebCalendar_09K.Models.FirmaViewModel>()
        .Name("gridFirmenSuche")
        .HtmlAttributes(new {style = "height: 100%;width:100%;padding:0px;"})
        .Events(eve =>
        {
            eve.Change("onChange_Grid_FirmenSuche");
            eve.FilterMenuOpen("onfilterMenuInit_Default");
        })
        .Columns(columns =>
        {
            columns.Bound(c => c.Firma).HeaderHtmlAttributes(new {@class = "headerGrid"});
            columns.Bound(c => c.Firma2).HeaderHtmlAttributes(new {@class = "headerGrid"});
            columns.Bound(c => c.Plzz).Title("Plz").HeaderHtmlAttributes(new {@class = "headerGrid"});
            columns.Bound(c => c.Ort).HeaderHtmlAttributes(new {@class = "headerGrid"});
        })
        .Scrollable()
        .Sortable()
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Single)
            .Type(GridSelectionType.Row)
        )
        .Pageable(pageable => pageable
            .Info(true)
            .Input(true)
            .Numeric(false)
            .ButtonCount(5)
            .Responsive(true)
        )
        .Filterable(ftb => ftb
            .Mode(GridFilterMode.Menu)
            .Extra(false)
        )
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Read_Firmen", "Firma"))
            .PageSize(20)
        //.ServerOperation(true)
        )
        )
</div>

 

and this is what i tried to do in the onfilterMenuInit_Default()

i tried this onOpen and onInitialize

function onfilterMenuInit_Default(e) {

    e.container
       .find("[data-bind='value: filters[0].operator']")
       .find("[value=eq]")
       .removeAttr("selected");

    e.container
        .find("[data-bind='value: filters[0].operator']")
        .data("kendoDropDownList")
        .value("startswith");

    e.container
        .find("[data-bind='value: filters[0].operator']")
        .find("[value=startswith]")
        .attr("selected", "selected");



    e.container.data("kendoPopup").bind("activate", function (e) {

        this.element.find(":kendoFocusable").eq(1).focus();

        this.element.find(".k-button.k-primary").css("color", "#ffa500");
    });
}

[Alex Hajigeorgieva]

Hi, Karam,

Thank you for the provided relevant code snippets.

The only thing that is missing from the current logic is to trigger the change event of the operator dropdown list. The change event is not triggered when the value is changed programmatically as described in the important section of the value() method DropDownList API:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/methods/value

    e.container
        .find("[data-bind='value: filters[0].operator']")
        .data("kendoDropDownList")
        .value("startswith")
        .trigger("change");

Another alternative could be to define the operators yourself in the order that you want to use them:

.Filterable(f=>f.Operators(o=> {
                o.ForString(str => {
                    str.Clear()
                    .StartsWith("StartsWith")
                    .Contains("Contains")
                    .DoesNotContain("Does not Contain");
                    });
            }))

Kind Regards,
Alex Hajigeorgieva
Progress Telerik