Get all updated and newly created models together in a single url in server side

Question

I am Using Kendo grid with batch edit. I want to get all Modified and newly created models together in a single url.

Say I have created 3 new row and also updated/edited 2 existing row in grid. Data source makes a HTTP request for every CRUD operation . The changed data items are sent by default as models and hit URL as I declared in “create” and update (transport) section of transport in datasource.I am getting models those are Modified (updated) in URL declared for ‘update’ in server side. And also find models those are newly created in URL declared for ‘create’….But I want to get all Modified and newly created models together in a single url.Is it possible to get all of the (both all modified and newly created) in a single URL?

Here is my Code for better understand.

$("#grid").kendoGrid({
        dataSource: {

            transport: {
                read: {
                    url: "LoadPerMeterCostsGridData",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json"
                },

                update: {
                    url: "UpdatePerMeterCostsData",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json"
                },
                create: {
                    url: "CreatePerMeterCostsData",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json",
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }

                }
            },

            serverPaging: false,
            pageSize: 10,
            batch: true,

            schema: {
                model: {
                    id: "PerMeterCostID",
                    fields: {
                        PerMeterCostID: { editable: false },
                        DrillBitSizeID: { editable: true },
                        Form: { editable: true },
                        To: { editable: true },
                        PerMeterCost: { editable: true },
                        ContractID: { editable: false }
                    }
                },
                errors: "Errors"
            },

            error: function (e) {
                alert(e.errors + "grid");
            }
        },
        editable: true,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        toolbar: ["create",
            "save",
            "cancel"
        ],
        sortable: true,
        autoBind: false,
        columns:
        [
            { field: "PerMeterCostID", width: 50, hidden: true, title: "ID" },
            { field: "DrillBitSizeID", width: 100, hidden: true, title: "Consumable" },
            { field: "Form", width: 100, title: " Form " },
            { field: "To", width: 50, title: "To" },
            { field: "PerMeterCost", width: 100, title: "Per Meter Cost" },
            { field: "ContractID", width: 100, hidden: true, title: "ContractID" },

           { command: ["destroy"], title: "Action", width: "175px" }


        ]
    });

    $("#grid ").data("kendoGrid").dataSource.read();

monastic-panic monastic-panic · Accepted Answer · 2014-01-24T21:15:12

You can set each CRUD action to use the same url, but using the same url: property for both Create and Update. However you will still minimally get TWO requests (albeit to the same url)

    update: {
         url: "UpdateOrCreateAction",
    },
    create: {
         url: "UpdateOrCreateAction",
    },

this is because internally the dataSource pushes all "new" items as defined by "items an Id Field set to the default value for the field" in an array, and all items with dirty set to true into a different array. Kendo then sends both arrays back to the server according to the url for the action. (something like this i'd imagine)

 if ( model.isNew()) 
     createdPile.push(model)
 else if ( model.dirty === true)
    updatedPile.push(model)

 //send both piles to the server

The "easiest" way to avoid this is to make sure your new objects explicitly set their id fields to something other then the default, and set the models dirty prob to true.

you could do this by using the edit event to override the actions

grid.bind('edit', function(e){
    if ( e.model.isNew() ) {
       e.model.id = -1; //
       e.dirty = true; 
       console.log(e.model.isNew()) // should be false
    }
})

this is probably an extreme amount of overkill to avoid one additional request, and prone to error. I would advise that you use the same url for both actions, and just accept that you will get the created items in one batch, and the updated in another.

Get all updated and newly created models together in a single url in server side

1 Answers