Adding multiple new rows without "Add new row" button

Hi,

Please help!

I am trying to add a new row to igGrid table. I have a button “Add” when I click on it I want to add a new blank row where I can enter values.

When I am trying to do something like this:

jQuery(“#securityOnlyModel”).igGridUpdating(“option”, “enableAddRow”, true);

jQuery(“#securityonlyModel”).igGridUpdating(“startAddRowEdit”);

It is adding a new row with “Add new row” button which I don’t want. I want to add a row directly into edit mode.

Also I want to add multiple rows at the same time. So if I click on “Add” multiple times I want to add multiple rows and then I can enter values at the same time.

One more thing, right now all the rows are read only so that I can not change their values but in the case of new row I should be able to enter values in it.

Thanks,

Mohan

Hello Mohan,

After startAddRowEdit, the endEdit function can be called in order to save the new row to the igGrid as a record. Afterwards start edit mode for the newly added row, by calling the method startEdit.

What I would suggest for the readOnly rows – when the grid is rendered add, for example, a “readOnly” class to every row in the grid. On editRowStarting event check if the row for editing has this class and if it does cancel the event.

Only one row at a time can be in edit mode. Multiple rows cannot be edited at the same time.

I have attached a sample in reference to your issue. I have customized it to make a newly added row readOnly after all of its fields are filled. Please test it and let me know how it went.

Regards,Ivaylo HubenovEntry-level developer

Attachments:

1. Sample.zip

Hi Ivaylo,

Thank you for your quick response. I can not make all rows read only. In my table their are some columns which are editable. I am attaching a code sample of mine for your reference.

And also the first column of my table is a “delete” button, I am not sure how I will add this button in the first column for new rows.

Thanks,

Mohan

Attachments:

1. code-sample.txt

Hello Mohan,

The input, inside of a column’s cell can be made readOnly. What I suggest is to check on editRowStarted if a row is newly added or not and set the input readOnly or editable. You can access a cell of a certain column by specifying the “aria-describedby” attribute in the query. This attribute’s value is formed by the grid’s id, followed by an underscore and column key.

The delete button in your code is in a column template, so it should be visible on the manually added rows.

I have modified my sample to make only certain columns not editable. For newly added rows those columns are readOnly after they have been filled.

Please test my sample and let me know how it went.

Regards,Ivaylo HubenovEntry-level developer

Attachments:

1. Sample-2.zip

Hi Ivaylo,

Please have a look at my code. First thing I want is to add new rows at the top of my table. Right now when I add a new row it is getting added at the bottom of the table. Also when I click on Add I am adding a new row with some defaults values but then again I click on Add, the last added row is getting added at the bottom but without default values. I don’t know why “editRowEnding” or “editRowEnded” are not getting called at all. It is also possible that I don’t enter the primary key field. “Done/Cancel” button is false in all the cases.

I want to add multiple rows and then when I click on save I am calling createStandardModelDTO. Please have a look at it and let me know if this is the right way to collect values from newly added row and old rows.

When I edit the row I want to push some properties to the datasource array which I can use in my rowtemplate.

Also please have a look at how I am setting read only properties in Updating feature.

Thanks,

Mohan

Attachments:

1. Sample-code-1.zip

Hello Mohan,

I cannot open the file you have attached. Can you please attach it once again but as a .zip archive?

Regards,
Ivaylo Hubenov
Entry-level developer

Hi Ivaylo,

Sorry about that. Please find the attached .zip archive.

Thanks,

Mohan

Attachments:

1. Sample-code.zip

Hello Mohan,

There is no option in the igGrid that renders new rows on the top of the table.

To call editRowEnding and editRowEnded events when endEdit is called there has to be a second parameter to the function, which is true. The endEdit method accepts two parameters – the first one specifies if the edit process should accept the current changes or not and the second, whether or not updating events should be raised.

It is the igGrid’s regular behavior when the showDoneCancelButtons option is set to false there to be no done/cancel buttons in the grid.

The method you are using to get rows’ values is good.

By setting a column readOnly from the columnSettings those cells will not be editable in the new rows, therefore you cannot enter values in them.

Please feel free to contact me if you have further questions.

Regards,Ivaylo HubenovEntry-level developer

Attachments:

1. Sample-1.zip