EjsGrid Build-In Cancel button doesn't cancel two way data binding

Question

Hi there,

I wonder if you could help with this please?

The code below had a Template to convert and display user's Role from the RoleID. Edit Template uses a two-way binding to a custom component to allow user to select the role from a dropdown list. Everything is working perfectly, e.g. the grid row can be edited and once the Job role been selected and I can see the Job role column displayed the new role name immediately after I select a new role from the editing page as well.

However, the issue is if I click the cancel button in the "Edit" screen instead of "Save" button, my grid column still displayed the value I selected in the edit screen before I came out the Editing page. (if that makes any sense) So, I end up with the Job role name, which I mean to cancel, stuck in the Grid, and I had to refresh "F5" or go to different page and come back to refresh the page and get ride of it, e.g. re-pull the value from database.

Is there a better way to: 1) refresh grid after the cancel button clicked (like the build-in delete and add button) 2) have a OnCancel event handler, so I can call the grid refresh myself.

Many thanks

Linqing

@{

var um = (context as UserModel);

<div>

<span>@jobRoleList.FirstOrDefault(j => j.RefJobRoleID == um.DefaultJobRoleID)?.Name</span>

</div>

}

</Template>

</EditTemplate>

</GridColumn>

Vignesh Natarajan · Answer

Hi Linqing Shangguan,

Thanks for contacting forums.

Query: “The code below had a Template to convert and display user's Role from the RoleID”

From you query we understand that you are facing difficulty with EditTemplate in Grid. We have analyzed your query and you are trying to display the text (Name) corresponding to DefaultJobRoleId from another table. (i.e.) foreignKey behavior. We have in built-in support to achieve your requirement.

Using ForeignKey Column feature you can achieve your requirement. By default its EditMode for Foreignkey column is DropDownList. So there is no need for Column Template or EditTemplate to achieve your requirement.

Refer the below code example.

//Grid DataSource

public class Order

{

public int? OrderID { get; set; }

public int? DefaultJobRoleID { get; set; }

public DateTime? OrderDate { get; set; }

public double? Freight { get; set; }

}

//Column DataSource

public class EmployeeData

{

public int? RefJobRoleID { get; set; }

public string FirstName { get; set; }

}

//Column Defnition

<GridColumn Field=@nameof(Order.DefaultJobRoleID) HeaderText="Employee Name" ForeignKeyField="RefJobRoleID" ForeignKeyValue="FirstName" DataSource="@Employees" Width="150"></GridColumn>

Kindly download the sample from below

Sample: https://www.syncfusion.com/downloads/support/forum/152247/ze/BlazorApp1-1959239623

Refer our UG documentation for your reference

https://ej2.syncfusion.com/blazor/documentation/grid/columns/#foreign-key-column

if you still want to achieve your requirement using EditTemplate, then share the following details.

Share full Grid code example along with the details about the JobRoleDropDownList.
Share the video demonstration of the issue.
If possible share the issue reproducible sample.

Regards,

Vignesh Natarajan.

Linqing Shangguan · Answer

Dear Vignesh, Many thanks for your help. It's amazon! Yes, I've been able to achieve what I need with less code by following your instruction. Very happy. Kind regardsLinqing

Vignesh Natarajan · Answer

Hi Linqing, 

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution. 

Kindly get back to us if you have further queries.  

Regards, 
Vignesh Natarajan. 10