Dropdown list in modal Grid edit : value not persisting

[Scot Woodyard]

In the attached project, there is a data grid with a column who's edit mode is "EditType.DropDownEdit":

<GridColumn Field=@nameof(Training.ProgramType)

    HeaderText="Type"

    EditType="EditType.DropDownEdit"

    EditorSettings="@TrainingProgramTypeEditParams"

    Width="150">

    <EditTemplate>

        <SfDropDownList @ref="DropDownList"

            ID="ProgramType"

            Placeholder="Program Type"

            DataSource="@DropDown"

            Value="@((context as Training).ProgramType.ToString())"

            FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always"

            TValue="string"

            TItem="string">

        </SfDropDownList >

    </EditTemplate>

</GridColumn>

When I try to add or edit an item, I can open the drop down menu and select/change a new value for "ProgramType" and everything appears to be working correctly. As soon as I click on the SAVE button, the value of "Program Type" reverts back to "Training"

Attachment: Training_8b977580.zip

[Vignesh Natarajan]

Hi Scot, 

 

Thanks for contacting Syncfusion support.  

 

Query: “As soon as I click on the SAVE button, the value of "Program Type" reverts back to "Training"” 

 

We have analyzed your query and we understand that you are facing issue while editing the ENUM value in Grid using EditTemplate and Dialog editing. We would like to inform your that editor components inside the EditTemplate must be specified with two way binding support (@bind-Value) to save the values properly in Grid. Hence the reported issue occur while saving the value.  

 

Also EditorSettings property is used to customize the default edit dropdown. But you have used EditTemplate feature to render the separate DropDown component. Hence Filter and ShowClearButton needs to defined in the DropDown definition.  

 

Kindly refer the below modified code example for your reference.  

 

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

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

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.ProgramType) HeaderText="Type" EditType="EditType.DropDownEdit" Width="150"> 

            <EditTemplate> 

                <SfDropDownList ID="ProgramType" Placeholder="Program Type" DataSource="@DropDown" @bind-Value="@((context as Order).ProgramType)" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always" AllowFiltering="true" TValue="ProgramType" TItem="string"> 

                </SfDropDownList> 

            </EditTemplate> 

        </GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

     

For your convenience we have prepared which can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/168337/ze/DataGrid_Server552467878.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing#cell-edit-template  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Scot Woodyard]

That worked - thank you!

[Vignesh Natarajan]

Hi Scot,  

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 

[SZL]

Hi,

Can you help me please extend the above example with the following functions:

• Grid data coming from DTO class with SfDataManager and Adaptors.UrlAdaptor
• The grid uses custom dialog adding / editing
• The grid not loads the datasources of all dropdown columns at initial loading, only shows the text.
• When I click on Add button I would like fill the model with default values from API and process the following steps:
  • the empty add-form should be shown immediately and show a loader
  • request an API call to fill the model with default values
  • after the response arrived the loader must be hide and the controls should be use the default values
  • the form uses dataannotation validation with error tooltip
  • the dropdown's datasources needs to be loaded only after the user click on dropdown icon. All dropdowns uses UrlAdaptor.
• Similar with the edit dialog: the dropdown datasource should be loaded only when the user clicks on the dropdown icon.  All dropdowns uses UrlAdaptor.

Thank you for help!

BR, László

[Rahul Narayanasamy]

Hi SZL,

Greetings from Syncfusion.

You can create the UrlAdaptor with our SfDataManager using the below documentation. Find the below link for your reference.

https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor

https://blazor.syncfusion.com/documentation/data/adaptors

https://forumassist.syncfusion.com/163946

For performing customized dialog editing, refer to the below documentation for your reference.

https://blazor.syncfusion.com/documentation/datagrid/template-editing#dialog-template

https://blazor.syncfusion.com/documentation/datagrid/template-editing#disable-components-in-dialog-template

Normally if you render dropdown controls, it will fetch the data from your while clicking the dropdown icon. It will fetch and show the data while opening the dropdown popup.

If you want to show spinner while opening the dialog you can use ShowSpinnerAsync and HideSpinnerAsync methods of the Grid. Or you can use external spinner if you want. Refer the below API documentation for your reference

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideSpinnerAsync

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsync

https://blazor.syncfusion.com/documentation/spinner/getting-started

If you want to perform validation using DataAnnotation, then you achieve your requirement by using the below way.

https://blazor.syncfusion.com/documentation/datagrid/data-annotation

Please let us know if you have any concerns.

Regards,

Rahul