如何在Blazor的TelerikForm中嵌套TelerikGrid

直接在FormItems或FormGroup下放置TelerikGrid会脱离表单布局、渲染到页面顶部，核心原因是TelerikForm的FormItems区域仅识别官方表单组件（FormItem、FormGroup等），Grid不属于表单内置组件，会被排出表单布局流。

无需额外CSS调整的解决方法是用<FormItem>组件包裹Grid，让它成为表单的一个自定义表单项，自动继承表单的布局规则：

修改后的代码示例 #

<TelerikForm Model="@TestUser"
             Width="700px"
             Columns="2"
             ColumnSpacing="20px"
             OnValidSubmit="@HandleValidSubmit"
             OnInvalidSubmit="@HandleInvalidSubmit">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="用户信息">
            <!-- 原有表单控件 -->
            <FormItem Field="@nameof(TestUser.Name)"></FormItem>
            <FormItem Field="@nameof(TestUser.Email)"></FormItem>
        </FormGroup>

        <!-- 用FormItem包裹Grid，嵌入表单布局 -->
        <FormItem ColSpan="2"> <!-- ColSpan让Grid占满两列，对应表单Columns="2"配置 -->
            <Template>
                <TelerikGrid Data="@items" TItem="GridItem" AutoGenerateColumns="false">
                    <GridToolBar>
                        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">新增行</GridCommandButton>
                    </GridToolBar>
                    <GridColumns>
                        <GridColumn Field="@nameof(GridItem.Name)" Title="名称" />
                        <GridColumn Field="@nameof(GridItem.Value)" Title="值" />
                        <GridCommandColumn>
                            <GridCommandButton Command="Add" Icon="@FontIcon.Plus">新增</GridCommandButton>
                        </GridCommandColumn>
                    </GridColumns>
                </TelerikGrid>
            </Template>
        </FormItem>

        <!-- 其他表单组 -->
        <FormGroup LabelText="其他信息">
            <FormItem Field="@nameof(TestUser.Phone)"></FormItem>
        </FormGroup>
    </FormItems>
</TelerikForm>

@code {
    public class TestUser
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
    }

    public class GridItem
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }

    TestUser TestUser { get; set; } = new TestUser();
    List<GridItem> items { get; set; } = new List<GridItem>();

    void HandleValidSubmit()
    {
        // 提交逻辑
    }

    void HandleInvalidSubmit()
    {
        // 无效提交处理
    }
}

关键细节 #

• 利用FormItem的Template插槽自定义内容，Grid会完全融入表单布局，继承表单的宽度、间距等样式。
• 通过ColSpan属性控制Grid的列占比（比如表单设置Columns="2"时，ColSpan="2"让Grid占满整行）。
• 新增行功能可以直接用Grid内置的Add命令实现，无需额外编写复杂逻辑。

内容的提问来源于stack exchange，提问作者Tom Stickel