grid column filter multi-checkbox search server side

[Benjamin]

Hi, I'm using UI ASP.Net core to display some data on a grid. On one of the grid column I need a filter with multi-checkbox and search. I'm doing this by the following code on the view:

columns.Bound(c => c.Affects).Title("Components").ClientTemplate("#=showComponents(data)#").Groupable(false).Width(180).Hidden(true)
    .Filterable(fb => fb.Multi(true).CheckAll(true).Search(true).ItemTemplate("filterComponentsTemplate")
        .DataSource(ds => ds.Read(r => r.Action("GetComponentsNamesForGridFilter", "Changes"))));

My problem is than the list of components is very very big and I get performance issue on the initial load of the filter menu. I would like to limit the number of components to be displayed to 100 and refresh the list every time a key is pressed on the Search textbox.

How to do that? I cannot find a way to handle events from the filter search textbox.

[Ivaylo]

Hello Benjamin,

Thank you for the details provided.

Since you have submitted the same query as a support ticket and I have already answered your question in the ticket, I will post the same here in case someone else has the same question:

Here I will explain how this filtering can be implemented in your Grid component, especially considering the large dataset you are working with. I created a sample application featuring a Grid that incorporates a multi-check filter menu. This application is designed to efficiently handle a dataset comprising 10000 values. Initially, when I load the Grid, I am limiting the values to 100 using the DataSource configuration method "PageSize".

.Filterable(f => 
{
    f
        .Search(true)
        .Multi(true)
        .CheckAll(true)
        .DataSource(s => 
        {
            s
                .Ajax()
                .PageSize(100)
                .Read(t => 
                {
                    t.Action("Elements", "Grid");
                });
        });
});

When users type into the search box, a JavaScript function intercepts each keystroke and sends an "AJAX" request to our backend. This request sends the search text as a filter, and our backend returns a filtered, capped list of 100 items based on that input.

//Grid
.Events(e => e.FilterMenuInit("filterInit"))

//JS
function filterInit(e) {
    $(e.container).find('.k-input-inner').on('keyup', function(e) {
        var affectsColumnFilterMenu = $("th.k-filterable[data-field='Affects']").data().kendoFilterMultiCheck;
        var ds = affectsColumnFilterMenu.checkSource;
        var value = e.target.value;

        $.ajax({
            url: '/Grid/Filter',
            type: 'POST',
            data: { filter: value },
            success: function (response) {
                ds.data(response);
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
            }
        });
    });
}

//C#
public ActionResult Filter(string filter)
{
    var result = elements;

    if (filter != null)
    {
        result = result.Where(s => s.Element.Contains(filter));
    }

    result = result.Take(100);

    return Json(result);
}

You can find the application attached.

I hope this information was helpful.

Greetings,
Ivaylo
Progress Telerik

[Benjamin]

Perfect answer for my problem, thanks a lot Ivaylo!