Attempting to create persistence on filter.

I have the following filter:

                    @(Html.Kendo().Filter<...>()
                        .Name("fltMatrix")
                        .Events(e => e.Change("fltMatrix_Change"))
                        .DataSource("dataSource1")
                        .ExpressionPreview()
                        .Fields(f =>
                        {
...
                        }))
                    @Html.HiddenFor(model => model.FILTER)

I have the following JS code:

    function fltMatrix_Change(e) {
        e.sender.applyFilter();
        $("#FILTER").val(JSON.stringify(e.expression));
    }

    function getInitialExpression() {
        if ($("#FILTER").val()) {
            return JSON.parse($("#FILTER").val());
        }
    }

document.ready looks like this:

    $(document).ready(function () {
        if (getInitialExpression()) {
            var filter = $("#fltMatrix").data("kendoFilter");
            console.log(filter);
            var options = filter.getOptions();
            options.expression = getInitialExpression();
            filter.setOptions(options);
            filter.applyFilter();
        }
    });

console shows undefined and I get an error on the highlighted line:

jQuery.Deferred exception: Cannot read properties of undefined (reading 'getOptions') TypeError: Cannot read properties of undefined (reading 'getOptions')  

Everything else seems to work OK.  The filter is loading and updating the data source on change. The filter expression makes the round trip to the server and back.  It is just the .data("kendoFilter") that comes back with nothing.

I am using a Kendo.Filter object like the following to filter results in a Kendo Grid:

@(Html.Kendo().Filter<CustomPersonClass>()
     .Name("personFilter")
     .DataSource("peopleDS")
     .ApplyButton(false)
     .Fields(f =>
     {
         f.Add(p => p.LastName).Label("Last Name");
         f.Add(p => p.FirstName).Label("First Name");
         f.Add(p => p.MiddleName).Label("Middle Name");
         f.Add(p => p.StartDate).Label("Start Date").Operators(o => o.Date(d => d.Eq("Is equal to").Gte("Greater than equal").Lte("Less than equal")));
     })
)

 I have helper code to handle the toolbar in my Kendo Grid like the following, :

@helper ToolbarTemplate()
{
    <button class="k-button k-button-solid k-button-solid-base" id="applyFilter"><span class="k-icon k-i-filter"></span>Apply Filter</button>
    <button class="k-button k-button-solid k-button-solid-base" id="clearFilter">Reset</button>
    <button class="k-button k-grid-excel k-button-solid k-button-solid-base"><span class="k-icon k-i-excel"></span>Export to Excel</button>
}

I also have some JavaScript in a function to apply the filter when the Apply Filter button is clicked, as seen here:

$("#applyFilter").click(function (e) {
    //e.preventDefault();
    var myFilter = $("#personFilter").getKendoFilter();
    localStorage["kendo-person-filter-options"] = kendo.stringify(myFilter.getOptions().expression);
    myFilter.applyFilter();
});

The problem I am having is if I enter an invalid Leap Year date (e.g. 2/29/2003, since 2023 didn't have a February 29th), I get no data back; however, if I enter a valid Leap Year (e.g. 2/29/2004), my Kendo Grid will show data.  Is there a way to validate the date that is being entered manually into a DatePicker field used for filtering?  That is, if I use the DatePicker, it will not show me 2/29/2003 as an option, but if I type in 2/29/2003 and click Apply Filter, it doesn't throw any kind of error about 2/29/2003 being invalid.

Using the following script to build a Filter and DataSource.

When I click the Apply button I would expect the Filter Property in the method to be populated. See screen print below

    <script>
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        dataType: "json",
                        url: "/Home/Products_Read"
                    }
                },
                serverFiltering: true,
                pageSize: 4,
                schema: {
                    model: {
                        fields: {
                            ProductName: { type: "string" },

                        }
                    }
                }
            });

            $("#filter").kendoFilter({
                dataSource: dataSource,
                expressionPreview: true,
                applyButton: true,
                fields: [
                    { name: "ProductName", type: "string", label: "ProductName" },
                ],
                expression: {
                    logic: "or",
                    filters: [

                        { field: "ProductName", value: "Chai", operator: "contains" }
                    ]
                }
            });

        });
    </script>

This is the situation: In have a grid, that is set up with server side paging, sorting and filtering. One of the columns displays the name of a related object. It should be possible to filter this column. Besides the name of the related object also an id is known (but not shown).

The filter should be with a dropdown list, presenting the possible choices to the user.

Currently the filter is set up as follows:

@(Html.Kendo().Grid<ReportEOSViewModel>()
    .Name("EOSreports")
    .Filterable(cfg => cfg.Extra(false))
    .Columns(columns =>
    {
            columns.Bound(p => p.Well.WellNumber).Filterable(flt => flt.UI("reos_well_filter")
                .Operators(op => op.ForString(fs => fs.Clear().IsEqualTo("Is equal to")))
                .Multi(false).Extra(false));
           // More columns...
    })
    .Pageable()
    .Events(e => e.Filter("reos_filter"))
    .Scrollable()
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .PageSize(50)
        .Read(rd => rd.Action("GetList", "ReportEOS", new { id = Model }))
    )
)

With the supporting script:

function reos_well_filter(element) {
    element.kendoDropDownList({
        dataSource: {
            transport: {
                read: "@Url.Action("DropDownList", "Well")"
            }
        },
        autoWidth: true,
        dataTextField: "Value",
        dataValueField: "Id",
        optionLabel: "--select well--",
        filter: "startswith"
    });
}

function reos_filter(e) {
    if (e.field === "Well.WellNumber") {
        let flt = this.dataSource.filter();
        if (flt !== undefined && flt !== null) {
            for (let i = flt.filters.length - 1; i >= 0; i--) {
                if (flt.filters[i].field === "WellRefFK")
                    flt.filters.splice(i, 1)
            }
        }
        if (e.filter !== null) {
            e.filter.filters[0].field = "WellRefFK";
        }
        else {
            this.dataSource.filter(flt);
            e.preventDefault();
        }
    }
}

So basically the column has a .UI() call set up to reos_well_filter() that creates the drop down list, showing the names and returning the id as filter value. Also in the Filter event, there is special processing being done in case this particular column is being filtered on. Basically the name of the field in the filter is changed from "Well.WellNumber" to "WellRefFK". This, however, has some unwanted side effects, because the grid now basically doesn't recognize the filter as a filter for that specific column any more.

For starters, when filtering on a second item, the filter is not replaced, but added to. That's why the old filter is first removed. Also the clear filter function does not work any more, so that's why the case where e.filter === null is also processed. The last side effect that I noticed and have not been able to solve is that the filter button in the header does not show the column is being filtered on.

So my question is: Is there another way to let the grid know that the filter should be triggered on another field, so that everything keeps working as intended?

Bonus: Is it possible to hide the filter variant dropdown box, as there is only one choice now ("Is equal to").

Hi! I have a Kendo UI Filter with a column bound with a DropDownList. Everything works fine, except the ExpressionPreview gives me "[object Object]". I read that I could use the PreviewFormat, but I have no clue about how that works if it's not for numeric values. Your documentation is very thin about the subject. Can you tell me how could I see the property set as DataTextField in the preview? Or at least the DataValueField.
My razor looks like :
 @(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("filter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
  {

      f.Add(x => x.Symbole).Label("My values list").Operators(c => c.String(x => 
                          x..Contains("Contient")).EditorTemplateHandler("getSymboleList")
}).DataSource("source"))
 
And the script containing the dropdown logic is like this :

.kendoDropDownList({
                dataTextField: "SymboleDisplayName",
                dataValueField: "Symbole",
                dataSource: {
                    type: "json",
                    transport: {
                        read: "https://myodataurl.com/symbols/getSymbols"
                    },
		    schema: {
			data: "value"
		    }
                }
            });

 
Note that my datasource is an OData query, so I defined a schema with data: "value" in my kendo.data.DataSource object as well as type: "json". The type is aslo specified in the transport.read preperties datatype: "json"

Hi I'm attempting to repeat a vehicle (year/make/model) set of cascading dropdown lists in a component that would result in up to 3 vehicle selectors on the same form. Running into issues as the ddls have the same ids. I've been playing around with appending counters to the name etc but running into the issue where the last set of ddls gets the data. Wondering

1. If there is a working example of this scenario

2. If it is possible to pass a value to the filter function

Thanks.

I had a request to change the filtering of a certain column from "Starts With" to use a multi-select checkbox type filter to facilitate selecting 5-10 random items.  Then of course some other users prefer the "Starts With" type of filtering.  My solution is to have dual columns for that particular field, one with each filter type.  

Since my grids save user preferences in local storage between sessions, the users can hide whichever column has the filtering they don't prefer and just use the other one.  When they reload the page, their choice of column persists and their filtering is how they like it.

Darron

Need an example of using the Filter component with a DataSource.  Using the Apply button of the DataSource I would like to pass the arguments collected from the Filter to the Contoller function bound to the Read command of the datasource.