Create a new field on Datasource Class from a single value

[Geraud Bertrand]

I want to create a Element from only a string value who will be Name of Element.


<SfGrid @ref="Grid" DataSource="@ListDetailElements" TValue="DetailElement" AllowPaging="true" AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Delete", "Cancel", "Update", "Search" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" ShowConfirmDialog="false" />
    <GridSearchSettings Operator="Operator.Contains" Fields="@SpecificColumn" IgnoreAccent="true" IgnoreCase="true" />
    <GridEvents OnActionBegin="OnElement" OnActionComplete="OnElement" TValue="DetailElement" />
    <GridPageSettings PageSizes="true"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="@nameof(DetailElement.Id)" Visible="false" IsPrimaryKey="true"></GridColumn>
        <GridColumn Field="@nameof(DetailElement.Element)" HeaderText="Nom">
            <Template>
                @{
                    var element = (context as DetailElement).Element;
                    <div>
                        @(element.Nom)
                    </div>
                }
            </Template>
        </GridColumn>
        <GridColumn Field="Photos" HeaderText="Photo" AllowAdding="false" AllowEditing="false" AllowFiltering="false" AllowSearching="false" AllowSorting="false">
            <Template>
                @{
                    var Photos = (context as DetailElement).Photos;
                    if (Photos != null && Photos.Count > 0)
                    {
                        <div style="cursor: pointer;">
                            <i class="far fa-images"></i> (@(Photos.Count))
                        </div>
                    }
                    else
                    {
                        <div>
                            <i class="far fa-images"></i> (0)
                        </div>
                    }
                }
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>




class DetailElement
{
    public int Id { get; set; }
    public Element Element { get; set; }
    public List Photos { get; set; }
}


class Element
{
   public int IdElement { get; set; }
   public string Nom { get; set; }
}

[Rahul Narayanasamy]

Hi Geraud, 

Greetings from Syncfusion. 

Based on your shared details we suspect that you want to create a HTML element from string value and display it in the GridColumn. If yes, then you can achieve your requirement by using DisableHtmlEncode property of GridColumn. Find the below code snippets and sample for your reference. 

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#displaying-the-html-content 

 

 

<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" DisableHtmlEncode="false" 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> 

 

@code{ 

    public List<EmployeeData> Employees { get; set; } 

 

    protected override void OnInitialized() 

    { 

        Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() 

        { 

            EmployeeID = x, 

            Name = new Element() 

            { 

                FirstName = (new string[] { "ALFKI", "<span>ANANTR</span>", "<b>ANTON</b>", "BLONP", "BOLID" })[new Random().Next(5)], 

                LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)] 

            }, 

            . . . 

        }).ToList(); 

    } 

 

    public class EmployeeData 

    { 

        public int? EmployeeID { get; set; } 

        public Element Name { get; set; } 

        public string Title { get; set; } 

    } 

 

    public class Element 

    { 

        public string FirstName { get; set; } 

        public string LastName { get; set; } 

    } 

} 

If you set DisableHtmlEncode as false, then the HTML element is directly rendered in GridColumn. Find the below picture for your reference. 

 

If you set DisableHtmlEncode as true, then the string value is shown in the GridColumn cell. Find the below picture for your reference. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172447/ze/GridSample-1065483947 

Please let us know if you have any concerns. 

Regards, 

Rahul