For certain types of data in my grid, I need to define custom filter operators, e.g.:

updateOrAddFilter(fieldKey, {
    field: fieldKey, operator: function (item) {
        const nItem = normalize(item);
        const nValue = normalize(value);

        return nItem && nItem.includes(nValue);
    }
});

The updateOrAddFilter function then browses through the all the filters currently applied to the grid's dataSource, replaces old current-column filters with the new one and keeps all the other-column ones, and updates the grid's dataSource as such:

grid.dataSource.filter({ logic: "and", filters: updatedFilters });

Hello!

Is there a simple way to remove autocomplete from gridfilter?
I want to use filterbox. I need filterbox. But I don't want autocomplete.

https://dojo.telerik.com/hYMEJZcB

Thank you

Hi,

In our project, we are using Kendo Grid for data display and filtering. When performing a text search, I can set columns.filterable.ignoreCase to true for the search to be case-insensitive. Is there a way to make the search also diacritics-insensitive with a custom function? Thanks in advance :)

This might be more of an enhancement request, but I discovered that the filter widget incorrectly orders items if you reload the state. You can see this functionality in the jQuery demo here: https://demos.telerik.com/kendo-ui/filter/persist-state

Steps to reproduce:

1. Add a second line to the filter
2. Change "ContactTitle" to "Country" on the first line
3. Click "Save State" and then "Load State"
4. See that the items were reordered
   

As far as I can tell, this happens because changing a filter line removes the item from the FilterModel and then calls Push which adds it to the end of the array.

Hi,

We are attempting to set the default values of new rows in a grid based on some user-specified filters. The desired functionality is that if, for example, the "Year Level" filter is set to "Year 1", when a new row is created it will have its Year Level value automatically set to Year 1 AND will be visible in an edit state in the grid. 

We have read the previous Q&A here, however this solution is not suitable as it makes ALL rows with no "Year Level" value become visible when a new row is created.

As the "edit" event does not seem to fire when creating a new row whilst filters are applied, the implementation we are attempting involves saving those filters when the "Add" button is clicked and then re-applying them after the row has been created. This mostly works, but the new row is inserted as an un-editable dirty record and clicking its "Edit" button does nothing.

The code below is a combination of a couple of different approaches. Any guidance would be greatly appreciated!

let currentEditRow;
let currentModel;

$(".k-grid-add").click(function () {
    var grid = $("#grid").data("kendoGrid");

    // Save the current filters before clearing them
    savedFilters = grid.dataSource.filter();
    grid.dataSource.filter([]); 

    // Add a new row and enter edit mode
    currentEditRow = grid.addRow(); 
    grid.editRow(currentEditRow); // Attempting to force new row into edit mode here does not work
});

$("#grid").kendoGrid({
    dataSource: ds,
    sortable: true,
    toolbar: ["create"],
    columns: [
        {
            field: "Yearlevel",
            sortable: false,
            title: "Year Level",
            editor: cmbEditorYearlevelForHomegroup,
            template: "#=Yearlevel?.Name ?? ''#",
            editable: isEditable
        },
        // Other columns here
        { command: ["edit", "destroy"], title: "Action", width: "180px" }],
    editable: "inline",
    edit: function (e) {
        currentEditRow = $(e.container); // Save reference to the editing row
        currentModel = e.model; // Save the current model

        if (e.model.isNew()) {
            var yearLevelDropdown = $("#yearLevel").data("kendoDropDownList");
            e.model.set("Yearlevel", { // Update the values in the new row based on the selected filters
                Code: yearLevelDropdown.value(),
                Id: 0,
                Name: yearLevelDropdown.text()
            });

            var grid = $("#grid").data("kendoGrid");
            if (savedFilters) {
                grid.dataSource.filter(savedFilters); // Re-apply the filters
            }
            if (currentEditRow && currentModel && currentModel.isNew()) {
                var grid = this;
                setTimeout(function () {
                    grid.editRow(currentEditRow); // Attempting to re-enter edit mode for the new row; this also does not work
                });
            }
        }
    }
});

Hi support team,

we need filterable: { mode: "row" }  to have  a filter row.

We also need a DropDownList for a boolean column in the filter as described here:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-boolean-dropdownlist-filter

When using this we see an ugly filter row item:

I expect to have the DropDownList in the filter row.

This worked using following MVC template  syntax in the past

   .Filterable(f => f.Multi(false).Cell(c => c.ShowOperators(false)
   .Template(@<text>
               function(args) {
               args.element.kendoDropDownList({
               autoBind: false,
               dataTextField: "text",
               dataValueField: "value" ,
               dataSource: new kendo.data.DataSource({
               data: [{ text: "Ja" , value: "true" },
               { text: "Nein" , value: "false" }]
               }),
               index: 0,
               optionLabel: {
               text: "Filter" ,
               value: ""
               },
               valuePrimitive: true
               })
               }
            </text>

is this a bug?

I am running into an issue with allowing copy/paste of dates into the filter and cell input fields. Currently, the date fields have validation to support MM/dd/yyyy, and users of the app may be trying to copy dates in that are MM/dd/yy. I would expect Kendo to auto format the date to MM/dd/yyyy after the paste happens, or at least allow support for that, but it doesn't seem to happen.

In the cell, when putting in MM/dd/yy, a validation message appears saying the date is invalid, and there doesn't appear to be a way to override that. In the filter, when putting in MM/dd/yy and submitting the filter, it doesn't stick and completely ignores the date put in.

Is there any way with the latest version of Kendo (I am on 16) to allow for different date formats in these fields, or is there the possibility that this is something coming in the future?

Hello,

I am currently using Kendo Grid MVC in .NET Core. My customer needs a way to search one column for multiple words.

For example: If I type in "123 789" it should return an entry with "123456789".

Is there a way to achieve this? Thanks,

Hi everyone,

I'm currently working on a Kendo UI Grid and I need the filter menus to dynamically update based on the data currently displayed in the grid. Specifically, I want the filter options to reflect only the unique values of the data that is currently visible after applying other filters.

I'm using Kendo UI version 2021.3.914.

I found a solution that achieves exactly what I want in this example: Kendo UI Dojo Example. However, the solution in the example does not work with my version of Kendo UI.

Could someone please help me understand how to implement this functionality in my version of Kendo UI? Any guidance or suggestions would be greatly appreciated.

Thank you in advance!

Hello!

I am trying to use ListView with Buttons inside a Tabstrip. I want the user to be able to select an item to view a report.
As part of this list, I want a clickable hamburger button for the user to open up a popover menu for additional settings.

This setup works for all browsers when I do not perform the "filter" function. However on Firefox (only), using this filter function on the ListView causes my Kendo buttons inside the list to suddenly not fire the onClick handlers.

    $("#listView").data("kendoListView").dataSource.filter({      
      filters: [
        { field: "Document_Number", operator: "contains", value: "J82901" }
      ]
    });

On Chrome and Edge, the Kendo buttons work just fine even after this filter. On Firefox however, I notice that the Kendo buttons are unformatted and do not respond to the click events when logging output in the console.

To reproduce the issue, I have provided the following dojo code: Sandbox Code here

Here is a sample image of the output: I have a Tabstrip with a ListView nested within. Each ListView entry has a button attached to it via a template. On click, the button should fire the click handler and print output to the console. (And a popover in the future)

Any help to get this working on Firefox would be greatly appreciated! This is an older version of Kendo UI (Sept 2021).

Thanks.