How can I fix this, surely they are meant to be side by side, Ideally I would like to change the is true to labels also?

Hello there,
i have a project with MVC Asp.Net, Kendo v. "2024.4.1112.462" and would like to
- load data into grid, the data is returned by MVC Controller
- the spinner with the "loading data in progress" should never appear
- so the user can "play" on the grid header filters while loading data is ongoing 
- when the user clicks on "apply" on grid header filter, the previous request must be canceled to run the new request with latest filters applied, in this way the c#  CancellationToken is Canceled on server side.

Can you tell me how to "cancel" the actual http request from the kendo grid (client) and execute the new one, as described in the last point?

thanks in advance

Good morning,
i am using MVC.ASP net in my project and i'm trying to send the DataSourceRequest to a service , via rabbitmq.

the message should contains all the request filters set in the ui in order to create an excel report. i have tried to use the System.Text.Json serialization but it's not working properly. it serializes only the first level props.
i have found a ".ToJson" extension  but it's returning a Dictionary<string, object>, not usefule here.

can you suggest how to serialize the DataSourceRequest in Json format? with all nested and recursive properties?

the filters can be about dates, strings, combobox, and so on

thanks in advance

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.