Unable to retain selectedRowIndex when updating the grid

Question

Hi Team,I am opening popup on recordClick and highlighting the selected row. When a user updates the selected row from the pop-up I am using "updateRow" method of grid. After updating the row, "selectedRowIndex" is being removed from the grid.How can we retain "selectedRowIndex" after updating the grid?I have attached the requirement video along with a working snippet. Regards,Cyril OvelyAttachment: syncfusionSelectedrowindexIssue_e3fb191f.zip

Joseph Christ Nithin Issack · Answer

Hi Cyril,  Greetings from Syncfusion support.  On inspecting the sample provided, we have found that
when you update a record and click the update button, you are saving the
updated record and in the `actionComplete` event you have called the
function `addRecord` when the `requestType` is `save`. By
default, when you add a new record the grid enters the edit mode and the
selection will not be persisted in the edit mode. This is the reason you are
not able to get the index of the selected record when you press the update
button.   
 Please
     share the details why you are using the `addRecord` method when you update
     a record.
 Also
     please share the reason you want to get the selected record index after
     updating the record.
Please get back to us for further details.Regards,Joseph I.

Cyril Ovely · Answer

Hi Joseph,Thanks for your response. Please share the details why you are using the `addRecord` method when you update a record.- Using this to show empty row at the bottomAlso please share the reason you want to get the selected record index after updating the record.- User can update by clicking on row (single click), which will open the side-bar and fill sidebar inputs with rowdata. So, I want to show user which row was updated after clicking the "Update" button in sidebar.PS: User can update row in two ways 1. right from the grid by double clicking on row. 2. By single click, which will open sidebar with update button.Regards,Cyril Ovely

Joseph Christ Nithin Issack · Answer

Hi Cyril,   Thanks for your
update.    Currently we are
validating the query, we will provide further details on or before 26th
October, 2022. We appreciate your patience until then.Regards,Joseph I.

Joseph Christ Nithin Issack · Answer

Hi Cyril,Thanks for your
patience.By default you can
perform either update a record or add a record to the grid, hence retaining the
new empty row form in the grid when editing the row is not a valid case. If you
have defined validation rules for the columns and without giving the values to
the inputs in the form if you try to do any actions in the grid, the validation
message will be thrown and you cannot perform any actions in the grid. 
 We
     would like to know  the purpose of
     adding the empty new row at the bottom of the grid. 
 Also
     we would like to know if you want to maintain the empty row at the bottom
     even when you are editing the grid or only when you are not editing you want
     to show the empty row form?
Please provide the requested information so that we will be
able to proceed further.Regards,Joseph I.

Cyril Ovely · Answer

Hi Joseph,Thanks for your response. To let user to add item to grid from empty row at the bottomWe don't want to maintain empty row when the user is editing row. After editing/updating the row from the side-bar we must see the empty row.

If required for more info please schedule a meeting to discuss more about the requirement.

Regards,Cyril Ovely

Vinitha Balasubramanian · Answer

Hi Cyril,

Thanks for your update.Currently we
are validating the query with the shared information. We will
update further details on or before 8th Nov 2022.Until then, we
appreciate your patience.Regards,Vinitha
Balasubramanian

Cyril Ovely · Answer

Hi Vinitha Balasubramanian,Please let me know if you require more details. Awaiting for your reply.Thanks,Cyril Ovely

Vinitha Balasubramanian · Answer

Hi Cyril,We need some more
time to validate your query at our end. We will update you the further
details shortly. Until then we appreciate your patience.Regards,Vinitha Balasubramanian

Cyril Ovely · Answer

Hi Vinitha,I hope you are able to find a solution for the ticket. Please let me know if I need to modify any code.Regards,Cyril Ovely

Vinitha Balasubramanian · Answer

From your query, we understood that you want to show empty
form for all time except edit action. We achieved your requirement at initial
rendering using dataBound event of Grid component.

[App.vue]
   
  dataBound: function (args) {
        if (isLoad) {
          this.$refs.grid.addRecord();// to add an empty row at initial rendering
          isLoad = false; 
  // flag value for initial render
        }
      },

If you add new data on the form
and then update the data again, we reopen the form to show the empty form using
actionComplete event. Inside this event we use addRecord method
to show the empty form using flag value(hasUpdate), args.requestType,
args.action.

[App.vue]
   
  actionComplete:
  function (args) {
  if (args.requestType === "save" &&
  args.action === "add" && hasUpdate) { // condition to show the empty row after added new data
          this.$refs.grid.addRecord(); 
  // to add an empty row after new data update
          hasUpdate =
  false;  // flag value for new data entry
        }
  }

On perform edit you have rendered a custom dialog popup we
have achieved the similar requirement on UI, and we focused your exact
requirement to show the empty row while closing the dialog popup. To achieve
the requirement, we use addRecord method inside button function using recordDoubleClick
event of Grid.

[App.vue]
   
  recordDoubleClick:
  function (args) {
        var dlgContent = "Are
  you want to edit the selected row";
        var dlgObj = new Dialog({
          header:
  "About SYNCFUSION Succinctly Series",
          content:
  dlgContent,
          target: document.getElementById("app"),
          showCloseIcon:
  true,
          buttons: [
            {
             
  click: function (args) {
               
  this.$el.children.dialog.ej2_instances[0].destroy(); 
                this.$refs.grid.addRecord();  
  // to show the empty row after closing the dialog
  popup
             }.bind(this),
             
  buttonModel: { content: "Close", isPrimary: true },
            },
          ],
          width:
  "500px",
         
  animationSettings: { effect: "none" },
        });
       
  dlgObj.appendTo("#dialog");
      },

Kindly refer the attached video demo, sample, and
documentation for more referenceSample : https://codesandbox.io/s/vue-template-forked-tqlv6gVideo demo : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Editing_Video_Demo-904305177API : https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin         https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete         https://ej2.syncfusion.com/vue/documentation/api/grid/#recorddoubleclick         https://ej2.syncfusion.com/vue/documentation/api/grid/#databound