Custom Filter on Large Data

3 posts, 0 answers
  1. Mohamed
    Mohamed avatar
    15 posts
    Member since:
    May 2015

    Posted 29 Feb 2016 Link to this post

    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,

     

  2. Mohamed
    Mohamed avatar
    15 posts
    Member since:
    May 2015

    Posted 29 Feb 2016 in reply to Mohamed Link to this post

    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

  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 03 Mar 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top