jqxGrid edit multiple cells of row with 'programmatic' editmode

[girish128Participant]

I have angular nested jqxGrid with edit button in first column of grid. on edit button I am calling beginrowedit. so that makes grid row editable (which has jqxdropdowns as well). The issue I am facing is when I enter in edit mode by clicking my Edit button and then if I click anywhere outside the nestedgrid or parentgrid only few cells will reset to original state and last cell (with jqxDropDown) becomes disabled. first column value gets changed to “1” always even it was not edited.

I tried begincelledit but it won’t allow me to put multiple cells into edit mode at one time.

Any suggestions or help is greatly appreciated.

You can see the demo here:
https://stackblitz.com/edit/github-dzj3fx-qaci6m?file=src%2Fapp%2Fapp.component.ts

[adminKeymaster]

Hi girish123,

You can check the built-in command column – https://www.jqwidgets.com/angular/angular-grid/angular-grid-commandcolumn.htm?light. It edits a full row and this functionality is part of the data grid.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[girish128Participant]

Thanks Peter for replying. I tried this before posting but I believe this is available in latest version.
I have further query, can I customize the command column ? like we are showing icons for edit, cancel and delete in first column of the grid in our existing implementation (which is in different UI library and we’re migrating those to jqxGrid). Would it be possible to do that using commandcolumnrenderer ? like I would show edit and delete icons in first column initially and when user clicks on edit, we will hide the edit & delete icon and show the save and cancel buttons while editing the row.

Meanwhile, I will upgrade the version and check from my end as well.

[adminKeymaster]

Hi girish128,

You can also consider the https://www.htmlelements.com/demos/grid/editing-command-column/ if you start a new project and need more customization options for the command column.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[lara333Participant]

It sounds like there may be an issue with the way the edit mode is being managed in Angular, particularly with the jqxDropDown. You can try the following steps to fix this issue:

1.Ensure that you’re using endrowedit() properly after clicking outside the grid. This ensures the row is saved correctly before deactivating the editing state.

2.If begincelledit isn’t working for multiple cells, try using beginedit for specific cell types (e.g., dropdowns) instead of applying it to the whole row.

3.To fix the “1” issue in the first column, ensure that the value in the cell is correctly initialized and not overwritten when entering edit mode.

4.If you’re using nested grids, check that the state reset (e.g., resetcellvalue) is applied properly across both parent and child grids.

It may also help to debug by logging values before and after entering edit mode to pinpoint exactly when the cell value changes unexpectedly.

If you’re looking for Angular jobs, this kind of troubleshooting and expertise with frameworks like jqxGrid would be highly valued by employers looking for skilled Angular developers.

[Author]

Posts