1. Home
  2. Forum
  3. Vue
  4. Issue in updating data grid with custom-templates

Issue in updating data grid with custom-templates

Hi Team,

I am working on an requirement where grid loads with empty row at bottom initially. When user enters data through the empty row and saves it, again a new empty row is added at the bottom.

When user tries to edit a row, on-click of row a new empty row(view mode) is getting added to the grid. As, I am using grid.addRecord() function in actionBegin(). How to restrict this on editing?

which event is appropriate to achieve my requirement actionBegin() or actionComplete() ?

Requirement: When user updates row on edit, empty row at bottom should be enabled back to edit mode without adding new row again.

(For you information, I have added rowUpdatedData  variable to pass custom-template data and update calculations along with storing other data of the row. So, we need to assign row data to rowUpdatedData  on edit and access it while saving to update calculations accordingly.)

I have added working sample with my requirement. Please let me know how to achieve this.

Regards,
Sandeep G


Attachment: IssueWithInlineEdit_e82a2a12.zip


8 Replies
RS Rajapandiyan Settu Syncfusion Team November 18, 2021 01:46 PM UTC

Hi Sandeep, 
 
Thanks for contacting Syncfusion support. 
 
In your sample, you are adding a new row in the save action of newly added row. So, it will became infinite loops. If you try to edit a another row (previously added rows), the save action will be triggered and in that event you are executing the addRecord method. So, it again renders the new row and becomes loop. 
 
We suggest you to avoid this since we are unable to edit other rows on that time. 
 
You can achieve your requirement by using Batch edit of Grid. In which the new row will automatically added if you press Tab Key on last cell. Find the below sample for your reference. 
 
 
 
 
Screenshot #1: Add a row and edit the last cell. 
 
 
Screenshot #2: Pressing Tab Key on last cell add a new row in Grid 
 
 
Let us know if you have any concerns. 
 
Regards, 
Rajapandiyan S 


SG Sandeep G November 19, 2021 07:04 AM UTC

Hi  Rajapandiyan,

Thanks for your prompt reply. Our requirement is to achieve this using normal edit with out using toolbar or batch edit. How can we achieve it with my existing setup?

Above given sample is not working.


Regards,
Sandeep G


RS Rajapandiyan Settu Syncfusion Team November 22, 2021 01:16 PM UTC

Hi Sandeep, 
 
Thanks for your update. 
 
By analyzing your query, we understood that you want to achieve your requirement in Inline Edit without using Toolbar of the Grid. We need a clear information from your end to proceed further. 
 
  1. How could you achieve Save action in the Grid? Are you using any external button to perform save action?
  2. How could you edit the previously added row? Are you wish edit the row by double click or external button click or any other way?
  3. By default, when you click another row, the edited row will be saved (if all the validation returns true). Are you want to prevent this action?
  4. Demonstrate your requirement in video demo.
 
Note: 
If you want to edit a row when the grid in add mode, you need to cancel the add action first and then perform the edit action. By using closeEdit method you can cancel the edit state.  
 
 
Once the edit action done, the actionComplete event will be triggered. In that event you can execute addRecord method to add a new row. 
 
Regards, 
Rajapandiyan S 


SG Sandeep G November 23, 2021 05:48 AM UTC

Hi Rajapandiyan,

Thanks for your reply. I have mentioned our requirement below. Please help in achieving it with working sample attached by me.

  1. I don't want to use external button to save, on enter if all validations returns true I want to save row and move cursor to new row with empty columns
  2. To edit previously edited row double-click on row has to change to edit-mode by focusing cursor on first editable column
  3. We want to go with default save action - on click of another row the edited row should be saved
  4. Added video attachment below
Thanks & Regards,
Sandeep G

Attachment: grideditrequirementvideo_e5dbe339.zip

RS Rajapandiyan Settu Syncfusion Team November 24, 2021 02:42 PM UTC

Hi Sandeep, 
 
Thanks for sharing the details. 
 
Currently, we are checking the feasibility to achieve your requirement. So, we will update the further details on Nov 26th 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Rajapandiyan S 


RS Rajapandiyan Settu Syncfusion Team November 26, 2021 11:32 AM UTC

Hi Sandeep, 
 
Thanks for your patience. 
 
Based on your requirement, you want to add a record when you save the newly added record in the Grid and need to restrict this action (addRecord operation) when clicking another row or trying to edit another rows. We have achieved this requirement using Enter Key functionality. Whenever you press the Enter key, it adds a new or edits the last row in the Grid. 
 
When you press the Enter key button, the keyPressed event will be triggered. In that event, we make the flag variable as true if the pressed key value is ‘Enter’. Based on that flag variable, you can add a new row or edit a last row. Find the below code example and sample for your reference. 
 
 
 
 
[App.vue] 
 
<template> 
  <div id="app"> 
    <ejs-grid 
      ---- 
      :actionComplete="actionComplete" 
      :keyPressed="keyPressed" 
    > 
      ---- 
    </ejs-grid> 
  </div> 
</template> 
 
<script> 
--- 
 
export default { 
  name: "App", 
  data() { 
    return { 
      --- 
      isEnterKeyPressed: false 
    }; 
  }, 
  methods: { 
    keyPressed(args){ 
      if(args.key === 'Enter'){ 
        // make the flag variable as true if the pressed key is ‘Enter’ 
        this.isEnterKeyPressed = true; 
      } 
    }, 
    actionComplete(args) { 
       if (args.requestType === "save") { 
         var grid = this.$refs.SO_lineItem_Grid.$el.ej2_instances[0]; 
         this.dataGrid = this.$refs.SO_lineItem_Grid.ej2Instances.dataSource; 
      if (args.action === "add" && this.isEnterKeyPressed) { 
        this.isEnterKeyPressed = false; 
        // Add a new record if we press Enter key on new row 
         setTimeout(() => { 
           grid.addRecord(); 
         }, 200); 
       }else if(this.isEnterKeyPressed){ 
         this.isEnterKeyPressed = false; 
         // Add a new record if we press Enter key on previously edited row 
         // grid.addRecord(); 
        // Edit a last record if we press Enter key on previously edited row 
         if(args.rowIndex != grid.getCurrentViewRecords().length-1){ 
           // select last row 
           grid.selectRow(grid.getCurrentViewRecords().length-1); 
           // edit a record 
           grid.startEdit(); 
         } 
       } 
       } 
    }, 
}; 
</script> 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rajapandiyan S 


SG Sandeep G December 2, 2021 05:34 AM UTC

Hi Rajpandiyan,


Thank for the update.

In the provided example, we can only edit added record by pressing "esc" ​on new row and empty row is not seen in grid. This will confuse user on how to add new row.

So my requirement here is to show empty row disabled(non-editable mode) when we are editing previously added row and toggle it back to editable mode with cursor on first row after editing is completed.


Please help me achieve this.


Regards,
Sandeep G


RS Rajapandiyan Settu Syncfusion Team December 3, 2021 12:07 PM UTC

Hi Sandeep,  
  
Thanks for your update. 
 
We have created a new incident under your account for the reported query. We suggest you follow up with that incident for further updates. 

Regards,  
Rajapandiyan S  


Loader.
Up arrow icon