Custom Filter on Large Data

[Mohamed]

Greetings,

I'm using a Kendo Grid with server paging and filtering, as we are handling big data, our data source only contains a limited number of records based on the page number and the number of records to be displayed.

with the grid, I'm using row filtering.

as the grid data-source doesn't contain all the possible values, the filter auto-complete doesn't show all the correct possible option, so I changed the columns.filterable.cell.dataSource to get those needed values through an ajax call that returns distinct values.

That worked fine but as I'm handling big data, the filter became slow and even freeze (I'm testing on a table that has about 25000 record and it's not the biggest one).

What I want to do is using the columns.filterable.cell.minLength to limit the number of records returned in the auto-complete but I wasn't successful as the filter data-source gets called when I load the grid and not when I start setting the filter value, I tried used a template function but without any success.

Is there a better approach to make the cell datasource read the value when the user start typing the filter, and with consideration to the value being input?

 

Thanks,

 

[Mohamed]

Here is my column definition

field: "SEARCHNAME", title: "Search Name", hidden: false, filterable: {
                    cell: {
                        minLength: 3,
                        operator: "contains",
                        template: uiFilter,
                    },
                }

 

and here is the template function I'm trying to use

 

function uiFilter(args) {
        debugger;
        args.element.kendoAutoComplete({
            datasource: getAllRecordsForFieldValue(ServiceURL, "TableName", "SEARCHNAME", args.element.val()),
            datatextfield: "fieldval",
            datavaluefield: "fieldval",
            minlength: 2,
            //valueprimitive: false
        });

        args.element.css("width", "90%").addClass("k-textbox").keydown(function (e) {
            setTimeout(function () {
                var inp = String.fromCharCode(e.keyCode);
                if (/[a-zA-Z0-9-_ ]/.test(inp)) {
                    var eTarget = $(e.target).data("kendoAutoComplete");
                    eTarget.dataSource = getAllRecordsForFieldValue(ServiceURL, "TableName", "SEARCHNAME", e.target.value);
                    //$(e.target).trigger("change");
                }
            });
        });
    };

 

getAllRecordsForFieldValue is my service call, and I can see that the call is taking place properly and returning the expected values, but the autocomplete doesn't display any values suggestion

[Rosen]

Hello Mohamed,

I guess that the getAllRecordsForFieldValue is doing an async AJAX call to fetch the data. Thus, it will not be possible to assign it directly as a DataSource.data of the widget as it will not return immediate result. You should either configure the DataSource for remote operations setting the transport.read.url and the rest of AJAX configuration, or use transport.read as a function and fetch the data manually (Note that you should pass the retrieved data to the success callback provided via the read function arguments) .

Also note that the widget configuration is case sensitive, thus you should verify the correct casing of the options.

Regards,

Rosen
Telerik