What is right way to do inline autoadding to grid?

10 posts, 2 answers
  1. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 13 Jan 2017 Link to this post

    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" },
                                                    ...
                                                }
                                            }

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 17 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 17 Jan 2017 Link to this post

    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.

  4. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 17 Jan 2017 Link to this post

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

    Trying again)

  5. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 17 Jan 2017 Link to this post

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

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

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 18 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 18 Jan 2017 in reply to Alex Hajigeorgieva Link to this post

    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.

  8. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 20 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Dmitry
    Dmitry avatar
    6 posts
    Member since:
    Jan 2017

    Posted 20 Jan 2017 in reply to Alex Hajigeorgieva Link to this post

    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! :)

  10. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    593 posts

    Posted 23 Jan 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top