We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Unable to retain selectedRowIndex when updating the grid

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 Ovely


Attachment: syncfusionSelectedrowindexIssue_e3fb191f.zip

10 Replies

JC Joseph Christ Nithin Issack Syncfusion Team October 17, 2022 12:22 PM

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.



CO Cyril Ovely October 23, 2022 03:28 AM

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 bottom
  • Also 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



JC Joseph Christ Nithin Issack Syncfusion Team October 24, 2022 01:38 PM

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.



JC Joseph Christ Nithin Issack Syncfusion Team October 27, 2022 08:23 PM

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.



CO Cyril Ovely November 2, 2022 05:22 AM

Hi Joseph,

Thanks for your response. 

  • To let user to add item to grid from empty row at the bottom
  • We 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


VB Vinitha Balasubramanian Syncfusion Team November 3, 2022 01:19 PM

Hi Cyril,

Thanks for your update.


Currently we are validating the query with the shared informationWe will update further details on or before 8th Nov 2022.


Until then, we appreciate your patience.


Regards,

Vinitha Balasubramanian



CO Cyril Ovely November 9, 2022 01:15 AM

Hi Vinitha Balasubramanian,

Please let me know if you require more details. Awaiting for your reply.

Thanks,
Cyril Ovely



VB Vinitha Balasubramanian Syncfusion Team November 10, 2022 12:39 PM

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



CO Cyril Ovely November 15, 2022 06:28 AM

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



VB Vinitha Balasubramanian Syncfusion Team November 24, 2022 10:00 AM

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 reference


Sample : https://codesandbox.io/s/vue-template-forked-tqlv6g


Video demo : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Editing_Video_Demo-904305177


API : 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


Loader.
Live Chat Icon For mobile
Up arrow icon