Stop Grid from Sending POST to REST Service

7 posts, 1 answers
  1. Scott
    Scott avatar
    17 posts
    Member since:
    Aug 2015

    Posted 29 Aug Link to this post

    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?

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 31 Aug Link to this post

    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
    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. Scott
    Scott avatar
    17 posts
    Member since:
    Aug 2015

    Posted 31 Aug in reply to Dimiter Topalov Link to this post

    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!

  5. Scott
    Scott avatar
    17 posts
    Member since:
    Aug 2015

    Posted 31 Aug in reply to Dimiter Topalov Link to this post

    See the example.js file inside the attached zip.
  6. Scott
    Scott avatar
    17 posts
    Member since:
    Aug 2015

    Posted 31 Aug Link to this post

    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.};

  7. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 02 Sep Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  8. Scott
    Scott avatar
    17 posts
    Member since:
    Aug 2015

    Posted 02 Sep in reply to Dimiter Topalov Link to this post

    Using dataSource.read() worked for me.

    Thank you!

Back to Top
Kendo UI is VS 2017 Ready