SfDropDownList in a DataGrid

[Stephane Godbout]

Good evening everyone....

First, this may seem to be a simple question but up to now most of my development has been on backend / API development so this is a bit out of my wheelhouse.

Here is the scenario.

I have the following class that is used when populateing a DataGrid.

public class ItemModel
{

    public static List<ItemModel> Items = new List<ItemModel>();

    public ItemModel(string itemNumber, string name, decimal pointsPerShirt, decimal unitMultiplier, int expenseAccount, int revenueAccount, bool deleted)
    {
        ItemNumber = itemNumber;
        Name = name;
        PointsPerShirt = pointsPerShirt;
        UnitMultiplier = unitMultiplier;
        ExpenseAccount = expenseAccount;
        RevenueAccount = revenueAccount;
        Deleted = deleted;
    }

    [Required(ErrorMessage ="Item Numnber is required.")]
    [Display(Name = "Item Number")]
    [Key]
    [StringLength(52,MinimumLength =1,ErrorMessage ="Item Number must be between 1 and 52 characters")]
    public string ItemNumber { get; set; }

    [Required(ErrorMessage = "Item Name is required.")]
    [Display(Name = "Item Name")]
    [StringLength(75, MinimumLength = 1, ErrorMessage = "Item Name must be between 1 and 75 characters")]
    public string Name { get; set; }


    [Required(ErrorMessage = "Revenue Account is required.")]
    [Range(4000,4999,ErrorMessage ="Revenue Account must be between 4000 and 4999 and must be a valid revenue account in Simply")]
    public int RevenueAccount { get; set; }

    [Required(ErrorMessage = "Expense Account is required.")]
    [Range(5000, 5999, ErrorMessage = "Revenue Account must be between 5000 and 5999 and must be a valid expense account in Simply")]
    public int ExpenseAccount { get; set; }

    [Required(ErrorMessage = "Points per Shirt number is required.")]
    [Range(-1.0, 10.0, ErrorMessage = "Points per Shirt must be between 0 and 10")]
    public decimal PointsPerShirt { get; set; }

    [Required(ErrorMessage = "Multiplier used for calculation is required.")]
    [Range(-1, 1, ErrorMessage = "Multiplier must be either 0 (not included in the calculation of the number of shirts printed) or 1.")]
    public decimal UnitMultiplier { get; set; }

    [Required]
    public bool Deleted { get; set; }

}

The DataGrid looks like this

I also have the following class.

    public class AccountModel
    {
        public int AccountId { get; set; }
        public required string Name { get; set; }
        public required string AccountType { get; set; }
    }

The Account Type is either REVENUE or EXPENSE

Example of the data

...

The Account ID information is linked the Item.RevenueAccount (account type of REVENUE) and Item.ExpenseAccount (account type of EXPENSE)

The following is the DataGrid info:

<div id="ControlRegion">
    <SfGrid ID="Grid" DataSource="@items" @ref="Grid" AllowSorting="true" AllowMultiSorting="true" AllowResizing="true" Toolbar=@(new List<string>() { "Add", "Edit", "Cancel", "Update", "Search" })" Height="500" Width="1000" TValue="ITSPBlazorLibrary.Models.ItemModel">
        <GridPageSettings PageSize="13"></GridPageSettings>
        <GridSelectionSettings Type="SelectionType.Single"></GridSelectionSettings>
        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>
        <GridPageSettings PageSizes="true"></GridPageSettings>
        <GridEvents RowUpdated="RowUpdated" OnToolbarClick="ToolbarClick"  TValue="ITSPBlazorLibrary.Models.ItemModel"></GridEvents>
        <GridColumns>
            <GridColumn Type='Syncfusion.Blazor.Grids.ColumnType.CheckBox' Width="50"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.ItemNumber) HeaderText="Service ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules { Required = true })" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left" Width="120">
                <Template>
                    @{
                        var data = (context as ITSPBlazorLibrary.Models.ItemModel);
                        if (data is not null)
                        {
                            <div>
                                @(data.ItemNumber != null ? data.ItemNumber.ToUpper() : "")
                            </div>
                        }                
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.Name) HeaderText="Service Name" ValidationRules="@(new ValidationRules { Required = true })" Width="120" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Left"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.RevenueAccount) HeaderText="Revenue Account" EditType="EditType.NumericEdit" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="130" Type="Syncfusion.Blazor.Grids.ColumnType.Integer"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.ExpenseAccount) HeaderText="Expense Account" EditType="EditType.NumericEdit" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" Width="130" Type="Syncfusion.Blazor.Grids.ColumnType.Integer"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.PointsPerShirt) HeaderText="Points per Shirt" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" EditType="EditType.NumericEdit" Width="120"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.UnitMultiplier) HeaderText="Multipier" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" EditType="EditType.NumericEdit" Width="120"></GridColumn>
            <GridColumn Field=@nameof(ITSPBlazorLibrary.Models.ItemModel.Deleted) HeaderText="Deleted" DisplayAsCheckBox="true" Type="ColumnType.Boolean" Width="75" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>

So, my question: How do I (when I either ADD or EDIT a record that the user selects the valid record using SfDropDownList with (Account.AccountId and Account.Name) filtered with AccountType of revenue for Item.RevenueAccount and (Account.AccountId and Account.Name) filtered with AccountType of expense for the Item.ExpenseAccount.

I have tried every which way to make this work and keep coming up to a what (i.e. conversion from int to string issue)...   

Thanks in advance for your help.....

SCG

[Prathap Senthil]

Hi Stephane Godbout,

Based on your requirement to replace the RevenueAccount and ExpenseAccount numeric fields in the Syncfusion Blazor Grid with SfDropDownList controls during Add/Edit operations. The dropdown should display account details (such as Account ID and Name) and be filtered based on the AccountType (REVENUE or EXPENSE). The selected value should be stored back into the corresponding integer fields (RevenueAccount and ExpenseAccount) in the ItemModel. The issue being encountered is a data type mismatch, where the dropdown value is likely configured as a string (for example, using Name) while the model properties expect an integer (AccountId). As a result, Syncfusion throws an int-to-string/string-to-int conversion error during data binding. The dropdown's Value field must be mapped to AccountId and TValue should be set to int to match the model property type. Kindly refer to the below code snippet and sample for your reference.

Code Snippet:

    <SfGrid ID="Grid"

            DataSource="@items"

            @ref="Grid"

            AllowSorting="true"

            AllowMultiSorting="true"

            AllowResizing="true"

            Toolbar="@(new List<string>() { "Add", "Edit", "Cancel", "Update", "Search" })"

            Height="500"

            Width="1000"

            TValue="ItemModel">

 

-------------------------

            <GridColumn Field="@nameof(ItemModel.RevenueAccount)"

                        HeaderText="Revenue Account"

                        TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

                        Width="250">

                <EditTemplate>

                    @{

                        var row = (context as ItemModel)!;

                        <SfDropDownList TValue="int"

                        PopupWidth="400"

                                        TItem="AccountModel"

                                        Placeholder="Select a revenue account..."

                                        DataSource="@RevenueAccounts"

                                        @bind-Value="@row.RevenueAccount"

                                        AllowFiltering="true">

                            <DropDownListFieldSettings Text="Name" Value="AccountId"></DropDownListFieldSettings>

                        </SfDropDownList>

                    }

                </EditTemplate>

            </GridColumn>

 

            <GridColumn Field="@nameof(ItemModel.ExpenseAccount)"

                        HeaderText="Expense Account"

                        TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"

                        Width="250">

                <EditTemplate>

                    @{

                        var row = (context as ItemModel)!;

                        <SfDropDownList TValue="int"

                                        TItem="AccountModel"

                                        Placeholder="Select an expense account..."

                                        DataSource="@ExpenseAccounts"

                                        @bind-Value="@row.ExpenseAccount"

                                        AllowFiltering="true">

                            <DropDownListFieldSettings Text="Name" Value="AccountId"></DropDownListFieldSettings>

                        </SfDropDownList>

                    }

                </EditTemplate>

            </GridColumn>

 

            ----------------

        </GridColumns>

    </SfGrid>

</div>

 

@code {

    private SfGrid<ItemModel> Grid { get; set; } = default!;

    private List<ItemModel> items = new();

 

  

    private List<AccountModel> RevenueAccounts = new();

    private List<AccountModel> ExpenseAccounts = new();

 

    protected override void OnInitialized()

    {

        RevenueAccounts = Db.Accounts

            .Where(a => a.AccountType.StartsWith("revenue", StringComparison.OrdinalIgnoreCase))

            .OrderBy(a => a.AccountId)

            .ToList();

 

        ExpenseAccounts = Db.Accounts

            .Where(a => a.AccountType.StartsWith("expense", StringComparison.OrdinalIgnoreCase))

            .OrderBy(a => a.AccountId)

            .ToList();

 

        items = Db.Items.AsNoTracking().OrderBy(i => i.ItemNumber).ToList();

    }

 

 

Sample: Check the attachment.

UG: https://blazor.syncfusion.com/documentation/datagrid/edit-types#render-dropdownlist-in-edittemplate

Regards,
Prathap Senthil

Attachment: DataGridWithEditing_8458bd3.zip