将 ServerFiltering 设置为 True 时，表单布局内带有 DropDownList 的 Kendo 模板会生成无效模板

Question

创建kendo ui Javascript模板并使用表单布局时，添加服务器过滤设置为true的DropDownList，kendo ui将抛出“无效模板”错误。

将服务器过滤设置为 false 时，它将按预期工作。

示例代码

https://github.com/Elrashid/TelerikAspNetCoreApp.tiket.2022121901

编译代码

https://github.com/Elrashid/TelerikAspNetCoreApp.tiket.2022121901/releases/download/202211219194020/publish-self-contaned.zip

测试场景：

• Kendo 模板中带有 ServerFiltering true 的 DropDownList 将起作用

• 带有 ServerFiltering false 的 DropDownList 将是 Kendo 模板内的表单布局编辑器将起作用

• 带有 ServerFiltering true 的 DropDownList 将是 Kendo 模板内的表单布局编辑器将不工作

错误：

[](https://i.stac> k.imgur.com/nULHE.png)

错误代码：

<script type="text/x-kendo-template" id="dropDownList_inside_form_ServerFiltering_true_template">

    @(Html.Kendo().Form<TelerikAspNetCoreApp.tiket._2022121901.Controllers.Biblio>()
                .Name("Biblio_Form")
                .HtmlAttributes(new { action = "Biblio_Save", method = "POST", })
                .Layout("grid")
                .Grid(g => g.Cols(1).Gutter(10))
                .Validatable(v =>
                    {
                        v.ValidateOnBlur(true);
                        v.ValidationSummary(vs => vs.Enable(false));
                    })
                .Items(items =>
                {
                    items.Add()
                         .Field(f => f.BiblioId)
                         .Label(l => l.Text("Biblio Id"))
                         .Editor(e =>
                            {
                                e.DropDownList()
                                    .HtmlAttributes(new { })
                                    .DataTextField("Title")
                                    .DataValueField("BiblioId")
                                    .NoDataTemplate("nodata")
                                    .Filter(FilterType.Contains)
                                    .DataSource(source =>
                                            {
                                                source.Read(read =>
                                                {
                                                    read.Action("biblio_read", "Home");
                                                })
                                        .ServerFiltering(true);
                                            });
                            });
                }).ToClientTemplate())
</script>

Answer 1

• 显式调用.ToClientTemplate()配置方法。

• 通过 .Name() 配置选项添加唯一标识符。

• 即使您在父级上调用.ToClientTemplate()，也必须执行此操作，因此您也必须为子级调用它

   <script type="text/x-kendo-template" id="...........">
  
   @(Html.Kendo().Form<Biblio>()
   .Name("Biblio_Form")
   ....
   .Items(items =>
   {
       items.Add()
       .Field(f => f.BiblioId)
       .Label(l => l.Text("Biblio Id"))
       .Editor(e =>
       {
           e.DropDownList()
           .Name("serverFilteringTrue")
           .DataTextField("Title")
           .DataValueField("BiblioId")
           .Filter(FilterType.Contains)
           .DataSource(source =>
               {
                   source.Read(read =>
                   {
                       read.Action("biblio_read", "Home");
                   })
           .ServerFiltering(true);
               }).ToClientTemplate();
       });
  
   }).ToClientTemplate())
   </script>
  

参考。

[ASP.NET Core 数据网格组件客户端详细信息模板 - 适用于 ASP.NET Core 的 Telerik UI] （https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/templates/client-detail-template）