Adding and Editing Complex Object List Items

[Judi Smith]

I have a Grid as follows:

<SfGrid TValue="Programs" ChildMapping="Ranks" TreeColumnIndex="2" ToolBar=@Tool>

    <SfDataManager Url="api/programs" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

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

    <GridTemplates>

        <DetailTemplate>

            @{

                var program = (context as Programs);

                <SfGrid TValue="Rank" DataSource="program.Ranks" ToolBar="@RankTool">

                    <GridEvents TValue="Rank" OnActionFailure="@ActionFalure"></GridEvents>

                    <GridColumns>

                        <GridColumn Field="RankId" IsPrimaryKey="true" Visible="false" ShowInColumnChooser="false"/>

                        <GridColumn Field="RankName"/>

                        <GridColumn Field="UsesBelts" Type="ColumnType.Boolean" DisplayAsCheckBox="true"/>

                        <GridColumn Field="RankRequiredAttendances"/>

                        <GridColumn Field="RankTestFee"/>

                        <GridColumn Field="RankTimeToTest"/>

                        <GridColumn Field="RankTimeToTestUnits"/>

                        <GridColumn Field="RankTestDuration"/>

                    </GridColumns>

                </SfGrid>

                }

        </DetailTemplate>

    </GridTemplates>

    <GridColumns>

        <GridColumn Type="ColumnType.CheckBox" Width="50"/>

        <GridColumn Field="Id" IsPrimaryKey="true" Visible="false" ShowInColumnChooser="false"/>

        <GridColumn Field="ProgramName"/>

        <GridColumn Field="ProgramDescription"/>

        <GridColumn Field="UsesRanks" Type="ColumnType.Boolean" DisplayAsCheckBox="true"/>

        <GridColumn HeaderText="Edit">

            <GridCommandColumns>

                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"/>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>

As you can see, my data is structured so that Ranks are a child list of Program. Ranks are accessed via Program.Ranks. I would like to Edit and Add ranks to programs from this grid. I have created a custom form using an SfDialog that is hidden. However, I cannot see how to show the form based on the edit button in the toolbar or the Command Column.

I have three questions:

1) What is the best way to accomplish editing and adding child-list items when using the SfGrid?

2) What is the way to show a custom form from one of the edit or add buttons in the grid?

3) Is the way that I am trying to populate the data in the detail grid the right/best way - in this case?

Kind regards,

Judi Smith

[Rahul Narayanasamy]

Hi Judi, 

Greetings from Syncfusion. 

Query: I would like to Edit and Add ranks to programs from this grid. I have created a custom form using an SfDialog that is hidden. However, I cannot see how to show the form based on the edit button in the toolbar or the Command Column. 

&& 

Query: What is the way to show a custom form from one of the edit or add buttons in the grid? 

We have validated your query with the provided information. You have showed the complex data(in your case - program.Ranks) in detail Grid and you want to show edit form in SfDialog(which is  initially hidden) while editing the parent Grid using command column.  

You can show the edit dialog(which is in hidden state) while editing by using CommandClicked event(if you are using Command buttons) and OnToolbar Click event(if you are using tool items to edit). Find the below code snippets for your reference. 

 

<SfGrid DataSource="@Employees" Height="315px" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

    <GridEvents CommandClicked="OnCommandClicked" OnToolbarClick="ToolbarClickHandler" TValue="EmployeeData"></GridEvents> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridTemplates> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

                <SfGrid DataSource="@Orders" Query="@(new Query().Where("EmployeeID", "equal", employee.EmployeeID))"> 

                    . . . 

                </SfGrid> 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Emp ID" IsPrimaryKey="true" Width="110"> </GridColumn> 

        . . . 

        <GridColumn HeaderText="Manage Records" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

 

    . . . 

    public void OnCommandClicked(CommandClickEventArgs<EmployeeData> args) 

    { 

        if (args.CommandColumn.Type == CommandButtonType.Edit) 

        { 

             //show your edit dialog here while clicking command buttons to perform edit operation 

        } 

    } 

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) 

    { 

                     //show your edit dialog here while clicking toolbar to perform edit operation 

    } 

} 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/events/#commandclicked  

https://blazor.syncfusion.com/documentation/datagrid/events/#ontoolbarclick  

Query: What is the best way to accomplish editing and adding child-list items when using the SfGrid? 

We have validated your query and we suspect that you want to perform editing operation with complex data(program.Ranks). By default, the editing operation working fine with complex data. You can directly bind the complex data in Grid by using dot operator in the column.field and perform the editing operation by defining the edit settings in Grid. 

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

    <GridColumns> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="EmployeeID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field="Name.FirstName" HeaderText="First Name" Width="150"></GridColumn> 

        <GridColumn Field="Name.LastName" HeaderText="Last Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/columns/#complex-data-binding  

But if you want to show the complex data(program.Ranks) separately in detail Grid(as like your requirement), then you can also achieve this requirement in the mentioned way like yours. 

Please let us know if you have any concerns. 

Regards, 

Rahul