Customized RadzenDataGridColumn Component does not work as expected

[Miles]

Hi,

I am developing a Radzen Blazor Server app, and expect to replace the RadzenDataGridColumn component with a customized one

CustomRadzenDataGridColumn.razor:

@typeparam TItem

<RadzenDataGridColumn Context="item" TItem=@TItem Property=@Property Title=@Title>
    <EditTemplate>
        <RadzenTextBox Value="@(GetPropertyValue<string>(item, Property))" Name=@Property Class="w-100 d-block bg-white" />
        <RadzenRequiredValidator Component=@Property  Text="This field is required" Popup="true" Style="position: absolute"/>
    </EditTemplate>
</RadzenDataGridColumn>

@code {
    [Parameter]
    public string Title{ get; set; }

    [Parameter]
    public string Property{ get; set; }

    public string GetPropertyValue<String>(TItem item, string propertyName)
    {
        return PropertyAccess.GetValue(item, propertyName).ToString();
    }
}

Books.razor

<RadzenDataGrid @ref="dataGrid" AllowFiltering="true" AllowColumnResize="true" EditMode="DataGridEditMode.Single" RowUpdate="@OnUpdateRow" RowCreate="@OnCreateRow" FilterMode="FilterMode.Advanced" AllowSorting="true" PageSize="50" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true"
    Data="@items" TItem="Book" LogicalFilterOperator="LogicalFilterOperator.Or">
    <Columns>

        <CustomRadzenDataGridColumn TItem="Book" Property="Title" Title="Title" />

        <RadzenDataGridColumn Context="item" TItem="Book" Property="Author" Title="Author">
            <EditTemplate>
                <RadzenTextBox @bind-Value="item.Author" Name="Author" Class="w-100 d-block bg-white" />
                <RadzenRequiredValidator Component="Author" Text="Author is required" Popup="true" Style="position: absolute"/>
            </EditTemplate>
        </RadzenDataGridColumn>
        ......

However, it does not work as expected. Two issues are observed:

1. The column is disordered.
2. Changes of text input are not saved.

The screenshot demonstrates these two issue. The Title column is using "CustomRadzenDataGridColumn" while the rest of the column are using original one.

I am new to Radzen, there is probably something that I have done wrong. Could you please help?

Added: My ultimate goal is :

<RadzenDataGrid ....>
    <Columns>

        <CustomRadzenDataGridColumn TItem="Book" Property="Title" Editable="True" />
        //input type inferred from property type
        //Title default as the name of the Property
        //validation based on data annotations of models...
        //editable/readonly switch

        <CustomRadzenDataGridColumn TItem="Book" Property="IsPublished" Title="Published" Editable="True" />
        //Title explictly specified

        <CustomRadzenDataGridColumn TItem="Book" Property="Category" Editable="True" InputType="MyCustomInputType.RadioButton" />
        //input type explictly specified
        ....
    </Columns>
</RadzenDataGrid>

[enchev]

@Miles

The column is disordered.

This is how the razor parser works - you can use OrderIndex to specify the exact order:

Blazor DataGrid column reorder

@Miles

Value="@(GetPropertyValue<string>(item, Property))"

This is not two-way binding - @bind-Value should be used if you want your values to be saved however you cannot use @bind-Value with such expression.

[Miles]

Thanks for explaining the order issue, I got it fixed.

Is it possible to achieve my ultimate goal mentioned above?

[Miles]

Answering myself, and maybe this is helpful to someone also gets frustrated.

I am somewhere close to my goal, the key is to set ValueChanged.

<RadzenTextBox Value="@typeof(TItem).GetProperties().FirstOrDefault(p => p.Name == Property)?.GetValue(item)?.ToString()" ValueChanged="@(e => typeof(TItem).GetProperty(Property)!.SetValue(item,e))" Name=@Property />

Similar approach can be applied to RadzenNumeric and RadzenDropDown. Works like a charm so far.

However, things do not go well with RadzenCheckBox. The tick of the checkbox is immediately reverted to the previous state after the box is checked. After days struggling with the the source code and Blazor internals I am still stuck.