Data Source new request after filter

2 posts, 0 answers
  1. Larissa
    Larissa avatar
    19 posts
    Member since:
    Dec 2015

    Posted 09 Mar Link to this post

    I have a page with a combo box to select a type and two date pickers (start date and end date).

    The user selects a type, both dates and clicks on a load button.

    The request retrieves data from all types in this date range.

    And I'm using a filter in a data source to display on a grid only the records of the type selected by the user (relevant information of the data response).

    Code:

    $("#loadButton").kendoButton({
        click: loadGrid
    });
     
    var loaded = false;
    function loadGrid(e) {
        if (type) {
            if (loaded) {
                var grid = $("#grid").data("kendoGrid");
                grid.wrapper.empty();
                grid.destroy();
            }
     
            $("#grid").kendoGrid({
                scrollable: false,
                editable: false,
                autoBind: false,
                dataSource: dataSource,
                columns: [], // omitted
            });
     
            var typeString = kendo.toString(type);
            $("#grid").data("kendoGrid").dataSource.filter({
               logic: "or",
               filters: [
                   { field: "type", operator: "startswith", value: "-1" },
                   { field: "type", operator: "startswith", value: typeString }
               ]
            });
            loaded = true;
        } else {
           e.preventDefault();
           alert("Select a type!");
        }
    }
     
    function getData() {
            return {
                type: type,
                startDate: kendo.toString(pickerStart.value(), "yyyy-MM-dd"),
                endDate: kendo.toString(pickerEnd.value(), "yyyy-MM-dd")
            };
        }
     
    var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: url",
                    dataType: "json",
                    data: getData
                }
            },
            schema: {
                total: "total",
                data: "list"
            },
            group: { field: "date" }
        });

     

    If the user selects a different type, the data in the data source is filtered and it works fine.

    The problem is that, if the user selects a different date, a new request should be done to get the new data and then filtered by type as it already does.

    Right now, if the user selects a different type, the data is filtered, but if the user selects a different date, nothing happens.

    Can someone tell how to handle this situation?

    Am I using it wrong?

    Thanks!

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 12 Mar Link to this post

    Hello Larissa,

    Generally speaking, the datasource component will make additional request if the server filtering is enabled: As you can see the source sends updated fields to the server on filter.

    If you would like to use client filtering, then you will need to force the widget to read the new data and then to filter it.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top