What is right way to do inline autoadding to grid?

[Dmitry]

Hi team!

I need to add new row with inline input to grid automatically when grid loaded. I do it in dataBound (see below).

My "pipeline" is next:

• I have page with Shopping Cart and I need to fill it by shop assistant.
• I type product code to inline input and call Update (through barcode scanner)
• pass barcode to server and check availability of such a product
• If no such product - return error otherwise save product
• after adding product to cart I need automatically show inline input for adding next product or dublicate previous etc.
• when the cart is filled I need possibility to save it

I have two problem with it:

1. When I click Save I get requare validation error (if I remove required: true new row will adding in infinity loop. If I click Cancel new row will added again in dataBound).
2. When I delete row a new one empty row is added to grid (in total - two)

see screenshot please.

 

Could you please suggest me a right way? :)

 

Just in case I've attached an screenshot and my js code

 

Thank you.

  dataBound: function () {

      setTimeout(function () {

          var grid = $("#order-grid").data("kendoGrid");

          grid.addRow();

      });

 },

 

...

                                     model: {
                                            id: "Id",
                                            fields: {
                                                Gtin: { validation: { required: true }, editable: true, type: "string" },
                                                ...
                                            }
                                        }

[Alex Hajigeorgieva]

Hello Dmitry,

Thank you for the provided code snippet.

If I understand the requirements correctly, you need to have a new row added to the Kendo UI Grid once, when it is first loaded. In addition to that, when it is saved, updated or deleted.

To achieve this functionality, I suggest the following steps:

- Get the Kendo UI Grid instance.
- Add a one-time event handler to the dataBound event with the one()  method and call the addRow() method in the handler function. This will stop the infinite loop.

grid.one("dataBound", function(){
  grid.addRow();
});

- Add an event handler to the Kendo UI Data Source sync event and just like in the previous step, call the addRow() method of the Kendo UI Grid

// DataSource configuration
sync: function(){
 grid.addRow();
}

For your convenience, please see a sample runnable demo at:

http://dojo.telerik.com/uVuzu

Should you need further assistance, please clarify any points which I may have misunderstood so I may rectify my response accordingly.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Dmitry]

Hello Alex!



Many thanks for your answer and demo!

I feel we are on the right way and very close to target.

It works almost as I needed.

In first load and deleting row everything works fine.

But when I add new row the sync function is firing before data is updated. And it seems as new empty row is shown and then immediately disappears...

Maybe I need to use some delay?

Could you advise me?

I've attached my new script.

 

Thank you.

[Dmitry]

Something went wrong and the attached file didn't loaded.

Trying again)

[Dmitry]

Hm.. Something wrong with attaching files. I've uploaded to dropbox: 

https://www.dropbox.com/s/gbbktujvlvmfv2s/new_sample.zip?dl=0

[Alex Hajigeorgieva]

Hello Dmitry,

Thank you very much for the updated example.

The reason for this behaviour is the requestEnd handler which calls the read() method for every `create` or `update` operation.

The Kendo UI Grid Data Source will be updated out of the box, there is no need to call read() manually.

Please remove the code below and let me know how you get on:

requestEnd: function(e) {
 if (e.type === "create" || e.type === "update") {
  this.read();
 }
},

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Dmitry]

Hello Alex!

 

Thank you for your answer and suggestion!

 

Regarding requestEnd - this functional is need to me, because my flow is next:

client:

- type code into input in new row

- click update

server:

- get product by code

- add product to order

client:

- update grid (in requestEnd)

- add new row with empty input

- repeat

 

If I remove functional from requestEnd I won't see actual data in grid after adding...

Have you any other ideas? :)

 

Thank you.

[Alex Hajigeorgieva]

Hi Dmitry,

You should be able to see the data added to the Kendo UI Grid immediately. However, I suppose you are referring to a scenario where two people are simultaneously adding new products. They will not be able to see each other's products until a read request is made.

So if I understand you correctly, you execute the read() in the sync event handler. The read() method returns a promise that you can chain and add a new row at this point.

sync: function(){
 this.read().then(function(){
  grid.addRow();
 })
}

Here is the updated demo where the requestEnd event handler is not necessary:

http://dojo.telerik.com/aXULa

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Dmitry]

Hello Alex!

 

Thanks for your patience.

Finally I got what I want! :)

 

Yesterday I've tried promise but it didn't work.

Today I understand why: I'm using old version jquery and kendo, they not support promises.

I've added link to new files and now it work!

 

Thank you very much and have a good weekend! :)

[Alex Hajigeorgieva]

Hi Dmitry,

This is great news and good work on configuring the most complex Kendo UI widget before the end of the trial period exactly how you wanted it.

I hope you will join the Kendo UI developers community in the future.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress