How Do I Pick the Exiting Value Saved in The Database When I click to Edit a Record

[Ssekamatte James]

Hello Syncfusion,

I am in EditMode Dialog but each time I click on an existing record in the grid to edit, the dropdown values do not come along in the for yet there is data saved.

This is occurring when I use <EditTemplate> </EditTemplate> inside a <GridColumn> in an sfgrid. I am using EditTemplate beacuse I want to use the ValueChange Method.

I have attached the full razor view with the DropDowns and the Value Change method but rather the snippet of the grid is pasted below here.

<TabItem>

                                            <ChildContent>

                                                <TabHeader Text="County"></TabHeader>

                                            </ChildContent>

                                            <ContentTemplate>

                                                @{ 

                                                    var dist = context as District;

                                                    var cou = context as ACounty;

                                                    var Reg = context as ARegion;

                                                    <SfGrid @ref="CountyGrid" TValue="ACounty" Query="@CountyQuery" GridLines="GridLine.Both"

                                                            Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser" })" AllowPaging="false" Width="auto" Height="420"

                                                             ShowColumnChooser="true" EnableAltRow="true" AllowFiltering="true" AllowTextWrap="true"

                                                            EnableHover="true" AllowSorting="true">

                                                        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>

                                                        <SfDataManager AdaptorInstance="@typeof(CountyRoutineAdapter)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

                                                       @* <GridEditSettings AllowAdding="true" AllowDeleting="false" AllowEditing="true" ShowConfirmDialog="false" Mode="EditMode.Normal" NewRowPosition="NewRowPosition.Bottom">*@

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

                                                        <HeaderTemplate Context="CountyHeader">

                                                            @{

                                                                var text = GetCountyHeader((CountyHeader as ACounty));

                                                                <span>@text</span>

                                                            }

                                                        </HeaderTemplate>

                                                    </GridEditSettings>

                                                        <GridEvents OnActionBegin="CountyActionBeginHandler" TValue="ACounty"></GridEvents>

                                                        <GridColumns>

                                                            <GridColumn Field=@nameof(ACounty.CountyCode) AllowEditing="false" Visible="true" IsPrimaryKey="true" ShowInColumnChooser="false" HeaderText="County Code" ValidationRules="@(new ValidationRules { Required = true})" Width="150"></GridColumn>

                                                              <GridColumn Field=@nameof(ACounty.RegionCode) HeaderText="Region" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(Reg.RegionId)" ForeignKeyValue="@nameof(Reg.Region)" DataSource="@regions">

                                                                <EditTemplate Context="RegionDropDown">

                                                                    <SfDropDownList ID="RegionCode"  Value="@nameof(ACounty.RegionCode)" DataSource="@regions" TItem="ARegion" TValue="string" Placeholder="Region" FloatLabelType="FloatLabelType.Always">

                                                                        <DropDownListFieldSettings Value="RegionId" Text="Region"></DropDownListFieldSettings>

                                                                        <DropDownListEvents TItem="ARegion" TValue="string" ValueChange="ChangeRegion"></DropDownListEvents>

                                                                    </SfDropDownList>

                                                                </EditTemplate>

                                                            </GridColumn>

                                                            <GridColumn Field=@nameof(ACounty.DistrictCode) HeaderText="District" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(District.DistrictCode)" ForeignKeyValue="@nameof(District.DistrictName)" DataSource="@districts">

                                                                <EditTemplate Context="DistrictDropDown">                                                                  

                                                                    <SfDropDownList ID="DistrictCode" Enabled="@EnableDistrictDropDown" Placeholder="District" Query="@DistricttQuery" TItem="District" TValue="string" DataSource="@districtsnew" FloatLabelType="FloatLabelType.Always">

                                                                        <DropDownListEvents TItem="District" TValue="string"></DropDownListEvents>

                                                                        <DropDownListFieldSettings Text="DistrictName" Value="DistrictCode"></DropDownListFieldSettings>

                                                                    </SfDropDownList>

                                                                </EditTemplate>

                                                            </GridColumn>

                                                            <GridColumn Field=@nameof(ACounty.County) HeaderText="County" AllowEditing="true" ShowInColumnChooser="true" Width="150"></GridColumn>

                                                        </GridColumns>

                                                    </SfGrid>

                                                }

                                            </ContentTemplate>

                                        </TabItem>

Thank You  

Attachment: ValueChange_7f6043e5.rar

[Vignesh Natarajan]

Hi Ssekamatte,  

 

Thanks for contacting Syncfusion support.  

 

Query: “I click on an existing record in the grid to edit, the dropdown values do not come along in the for yet there is data saved.” 

 

We have analyzed the reported query and we found that you have defined the Foreign key column wrongly in Grid defnition. We suggest you to use GridForeignColumn along with ForeignDataSource property to define the column with Foreignkey behavior. Also we suggest you to define the Value property of DropDownList component (inside EditTemplate) with two way binding support to save the changes property in Grid.  

 

Refer the below code example.  

 

<SfGrid @ref="CountyGrid" TValue="ACounty" GridLines="GridLine.Both" 

                            Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "ColumnChooser" })" AllowPaging="false" Width="auto" Height="420" 

                            ShowColumnChooser="true" EnableAltRow="true" AllowFiltering="true" AllowTextWrap="true" 

                            EnableHover="true" AllowSorting="true"> 

                        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> 

                        <SfDataManager AdaptorInstance="@typeof(CountyRoutineAdapter)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 

                        @* <GridEditSettings AllowAdding="true" AllowDeleting="false" AllowEditing="true" ShowConfirmDialog="false" Mode="EditMode.Normal" NewRowPosition="NewRowPosition.Bottom">*@ 

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

                            <HeaderTemplate Context="CountyHeader"> 

                                @{ 

                                    var text = GetCountyHeader((CountyHeader as ACounty)); 

                                    <span>@text</span> 

                                } 

                            </HeaderTemplate> 

                        </GridEditSettings> 

                        <GridEvents OnActionBegin="CountyActionBeginHandler" TValue="ACounty"></GridEvents> 

                        <GridColumns> 

                            <GridColumn Field=@nameof(ACounty.CountyCode) AllowEditing="false" Visible="true" IsPrimaryKey="true" ShowInColumnChooser="false" HeaderText="County Code" ValidationRules="@(new ValidationRules { Required = true})" Width="150"></GridColumn> 

                            <GridForeignColumn Field=@nameof(ACounty.RegionCode) HeaderText="Region" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(ARegion.RegionId)" ForeignKeyValue="@nameof(ARegion.Region)" ForeignDataSource="@regions"> 

                                <EditTemplate Context="RegionDropDown"> 

                                    <SfDropDownList ID="RegionCode" @bind-Value="@((RegionDropDown as ACounty).RegionCode)" DataSource="@regions" TItem="ARegion" TValue="string" Placeholder="Region" FloatLabelType="FloatLabelType.Always"> 

                                        <DropDownListFieldSettings Value="RegionId" Text="Region"></DropDownListFieldSettings> 

                                        <DropDownListEvents TItem="ARegion" TValue="string" ValueChange="ChangeRegion"></DropDownListEvents> 

                                    </SfDropDownList> 

                                </EditTemplate> 

                            </GridForeignColumn> 

  

                            <GridForeignColumn Field=@nameof(ACounty.DistrictCode) HeaderText="District" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(District.DistrictCode)" ForeignKeyValue="@nameof(District.DistrictName)" ForeignDataSource="@districts"> 

                                <EditTemplate Context="DistrictDropDown"> 

                                    <SfDropDownList ID="DistrictCode" Enabled="@EnableDistrictDropDown" @bind-Value="@((DistrictDropDown as ACounty).DistrictCode)" Placeholder="District" TItem="District" TValue="string" DataSource="@districts" FloatLabelType="FloatLabelType.Always"> 

                                        <DropDownListEvents TItem="District" TValue="string"></DropDownListEvents> 

                                        <DropDownListFieldSettings Text="DistrictName" Value="DistrictCode"></DropDownListFieldSettings> 

                                    </SfDropDownList> 

                                </EditTemplate> 

                            </GridForeignColumn> 

                            <GridColumn Field=@nameof(ACounty.County) HeaderText="County" AllowEditing="true" ShowInColumnChooser="true" Width="150"></GridColumn> 

                        </GridColumns> 

                    </SfGrid> 

 

Note: Value property of DropDownList is defined wrongly, hence it is not displayed in edit mode. Refer above highlighted code to display the value property in edit mode.  

 

For your convenience we have prepared a sample using above solution. Sample can be downloaded from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/161260/ze/BlazorApp1829854493  

 

Refer our UG documentation for your reference 

 

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

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

 

Kindly get back to us if you have further queries.    

 

Regards, 

Vignesh Natarajan 

[Ssekamatte James]

 <GridForeignColumn Field=@nameof(ACounty.RegionCode) HeaderText="Region" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(ARegion.RegionId)" ForeignKeyValue="@nameof(ARegion.Region)" ForeignDataSource="@regions"> 

                                <EditTemplate Context="RegionDropDown"> 

                                    <SfDropDownList ID="RegionCode" @bind-Value="@((RegionDropDown as ACounty).RegionCode)" DataSource="@regions" TItem="ARegion" TValue="string" Placeholder="Region" FloatLabelType="FloatLabelType.Always"> 

                                        <DropDownListFieldSettings Value="RegionId" Text="Region">DropDownListFieldSettings> 

                                        <DropDownListEvents TItem="ARegion" TValue="string" ValueChange="ChangeRegion">DropDownListEvents> 

                                    SfDropDownList> 

                                EditTemplate> 

                            GridForeignColumn> 

Thank You Vignesh for the reply, However, When I add the  @bind-Value="@((RegionDropDown as ACounty).RegionCode)"  in my code, it still throws an error that it "cannot convert from int? to string". This is becasue the RegionCode column is a nullable int from my database table and in the Tvalue you are passing a String.  How can I go about this ?

I have pasted a screen shot of my error below.

[Vignesh Natarajan]

Hi Ssekamatte, 

 

Thanks for the update.  

 

Query: “it still throws an error that it "cannot convert from int? to string".” 

 

We have analyzed the query and TValue of DropDownlist must be defined based on the type of Value property of DropDownListFieldSettings. You have defined TValue as string instead of int?, hence the reported issue has occurred. We suggest you to resolve the issue by changing the type of TValue for DropDownList component.  

 

Refer the below code example.  

 

<GridForeignColumn Field=@nameof(ACounty.RegionCode) HeaderText="Region" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Left" Width="150" ForeignKeyField="@nameof(ARegion.RegionId)" ForeignKeyValue="@nameof(ARegion.Region)" ForeignDataSource="@regions"> 

                               <EditTemplate Context="RegionDropDown"> 

                                   <SfDropDownList ID="RegionCode" @bind-Value="@((RegionDropDown as ACounty).RegionCode)" DataSource="@regions" TItem="ARegion" TValue="int?" Placeholder="Region" FloatLabelType="FloatLabelType.Always"> 

                                       <DropDownListFieldSettings Value="RegionId" Text="Region"></DropDownListFieldSettings> 

                                       <DropDownListEvents TItem="ARegion" TValue="string" ValueChange="ChangeRegion"></DropDownListEvents> 

                                   </SfDropDownList> 

                               </EditTemplate> 

                           </GridForeignColumn> 

  

If you are still facing the issue, kindly get back to us with details about the model classes (Acounty, ARegion & District) along with its properties and types.  

 

Regards, 

Vignesh Natarajan 

[Ssekamatte James]

Thank You.

This worked for me.

[Renjith Singh Rajendran]

Hi Ssekamatte, 

We are glad to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran