DataSource Local Sorting

5 posts, 0 answers
  1. Salim
    Salim avatar
    29 posts
    Member since:
    Jun 2016

    Posted 23 Aug Link to this post

    As per the DataSource documentation, the event "requestStart" has the following description:

    Fired when the data source makes a remote service request.

    However, when the DataSource sorting is set to local, the event "requestStart" is still being fired causing us bugs.

    Kindly advise.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1797 posts

    Posted 24 Aug Link to this post

    Hi Salim,

    The requestStart and requestEnd events will fire with client-side operations and this is made that way by design. Unfortunately, within the requestStart event it is not possible to determine if this is the initial request (requesting the data) or if it is initiated by a data operation (sorting, filtering, etc.). However, within the requestEnd event you can check if the e.reponse is undefined, which will indicate that a client-side operation initiated the read:
    requestEnd: function(e){        
      console.log(e.response);
    }

    Could you please elaborate on your exact requirement, so we can suggest an alternative solution for it.

    I am looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Salim
    Salim avatar
    29 posts
    Member since:
    Jun 2016

    Posted 25 Aug in reply to Konstantin Dikov Link to this post

    Our case is that we have local sorting and remote paging. So when we enter requestStart, we check if the grid has unsaved changes and ask the user if he wants to save. however we don't want to do that wh the user sorts because the sorting is local. And since both requests are read requests and can't be differentiated in the requestStart method then the message will be shown for the user anyway. Using request end is not an option in this case because it would be too late.

    check out the following code

    serverSorting: false,
    requestStart: function (e) {
                    if (e.type == "read" && gridControl.IsDirty()) {
                        MessageBox.OpenSaveDialog(function (DialogResult) {
                            if (DialogResult == MessageBox.DialogResult.Yes) {
                                gridControl.Save();
                            }
                            else if (DialogResult == MessageBox.DialogResult.No) {
                                gridControl.Cancel();
                                gridControl._kDataSource.read();
                                gridControl._kendoGridControl.refresh();
                            }
                        });
                        e.preventDefault();
                    }

    }

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1797 posts

    Posted 25 Aug Link to this post

    Hi Salim,

    Since there is no built-in way for determining which command initiated the read action, you could attach event handler for the "mousedown" event for the column headers and use a global variable. For your convenience, following is a dojo example with such implementation:
    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.mobile.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    </head>
    <body>
            <div id="example">
                <div id="grid"></div>
     
                <script>
                  var sortCommand = false;
                    $(document).ready(function () {
                        var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
                            dataSource = new kendo.data.DataSource({
                                transport: {
                                    read:  {
                                        url: crudServiceBaseUrl + "/Products",
                                        dataType: "jsonp"
                                    },
                                    update: {
                                        url: crudServiceBaseUrl + "/Products/Update",
                                        dataType: "jsonp"
                                    },
                                    destroy: {
                                        url: crudServiceBaseUrl + "/Products/Destroy",
                                        dataType: "jsonp"
                                    },
                                    create: {
                                        url: crudServiceBaseUrl + "/Products/Create",
                                        dataType: "jsonp"
                                    },
                                    parameterMap: function(options, operation) {
                                        if (operation !== "read" && options.models) {
                                            return {models: kendo.stringify(options.models)};
                                        }
                                    }
                                },
                               
                                serverSorting: false,
                                serverPaging: true,
                                requestStart: function (e) {
                                  var gridControl = $("#grid").data("kendoGrid");
                                  console.log("requestStart from sortCommand: " + sortCommand )
                                  if (e.type == "read" && !sortCommand) {
                                    //debugger;
                                  }
                                },
                                batch: true,
                                pageSize: 20,
                                schema: {
                                    model: {
                                        id: "ProductID",
                                        fields: {
                                            ProductID: { editable: false, nullable: true },
                                            ProductName: { validation: { required: true } },
                                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                            Discontinued: { type: "boolean" },
                                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                        }
                                    }
                                }
                            });
     
                        $("#grid").kendoGrid({
                            dataSource: dataSource,
                            navigatable: true,
                            pageable: true,
                            height: 550,
                          dataBound: function(e){
                            //debugger;
                            sortCommand = false;
                                    e.sender.element.find("[data-role='columnsorter']").one("mousedown", function(e){
                                    sortCommand = true;
                                     console.log("sort");
                                  })
                              },
                          sortable: true,
                            toolbar: ["create", "save", "cancel"],
                            columns: [
                                "ProductName",
                                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                                { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                                { field: "Discontinued", width: 120 },
                                { command: "destroy", title: " ", width: 150 }],
                            editable: true
                        });
                         
                    });
                </script>
            </div>
     
     
    </body>
    </html>

    Hope this helps.
     

    Regards,
    Konstantin Dikov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  6. Salim
    Salim avatar
    29 posts
    Member since:
    Jun 2016

    Posted 26 Oct in reply to Konstantin Dikov Link to this post

    There is now events for filter, sort and page which solved our case
Back to Top
Kendo UI is VS 2017 Ready