如何使用 Blazor 将 TelerikGrid 嵌套在 TelerikForm 中

Question

我有一个带有 FormItems --> FormGroup --> FormItem(s) 的 TelerikForm，我希望在表单的中间或底部有一个网格，我可以在其中添加多行新项目。

我在 TelerikGrid 中添加了 GridColumns，它会渲染，但会将网格放在页面顶部。自从我使用 Telerik 以来已经有一段时间了，所以我想知道如何才能拥有漂亮的表单，并且内部有漂亮的网格，而无需太多的 css 操作。

我正在使用 blazor repl 作为游乐场。
https://blazorrepl.telerik.com/wSkHQXwH29FwQkMD29

<TelerikForm Model="@TestUser"
                     Width="700px"
                     Columns="2"
                     ColumnSpacing="20px"
                     OnValidSubmit="@HandleValidSubmit"
                     OnInvalidSubmit="@HandleInvalidSubmit">
            <FormValidation>
                <DataAnnotationsValidator></DataAnnotationsValidator>
            </FormValidation>
            <FormItems>
                <FormGroup LabelText="User Information">
            ...................
             <TelerikGrid Data="@items" TItem=GridItem AutoGenerateColumns="false">
               <GridColumns>
                  <GridColumn Field="@nameof(GridItem.Name)" Title="Name" />
                  <GridColumn Field="@nameof(GridItem.Value)" Title="Value" />
              </GridColumns>
             </TelerikGrid>

            </FormItems>
            
/TelerikForm>

Answer 1

您可以提供允许此操作的自定义布局

首先，我添加了一个空的

FormGroup

来渲染

TelerikGrid

。

然后提供一个

FormItemsTemplate

<FormItemsTemplate Context="formContext">
    @{
        //formContext.Items contains all FormItems and FormGroups at root level
        var formObjects = formContext.Items;
    }
    <TelerikFormGroupRenderer Group="@( (IFormGroup)formObjects[0] )">
    </TelerikFormGroupRenderer>
    <TelerikFormGroupRenderer Group="@( (IFormGroup)formObjects[2] )">
        <Template>
        <TelerikGrid Data="@items" TItem=GridItem AutoGenerateColumns="false">
            <GridColumns>
                <GridColumn Field="@nameof(GridItem.Name)" Title="Name" />
                <GridColumn Field="@nameof(GridItem.Value)" Title="Value" />
            </GridColumns>
        </TelerikGrid>
        </Template>
    </TelerikFormGroupRenderer>
    <TelerikFormGroupRenderer Group="@( (IFormGroup)formObjects[1] )">
    </TelerikFormGroupRenderer>
</FormItemsTemplate>            

REPL：https://blazorrepl.telerik.com/myayOzEi598Vuqj722