How to Display Only valueMember in Smart.Blazor Grid Column After Selection

[Duong Quyet]

Hi everyone 👋
I’m working with Smart.Blazor Grid and a smart-combo-box editor.

Here’s my current setup for the Category column:

<Column DataField="Category"
        Label="Category"
        Editor="@categoryEditor">
</Column>

However, after selecting a value, the grid cell still shows the label text (e.g., “ELEC – Electronics”) instead of only showing the code (like “ELEC”).

How can I make the grid column display only the valueMember (“code”) after selecting an item, while keeping the dropdown showing “CODE – NAME”?

@page "/test41"
@using System.Linq
@inject IJSRuntime JS

<style>
    smart-grid {
        height: 420px;
        width: 100%;
    }

    smart-combo-box {
        min-height: 35px;
        width: 320px;
    }

    .ln-code {
        font-weight: 600;
        margin-right: 8px;
    }

    .ln-name {
        opacity: .85;
    }
</style>

<!-- ItemTemplate (dropdown): CODE - NAME -->
<template id="lnItem">
    <span class="ln-code">{{label}}</span>
</template>

@if (dataRecords is null)
{
    <p><em>Loading...</em></p>
}
else
{
    <Smart.Blazor.Grid @ref="@grid" DataSource="dataRecords" Editing="@editing" Selection="@selection">
        <Columns>
       

            <!-- Category column (English version) -->
            <Column DataField="Category"
                    Label="Category"
                    Editor="@categoryEditor">
            </Column>

            <Column DataField="ProductName" Label="Product"></Column>
            <Column DataField="Quantity" Label="Quantity" DataType="number" Editor="@numberInputEditor"></Column>
            <Column DataField="Price" Label="Unit Price" DataType="number" Editor="@numberInputEditor" CellsFormat="c2"></Column>
        </Columns>
    </Smart.Blazor.Grid>
}

@code {
    private Grid grid;

    // ===== Model for Grid =====
    public class DataRecord
    {
        public string FirstName { get; set; } = "";
        public string Category { get; set; } = "";
        public string ProductName { get; set; } = "";
        public int Quantity { get; set; }
        public double Price { get; set; }
    }

    // ComboBox item model
    public class CategoryItem
    {
        public string code { get; set; } = "";   // "ELEC"
        public string name { get; set; } = "";   // "Electronics"
        public string label { get; set; } = "";  // "ELEC - Electronics"
        public string value { get; set; } = "";  // reserved
    }

    private readonly (string Code, string Name)[] categoryPairs = new[]
    {
        ("ELEC", "Electronics"),
        ("COMP", "Computers & Components"),
        ("MOBI", "Mobile & Accessories"),
        ("AUDIO", "Audio Equipment"),
        ("HOME", "Home Appliances"),
        ("FURN", "Furniture"),
        ("OFFC", "Office Supplies"),
        ("SPORT", "Sports & Outdoors"),
        ("FASH", "Fashion & Apparel"),
        ("TOYS", "Toys & Games")
    };

    private List<CategoryItem> categoryItems;

    private static readonly string[] Products = new[]
    {
        "Mechanical Keyboard","Wireless Mouse","27'' Monitor","14'' Laptop","Headphones",
        "USB-C Cable","Fast Charger 65W","Full HD Webcam","1TB SSD","16GB RAM"
    };

    // ===== Editors =====
    private GridEditor categoryEditor;
    private string numberInputEditor = "numberInput";

    GridEditing editing = new()
        {
            Enabled = true,
            Mode = GridEditingMode.Cell,
            Action = GridEditingAction.DoubleClick
        };

    GridSelection selection = new()
        {
            Enabled = true,
            AllowCellSelection = true,
            AllowRowHeaderSelection = false,
            AllowColumnHeaderSelection = false,
            Mode = Smart.Blazor.GridSelectionMode.Extended
        };

    private List<DataRecord> dataRecords;

    protected override void OnInitialized()
    {
        // DataSource for ComboBox (dropdown shows CODE - NAME)
        categoryItems = categoryPairs
            .Select(p => new CategoryItem
                {
                    code = p.Code,
                    name = p.Name,
                    label = $"{p.Code} - {p.Name}",
                    value = p.Name
                })
            .ToList();

        // Category ComboBox editor
        categoryEditor = new GridEditor
            {
                Template = "<smart-combo-box></smart-combo-box>",
                Settings = new Dictionary<string, object>
            {
                { "autoOpen", true },
                { "dropDownAppendTo", "body" },
                { "filterable", true },
                { "autoComplete", "list" },
                { "displayMember", "label" },
                { "valueMember", "code" },
                { "itemTemplate", "lnItem" }
            },
                OnInit = (row, col, editor, rowData) =>
                {
                    return new Dictionary<string, object>
                    {
                    { "dataSource", categoryItems }
                    };
                },
                OnRender = (row, col, value, rowData) =>
                {
                    if (value is string code && !string.IsNullOrWhiteSpace(code))
                    {
                        return new Dictionary<string, object>
                        {
                        { "selectedValues", new List<string> { code } }
                        };
                    }
                    return new Dictionary<string, object>
                    {
                    { "selectedValues", new List<string>() }
                    };
                }
            };

        dataRecords = GenerateData(20);
    }

    private List<DataRecord> GenerateData(int count)
    {
        var rnd = new Random();
        var list = new List<DataRecord>(count);
        for (int i = 0; i < count; i++)
        {
            var pair = categoryPairs[rnd.Next(categoryPairs.Length)];

            var productCount = rnd.Next(1, 4);
            var picked = Products.OrderBy(_ => rnd.Next()).Take(productCount);
            var productName = string.Join(", ", picked);

            var quantity = rnd.Next(1, 50);
            var price = Math.Round(rnd.NextDouble() * 90 + 10, 2);

            list.Add(new DataRecord
                {
                    Category = pair.Code,   // Store CODE of category
                    ProductName = productName,
                    Quantity = quantity,
                    Price = price
                });
        }
        return list;
    }
}

• This topic was modified 17 hours ago by Duong Quyet.

[Author]

Posts