Hi All

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

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

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

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

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

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"

Attached in Zip file

Len

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

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