Adding ID of object submitted through AJAX request to my Grid

[Nse]

I'm writing an inventory system using mostly the Kendo UI Grid to process the invoicing system. When I'm creating a new invoice I need to create the invoice first, and then add the line items to the invoice and save it. I'm creating my invoice through an AJAX request and then using the create method of the DataSource to add the line items. I'm able to submit the invoice through my API and get back a response from the server with the newly created object, however how do I get the newly created object to interact with my Grid? Specifically I need the ID of the new invoice to add to the InvoiceID field of each of the line items of my Grid.

My thinking is that the best place to create the Invoice is in the saveChanges event of the Grid. Due to the asynchronous nature of JavaScript, which is somewhat new to me, how do I gt the object? Here is my code:

    $("#grid").kendoGrid({
        dataSource: {
            batch: false,
            transport: {
                create: {
                    url: ...
                    },
                    contentType: "application/json",
                    type: "POST"
                },
                parameterMap: function (data, operation) {
                    return JSON.stringify(data);
                }
            },
            schema: {
                data: "Data",
                total: "Total",
                model: {
                    id: "InvoiceID",
                    fields: {
                        InvoiceID: { editable: "false", type: "number" },
                        ClientID: { type: "number" },
                        LineItemID: { type: "number" },
                        ...
                    }
                }
            }
        },
        pageable: true,
        toolbar: ["create", "save", "cancel"],
        columns: [
            { ... },
            { command: ["edit", "destroy"], width: "300px" }],
        editable: true,
        save: function(e) {
            ...
            }
        },
        saveChanges: function (e) {
            newInvoice = CreateInvoice();

        }
    });

    });
});

function CreateInvoice() {
    invoice = {
        ClientID: $('#ClientID').text(),
        Status: 1,
        ...
    };

    $.ajax({
        url: '/api/invoice/',
        type: 'POST',
        data: JSON.stringify(invoice),
        contentType: "application/json",
    });
};

The invoice is created successfully and I need to take the ID of that object and apply it to the line items of each row in the Grid. What is the best way of doing this?

 

 

 

[Boyan Dimitrov]

Hello Nse,

By default the Kendo UI DataSource sends an request to the server as soon as "Save Changes" is clicked. It will send all newly created items to the create url and the server should return the generated id values from the data base. 

Could you please clarify what exactly functionality you are trying to achieve which is different than the default behavior of the Kendo UI DataSource when a new item is create and synced with the server? 

Regards,
Boyan Dimitrov
Telerik by Progress

 

 

[Nse]

I need to create two separate classes of objects. The parent object is the Invoice object. The child objects are the InvoiceDetails, or the line items that make up the invoice. The Grid creates the InvoiceDetails child objects correctly, but they have an InvoiceID of 0, which is the default. I am able to create the parent object through an AJAX call using jQuery, however I need to set the InvoiceID of the child objects in the Grid to the InvoiceID of the newly created Invoice object.

I'm calling the CreateInvoice() function from saveChanges and am able to get the ID of the newly created invoice and now I'm wondering how to overwrite the InvoiceID of the child objects before they're sent to the server. I'm assuming that I can alter the data in the dataSource and then send it off to be processed by the server, however I'm not sure how to do this.

[Stephen]

The way I do it is like this:

1. I do not store the ParentID on each row of the Child grid.  The fact that the Child grid is on the page with the Parent object is good enough for me to realize that all the rows belong to that parent, I don't need a copy of the ParentID on every row of the grid.

2. I have the transport.create.data set to a function that returns the ParentID, i.e.

dataSource: {
            batch: false,
            transport: {
                create: {
                    url: ...
                    },
                    contentType: "application/json",
                    type: "POST",
                    data: function () {
                        return {
                            parentID: [some variable that contains the ParentID result from CreateInvoice()]
                        }
                    }
                }

3. In the response from CreateInvoice() that contains the ParentID, store the ParentID somewhere accessible to the transport.create.data function.

4. On the server, in the method that the transport.create.url is pointing to, have a parentID parameter.

 

When the grid is submitted, kendo will prepare all the rows AND add the parentID: [your parent ID] to the posted data.  In your server method, just take the parentID parameter and use it to set the ParentID field of all your Child class objects as part of your save code.

 

[Nse]

Okay, but how do I get the ParentID to the function? I'm able to store the ParentID in a div, but I can't access it until after the saveChanges() function has finished executing. When I try to look at the div from the saveChanges() function the div is empty. 

[Stephen]

Here's the Kendo Grid batch editing example with the ParentID added to the Create post data: http://dojo.telerik.com/@Stephen/iDanI

I log some event to the browser console, so make sure to open up the dev tools.

I have mocked your CreateInvoice method to simply set the parentID variable...in real life this ID will come from the ajax call you make to save the parent object.

I then just store this returned ID somewhere, anywhere, it is up to you.

 

The transport.create.data is bound to a function that returns an object that contains the parentD: { parentID: parentID }

The transport.parameterMap(if you have one) must be updated to include the parentID.

If you do not have a parameterMap, you shouldn't need to do anything and the parentID should just be included.

 

The server method set up in transport.create.url then just needs to accept an integer parentID parameter and then you should have it along with the row data.  Then just add the parentID to each row as you save them.

 

[Stephen]

Also, don't call CreateInvoice() from saveChanges().

Have an external save method(the function attached to my button click) first call CreateInvoice and once you get the response, *then* save the grid.

You *have* to wait for the asynchronous call of CreateInvoice to complete before you can continue.