Context in Template and EditTemplate differs? Can't retrieve related data.

[Michael Auerswald]

I have a grid populated with Person objects, each of which has several many-to-many relations to other objects. I am reading this related data in the Template and it works. I am trying the exact same in the EditTemplate - and it does not. In particular, I can get the "item.Roles.Count" and it is correct. But everything after that is null. (so the actual related Role item).

The relation is Person.Roles (List) > PersonToRoles.Person // PersonToRoles.Role < Role

Again this works fine in the Template.

Version is 17.4.0.42

<EjsGrid DataSource="@Persons" ModelType="@Model" @ref="Grid" AllowPaging="true" Toolbar=@ToolbarItems AllowPdfExport="true" AllowExcelExport="true">

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Person"></GridEvents>

    <GridPageSettings PageSizes="@PageSizes"></GridPageSettings>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Person.Id) HeaderText="Person Id" IsPrimaryKey="true" TextAlign="TextAlign.Left" Width="50"></GridColumn>

        <GridColumn Field=@nameof(Person.Roles) HeaderText="Roles" TextAlign="TextAlign.Left">

            <Template>

                @{

                    var item = (context as Person);

                    var output = "";

                    if (item.Roles != null) {

                        for (int i = 0; i < item.Roles.Count; i++)

                        {

                            if (item.Roles[i].Role != null) {

                                output += item.Roles[i].Role.Name;

                                if(i < item.Roles.Count-1) output+=", ";

                            }

                        }

                        @output

                    }

                }

            </Template>

            <EditTemplate>

                @{

                    var item = (context as Person);

                    MultiValRoles = new string[]{};

                    string output = "";

                    if (item.Roles != null) {

                        for (int i = 0; i < item.Roles.Count; i++)

                        {

                            if (item.Roles[i].Role != null) {

                                output += item.Roles[i].Role.Name;

                                if(i < item.Roles.Count-1) output+=", ";

                                MultiValRoles.Append(item.Roles[i].Role.Name);

                            }

                        }

                        logger.LogInformation(output);

                    }

                    <EjsMultiSelect TValue="string[]" @bind-Value="@MultiValRoles" Placeholder="Roles" DataSource="@RoleList">

                        <MultiSelectFieldSettings Text="Name" Value="Name"></MultiSelectFieldSettings>

                    </EjsMultiSelect>

                }

            </EditTemplate> 

        </GridColumn>

    </GridColumns>

</EjsGrid>

[Vignesh Natarajan]

Hi Michael, 

 

Greetings from Syncfusion support  

 

Query: “I am trying the exact same in the EditTemplate - and it does not” 

 

From your query we understand that you want to display the value in Grid Column which has many to many relations. You have achieved this requirement using Column Template feature. But facing issue while trying to access the context inside EditTemplate. We have analyzed the your code example and found that you have used Append method to insert a string to String[] type. Hence the reported issue occur.   

 

But we are able to access the value inside the EditTemplate context also. We have prepared a sample as per your requirement (with many to many relation and MultiSelect control). We have considered the Name property inside Roles was a string type. Using OnActionBegin event we have saved the changes into the Grid data when RequestType is Save. Kindly refer the below code example.  

 

<EjsGrid DataSource="@Employees" Height="315"> 

    <GridEvents OnActionBegin="OnBegin" TValue="Person"></GridEvents> 

.. . . .. . . . . . . 

        <GridColumn Field=@nameof(Person.Roles) HeaderText="Roles" Width="200" TextAlign="TextAlign.Left"> 

            <Template> 

                @{ 

                    var item = (context as Person); 

.  . .. . . . . .  

                        } 

                        @output 

                    } 

                } 

            </Template> 

            <EditTemplate> 

                @{ 

                    var item = (context as Person); 

                    string output = ""; 

                    if (item.Roles != null) 

                    { 

                        for (int i = 0; i < item.Roles.Count; i++) 

                        { 

                            if (item.Roles[i].Childrens != null) 

                            { 

                                output += item.Roles[i].Childrens.Child; 

                                if (i < item.Roles.Count - 1) output += ", "; 

                            } 

                        }                        

                    }                     

                    <EjsMultiSelect @ref="MultiSelect" TValue="string[]" Value="@output.Split(",")" Placeholder="Roles" DataSource="@RoleList"> 

                        <MultiSelectFieldSettings Text="Child" Value="Child"></MultiSelectFieldSettings> 

                    </EjsMultiSelect> 

                } 

            </EditTemplate> 

. . . . . . . . .. . . ..  

</EjsGrid> 

 

@code{ 

    public List<Person> Employees { get; set; } 

    EjsMultiSelect<string[]> MultiSelect { get; set; } 

    public List<EmployeeName> Emp { get; set; } 

    public List<Name> RoleList { get; set; } 

    public void OnBegin(ActionEventArgs<Person> Args) 

    { 

        if(Args.RequestType == Syncfusion.EJ2.Blazor.Grids.Action.Save) 

        { 

               Update the values in datasource  

            Args.Data.Roles[0].Childrens.Child = String.Join(",",MultiSelect.Value); 

        } 

    } 

 

For your reference we have prepared a sample which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/150874/ze/BlazorApp1-1243238072  

 

Note: above sample is just a example to display, edit and save the changes in Grid data which has many to many relation properties. But it (sample) has some limitations like different updated value etc. We have provided the sample considered the Name property is of string type. If you are using different type, kindly get back to us with more details about your model class and datasource.   

 

 

Regards, 

Vignesh Natarajan. 

[Michael Auerswald]

Hi Vignesh,

thanks for your response. It was't exactly what I was looking for but it did put in me in the right direction in the end, so thanks :)

Michael

[Vignesh Natarajan]

Hi Michael,  

 

Thanks for the update.  

 

We are glad to hear that you are able to achieve your requirement.  

 

Kindly get back to us if you have any other queries.  

 

Regards, 

Vignesh Natarajan.