Error in creating custom component for grid column

[Susan]

I have a requirement where one of the column value is a html string and I need to convert that value as markup string. I can do it using a template as:

<GridColumn Field="@nameof(Employee.Name)" Title="Name">

        <Template>

        @{

        var value = (context as Employee);

        var markupValue = (MarkupString) value.Name;

        @markupValue;

        }

        </Template>

 </GridColumn>

But I want to create a dynamic component (suitable for any class and any property). I created a custom component and called it from the main component. The requirement was achieved but I lost the sorting functionality and also this grid column is moved towards the end.

Custom component (HtmlGrid.razor):

<GridColumn Title="@Title">
    <Template>
        @{
            var value = GetPropValue(context, ColumnName)?.ToString();
            var a = (MarkupString)value;
            @a;
        }
    </Template>

</GridColumn>


@code {
    [Parameter] public string ColumnName { get; set; } = string.Empty;
    [Parameter] public string Title { get; set; } = string.Empty;
    
    public object GetPropValue(object src, string propName)
    {
        return src.GetType().GetProperty(propName).GetValue(src, null);
    }

}

This is then called from some parent (Employee.razor) as:

<GridColumn Field="@(nameof(Employee.Id))" Width="80px" />
<GridColumn Field="@(nameof(Employee.A))" Width="80px" />
<HtmlGrid ColumnName="@nameof(Employee.Name)" Title="Name"/>
<GridColumn Field="@(nameof(Employee.B))" Width="80px" />

 

The issue here is that, when this grid is rendered, the columns are seen in the order:

ID-Column, A-Column, B-Column, Name-Column (HtmlGrid)

Also, There is no sorting in this HtmlGrid

[Nadezhda Tacheva]

Hi Susan,

It looks like the GridColumn in the HtmlGrid component is missing its Field parameter. Adding it results in proper behavior of the corresponding column. For example: https://blazorrepl.telerik.com/cGOtbwOX21f6zQcy35.

As for the order, the column from the custom component is indeed rendered last and this is a matter of timing. The Grid directly adds its GridColumn instances but the HtmlGrid needs more time to render its content and thus it comes at the end.

We have a feature request for supporting DisplayAttribute.Order Property that could allow one set their desired order for the columns. It was initially opened for the autogenerated columns where it was not possible to control the order of the columns from the markup. However, based on your scenario, it will also be useful to enhance the manually declared columns, so one can control their order in such cases. I've updated the request and added your vote to increase its popularity. We track that to prioritize the component enhancements. You may as well follow the item to get status updates.

In the meantime, you may try the approach listed in the Dynamic Templates that can be repeated easily knowledge base article.

I hope you will find the above information useful. Please let us know if any other questions appear.

Regards,
Nadezhda Tacheva
Progress Telerik