This is a migrated thread and some comments may be shown as answers.

DataSource Local Sorting

4 Answers 508 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Salim
Top achievements
Rank 1
Salim asked on 23 Aug 2016, 07:31 AM

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.

4 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 24 Aug 2016, 02:12 PM
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.
 
0
Salim
Top achievements
Rank 1
answered on 25 Aug 2016, 07:12 AM

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();
                }

}

0
Konstantin Dikov
Telerik team
answered on 25 Aug 2016, 10:20 AM
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.
 
0
Salim
Top achievements
Rank 1
answered on 26 Oct 2016, 09:18 AM
There is now events for filter, sort and page which solved our case
Tags
Grid
Asked by
Salim
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Salim
Top achievements
Rank 1
Share this question
or