[Solved] Stop Grid from Sending POST to REST Service

[Scott]

When I programmatically change a grid it sends a POST with JSON for every field currently on the screen to the root of my REST web service.

This grid is not editable and there's no reason for it to ever send POST, PUT, PATCH, etc.  There's nothing to insert or update.

How do I disable this feature?

[Dimiter Topalov]

Hello Scott,

Can you please describe the scenario in further details, e.g. what changes are you applying programmatically, and how exactly, what is the Grid configuration, etc.

Ideally, please send us an isolated runnable project, similar to the ones in our online demos (you can use the Kendo UI Dojo), where the described behavior can be observed, so we can inspect it further:

http://demos.telerik.com/kendo-ui/grid/index

Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[Scott]

See the example.js file inside the attached zip.

When applicationGridSource.sync() is called on line 161 a POST is sent to the root of the REST server that the grid is reading from.

For example, if the grid's read URL is http://localhost/odata/vwApplication (line 24) then a POST is sent containing the JSON representation of what's currently in the grid to http://localhost/ when I call sync() (line 161).

I'm guessing there's a flag I can set to inform the grid that I don't need to POST the current contents of the grid when it syncs so it will stop sending the POST requests, but I couldn't find it myself.

I'm calling sync() because I want the grid to refresh when a new financial period has been chosen.  If there's a more appropriate method to call that will refresh the grid but doesn't involve sending that POST that may solve my issue too.

Thanks for your help!

[Scott]

See the example.js file inside the attached zip.

[Scott]

It doesn't seem to be attaching the zip so I'll paste the code here.  I didn't notice the "Format Code Block" button before.

 

001./**
002. * Load Applications Grid
003. *
004. * Load a Kendo UI grid with the data for the provided FundingPeriodId
005. *
006. * @param fundingPeriodId Primary key id for the funding period of the Applications to load
007. * @return JQueryPromise for deferred waiting
008. */
009.ApplicationRestServices.loadApplicationsGrid = function (fundingPeriodId) {
010.    var isWidget = $("#SearchPanel-Application-ApplicationTab-ApplicationContent-grid").hasClass("k-widget");
011.
012.    if (!isWidget) {
013.        $.ajaxSetup({
014.            crossDomain: true,
015.            xhrFields: {
016.                withCredentials: true
017.            }
018.        });
019.
020.        applicationGridSource = new kendo.data.DataSource({
021.            type: "odata-v4",
022.            transport: {
023.                read: {
024.                    url: Const.GetAppServiceBaseURL() + "odata/vwApplication"
025.                }
026.            },
027.            serverPaging: true,
028.            serverFiltering: true,
029.            serverSorting: true,
030.            schema: {
031.                model: {
032.                    fields: {
033.                        "ApplicationId": { type: "number" },
034.                        "StudentId": { type: "number" },
035.                        "TermGPA": { type: "number" },
036.                        "BatchId": { type: "number" },
037.                        "StudentDOB": { type: "date" },
038.                        "CreatedOn": { type: "date" }
039.                    }
040.                }
041.            },
042.            pageSize: 10
043.        });
044.
045.        if (fundingPeriodId != null && Number(fundingPeriodId) > 0) {
046.            var filterItem = {
047.                field: "FundingPeriodId",
048.                operator: "eq",
049.                value: fundingPeriodId
050.            };
051.            applicationGridSource.filter(filterItem);
052.        }
053.
054.        $.ajaxSetup({
055.            crossDomain: true,
056.            xhrFields: {
057.                withCredentials: true
058.            }
059.        });
060.
061.        $("#SearchPanel-Application-ApplicationTab-ApplicationContent-grid").kendoGrid({
062.            dataSource: applicationGridSource,
063.            filterable: true,
064.            sortable: true,
065.            pageable: {
066.                pageSize: 10,
067.                refresh: true
068.            },
069.            selectable: "row",
070.            columns: [
071.                {
072.                    field: "ApplicationId",
073.                    title: "App Id",
074.                    filterable: true,
075.                    width: 100
076.                },
077.                {
078.                    field: "StudentFullName",
079.                    title: "Student",
080.                    filterable: true
081.                },
082.                {
083.                    field: "StudentDOB",
084.                    title: "DOB",
085.                    filterable: true,
086.                    template: "#= kendo.toString(kendo.parseDate(StudentDOB, 'yyyy-MM-ddTHH:mm:ss.fffZ'), 'MM/dd/yyyy') #",
087.                    width: 100
088.                },
089.                {
090.                    field: "ApplicationStatus",
091.                    title: "Application Status",
092.                    filterable: true,
093.                    width: 150
094.                },
095.                {
096.                    field: "ApplicationStatusReason",
097.                    title: "Status Reason",
098.                    filterable: true,
099.                    width: 150
100.                },
101.                {
102.                    field: "MembershipStatus",
103.                    title: "Membership",
104.                    filterable: true,
105.                    width: 120
106.                },
107.                {
108.                    field: "CreatedOn",
109.                    title: "Application Date",
110.                    filterable: true,
111.                    template: "#= kendo.toString(kendo.parseDate(CreatedOn, 'yyyy-MM-ddTHH:mm:ss.fffZ'), 'MM/dd/yyyy HH:mm') #",
112.                    width: 150
113.                },
114.                {
115.                    field: "AssignedCoordinatorFullName",
116.                    title: "Assigned Coordinator",
117.                    filterable: true
118.                },
119.                {
120.                    field: "FundingPeriodDisplayValue",
121.                    title: "Funding Period",
122.                    filterable: true
123.                },
124.                {
125.                    field: "BatchId",
126.                    title: "Batch Id",
127.                    filterable: true
128.                }
129.            ],
130.            navigatable: true,
131.            navigate: function (args) { },
132.            change: function (args) {
133.                var selectedRow = this.select();
134.                if (selectedRow != null && selectedRow[0] != null) {
135.                    var appId = this.dataItem(selectedRow[0]).ApplicationId;
136.                    ApplicationRestServices._applicationLoad(appId);
137.                }
138.            }
139.        });
140.
141.    } else {
142.
143.        if (fundingPeriodId != null && Number(fundingPeriodId) > 0) {
144.            var filterItem = {
145.                field: "FundingPeriodId",
146.                operator: "eq",
147.                value: fundingPeriodId
148.            };
149.            applicationGridSource.filter(filterItem);
150.        } else {
151.            var filterItem = {
152.                field: "FundingPeriodId",
153.                operator: "gt",
154.                value: 0
155.            };
156.            applicationGridSource.filter(filterItem);
157.        }
158.
159.    }
160.
161.    return applicationGridSource.sync();
162.};

[Dimiter Topalov]

Hello Scott,

The dataSource.sync() method saves any data item changes, and is therefore posting the data items to the server. In the discussed scenario dataSource.read() or dataSource.fetch() should be used instead.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Scott]

Using dataSource.read() worked for me.

Thank you!