Kendo Grid MVC - is possible to suggest in the filter field only available values in the grid?

[Rodrigo]

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)

[Anton Mironov]

Hi Rodrigo,

Thank you for the images and details provided.

In order to filter only the data available in the Grid on the client, I would recommend setting the ServerOperations of the DataSource to false.

Here is an example:

        @(Html.Kendo().Grid<TelerikMvcApp1.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

As said in this forum thread answer:

"When ServerOperation is enabled, all data operations like paging, sorting, grouping, etc. will be performed on the server-side. When they are disabled, those operations will be performed on the client and the entire data set will be available for the DataSource."

Give a try to the approach above and let me know if further assistance is needed.

Kind Regards,
Anton Mironov
Progress Telerik

[Rodrigo]

Hi Anton, 

Thank you very much for your reply.

I'm already using "ServerOperation(false)". The fact is that the suggestions don't follow the existing applied filters to suggest options for the current filter.

So, if the dataSource has 10 rows. Then a filter is applied and now the grid is displaying 5 rows. Then the user type in another filter column the suggestion is based on the 10 rows of the dataSource and not on the 5 rows that are being displayed.

I'll deal with this as a kendo limitation as it's not a big deal.

[Anton Mironov]

Hi Rodrigo,

Thank you for the kind words!

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

In order to help you create the reproducible, I have gone ahead and created a starter project for you. It already has all the dependencies and a view/controller with a Grid.

Please take the following steps:

1. Download and extract the attached solution
2. Open it in  VS2019/2022 and update the following files with your problematic code
2.1 Controllers/GridController.cs
2.2 Views/Home/Index.cshtml
3. Run the project and confirm that it reproduces the problem at runtime
4. Close VS2019/2022, then open the project in File Explorer and delete the bin and obj folders
5. Zip up the solution and attach it to your next reply.

Looking forward to hearing back from you.


Best Regards,
Anton Mironov

[Rodrigo]

Hi Anton,

I much appreciate your attention and thanks for sharing the sample project.

I just added filter mode "ftb.Mode(GridFilterMode.Row)" in the grid. 

ftb.Mode(GridFilterMode.Row)

See the steps below to reproduce the issue using the sample project. However, the same behaviour also occurs when the grid is not paginated.

Here are the reproduction steps:

1. Run the application
2. In the "Freight" column filter choose "Is greater than or equal to"
   * At this moment, "Ship Name" column has "ShipName" from 0 to 49
3. Type in the "Freight" column filter "470" (Figure 1)
4. The grid is now displaying 3 rows. Column "Ship Name" has "ShipName 47, 48, and 49"
5. Type "S" on the "Ship Name" column filter
   

Expected result:
The suggestion is:
         "ShipName 47"
         "ShipName 48"
         "ShipName 49"

Actual Result:
The suggestion is all options from the first page when no filters are applied. (Figure 2)

 

Figura 1

Figure 2

 

[Anton Mironov]

Hi Rodrigo,

Thank you for the kind words, the images, the repro steps, and the additional details provided.

The resulting behavior is expected as the filter input is implemented with this logic.

In other words, if the Freight filter is applied, it should now provide options only for 470, 480, and 490. The same behavior could be achieved in a custom way.

Every time a filter is applied, you could apply a new dataSource for the Grid. The new dataSource should include only the available options.

I hope this information helps.

 

Best Regards,
Anton Mironov