Sorting column that is using the custom template

[Andy Camacho Centella]

Hello there, I'm using the Grid with a column that uses the custom template. but the sort action for the column that is using the custom template doesn't work well, is removing the data from the grid

<SfGrid DataSource="@Employees" AllowSorting="true">
    <GridColumns>
        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120">
            <Template>
                @{
                    var employee = (context as EmployeeData);
                    <div class="image">
                        <img src="@($"scripts/Images/Employees/{employee.EmployeeID}.png")" alt="@employee.EmployeeID" />
                    </div>
                }
            </Template>
        </GridColumn>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Format="C2" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150" Type="ColumnType.Date"></GridColumn>
    </GridColumns>
</SfGrid>

[Rahul Narayanasamy]

Hi Andy, 

Greetings from Syncfusion. 

Query: Sorting column that is using the custom template - I'm using the Grid with a column that uses the custom template. but the sort action for the column that is using the custom template doesn't work well, is removing the data from the grid 

We have validated your query and you want to perform sorting operation for column template. We would like to inform you that the column template is used to display the customized values and other controls in that particular column and the Grid data operations(such as Sorting, Filtering, Editing, etc) are working based on the provided Field property.  

In Grid the data operations like filtering, sorting, grouping etc. will only be performed based on the Field property defined in Grid column which is the default behavior. 

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Anthony]

So are you saying you can't do it?

[Naveen Palanivel]

Hi Anthony,

The DataGrid component provides a Template option that allows you to display custom elements, such as images, buttons, or formatted text, within a column instead of directly displaying the field value. Since the template content is rendered dynamically and does not directly bind to the field values, built-in sorting will not work as expected on such columns.

When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for datagrid actions like sorting, filtering, editing. It is must to define the Field property of the column to perform any datagrid actions.

To perform sorting on a column with a template, you need to set the Field property to a value that exists in the data source. For example, based on your provided code, setting Field="EmployeeID" will ensure that the grid sorts using the EmployeeID values.

For Your Reference

https://blazor.syncfusion.com/documentation/datagrid/column-template

Regards,

Naveen