Add new row to grid dynamically

9 posts, 0 answers
  1. Binu
    Binu avatar
    19 posts
    Member since:
    Jul 2019

    Posted 04 Dec 2019 Link to this post

    Hi All

             I want to add new row to grid using react. How its possible?

  2. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Dec 2019 Link to this post

    Hello, Binu,

    A new row can be added by adding a new item in the array bound to the Grid.

    Please check the following demo, where we dynamically add more rows to the Grid on a button click.

    The rows can be added on any custom event.

    https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 04 Mar 2020 Link to this post

    I'm stuggling with my own ignorance... so please pardon me

    But I can't get it right to add a row to an empty array (lets say the first time..)

    This is my addRecord function ( after the 250th attempt to set state...  :-(   )

    addRecord = () => {
    let tsks = JSON.parse(JSON.stringify(this.state.tasks));
    console.log('tsks=',tsks)
    if (this.state.dropdownlistPLine === null || this.state.dropdownlistFinProd === null || this.state.dropdownlistSSchema === null) {
    this.toggleDialog()
    } else {
    const newRecord = {
    rowid: tsks.length+1,
    ProdLine: this.state.dropdownlistPLine,
    FinalProduct: this.state.dropdownlistFinProd,
    sschema: this.state.dropdownlistSSchema,
    StockonHand: 0,
    StockonOrder: 0,
    StockFree: 0,
    TotKg: 0,
    Weight: 0,
    totpipes: 0,
    actid: 0
    };
    console.log('New tasks', newRecord);
    if (tsks.length > 0) {
    this.setState({
    tasks: [newRecord, ...tsks],
    editID: newRecord.rowid
    });
    } else {
    console.log('Adding first tasks', newRecord);
    tsks.push(newRecord);
    console.log('tsks = ', tsks);
    this.setState({
    tasks: this.state.tasks.concat(newRecord),
    editID: newRecord.rowid
    });
    }
    }
    console.log('New tasks', this.state.tasks)
    };

     

    No matter what I tried to do, it just won't set the state... here's the console.log

    tsks= []
    New tasks {rowid: 1, ProdLine: "Mixer 1", FinalProduct: "MX-16422O", sschema: 4, StockonHand: 0, …}rowid: 1ProdLine: "Mixer 1"FinalProduct: "MX-16422O"sschema: 4StockonHand: 0StockonOrder: 0StockFree: 0TotKg: 0Weight: 0totpipes: 0actid: 0

    Adding first tasks {rowid: 1, ProdLine: "Mixer 1", FinalProduct: "MX-16422O", sschema: 4, StockonHand: 0, …}rowid: 1ProdLine: "Mixer 1"FinalProduct: "MX-16422O"sschema: 4StockonHand: 0StockonOrder: 0StockFree: 0TotKg: 0Weight: 0totpipes: 0actid: 0__proto__: Object
    tsks =  [{…}]0: rowid: 1ProdLine: "Mixer 1"FinalProduct: "MX-16422O"sschema: 4StockonHand: 0StockonOrder: 0StockFree: 0TotKg: 0Weight: 0totpipes: 0actid: 0

    New tasks []

    Any help will be appreciated

     

    Len

     

     

  4. Stefan
    Admin
    Stefan avatar
    3008 posts

    Posted 04 Mar 2020 Link to this post

    Hello, Len,

    Thank you for the code.

    I used the same code => copy and paste, add it to a Grid and the row was successfully added:

    https://stackblitz.com/edit/react-t6asdt?file=app/main.jsx

    If the issue still occurs, please modify the example to replicate the issue and I will be happy to inspect it.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 05 Mar 2020 Link to this post

    Two things I must admit in advance ..

    1) I honestly do not know how to code in JSX... I just Copy and past from examples

    2) I only want things to work and in many cases I don't know what I'm doing...

    I attach my entire component. It calls a API from the backend server to populate the relevant json objects

    To add a new record you have to choose the prodiction line, the final product and the shiftschema

    Choose any from the list

    Thank you for assistance

     

    Len

     

  6. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 05 Mar 2020 in reply to Len Link to this post

    It seems that the problem lies with webpack but I dont know what it can be..

    I created a react app (create-react-app) using PyCharm. I then copied my component there, installed all the dependencies and the app works fine.

    But in the real world I have to compile a webpack bundle andthen render it from my Django backend html.

    Now this works fine for some other components but not this one.

    It just does not sound logical

    I attach my package.json and webpack.config.js

    Any help will be appreciated

    Len

    Ps: I quote... "A miracle is an event not explicable by natural or scientific laws. The rest have logical explanations"

  7. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 05 Mar 2020 in reply to Len Link to this post

    Attached in Zip file

    Len

  8. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 06 Mar 2020 in reply to Len Link to this post

    Apologies....

    Just as I was ready to believe in miracles, I found the logical explanation

    My keys array was empty and  therefor no definition for fields of the grid...

    Len

    Ps:... With help from my friend Jack Daniels

  9. Dimo
    Admin
    Dimo avatar
    8478 posts

    Posted 06 Mar 2020 Link to this post

    Hello Len,

    I am happy to see that you have managed to get to the root of the case and resolve it! Let us know if any other questions arise.

    If only the assistance of Mr. Jack Daniels was always that consistent and predictable ... :)

    Have a great weekend!

    Best regards,
    Dimo
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top