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

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>

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.

I'm experiencing an issue that I've had a couple times utilizing the kendo UI libraries with formatting.

It seems that the formatting commands are not the same throughout the library, and as well there is limited documentation on PreviewFormatting.

 @(Html.Kendo().Filter<OrderSearchBindingModel>()
.Name("filter")
.ApplyButton()
.ExpressionPreview()
.MainLogic(FilterCompositionLogicalOperator.Or).Fields(f =>
  {
      f.Add(p => p.InternalOrderId).Label("Order ID").PreviewFormat("n");
      f.Add(p => p.ExternalOrderId).Label("EX Order ID");
}).FilterExpression(fe =>
  {
      fe.Add(p => p.InternalOrderId);
}).DataSource("source"))

I have tried the following formats with no success I'm simply trying to achieve a raw numerical value no commas, or decimals.

n

n0

#

#############

Is there documentation pointing to this specific formatter and it's options?

hi,

When Multi checkbox column is enabled in MVC Kendo Grid, it keeps spinning and not loading filter checkboxes for large dataset.
Please find the sample code attached.

We use Kendo.Mvc, Version=2022.1.412.0.
This sample code uses lesser version.

@(Html.Kendo().Grid<TelerikMvcApp6.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity).Filterable(f => f.Multi(true).Search(true));
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

Regards

Karthik

Given a grid, GridFilterMode.Row, with 3 columns (First Name, Surname, Nick Name) with 100 rows.

Given I have filtered the Surname column and now the grid is displaying 10 rows based on the applied filter on the Surname column.

If type one or more letters in the "First Name" field filter it will suggest all corresponding values to the dataSource even the ones that are not being displayed in the grid due to the applied filter in the column Surname.

Is there any way to suggest only values in the "view()" data (only values displayed in the grid)?

I haven't found any additional information on the documentation.
Any help is welcome.

Example:

• No filters have been applied so far:
  

• Applying a filter to the "Freight" column to values bigger than "890.00":
  

• Grid has now 2 rows based on the Freight filter. The user has typed on the "Ship Name" filter column and the grid has suggested all possible names that match  with it instead suggest only based on the 2 available rows (QUICK-Stop | Queen Cozinha)