如何在 KendoUI Tabstrip 中访问 KendoUI Grid 选定行哈希模板（KendoUI）值

Posted 2023-05-07

【中文标题】如何在 KendoUI Tabstrip 中访问 KendoUI Grid 选定行哈希模板（KendoUI）值

【英文标题】：How to access KendoUI Grid selected row Hash Template(KendoUI) value in KendoUI Tabstrip

【发布时间】：2014-10-24 08:59:31

【问题描述】：

我使用的是kendoUI Detail view模板，如图

当我点击每一行时，它会打开一个标签条并显示存储在 ViewData 中的所有数据，例如

主网格代码如下所示，

@(html.Kendo().Grid<EnvironmentPOCO>()
      .Name("Grid")
      .Columns(columns =>
      
          //columns.Bound(d => d.EnvironmentID).Visible(false);
          columns.Bound(d => d.EnvironmentName).Width(200).Title("Environment Name");
          columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("Environment Code").EditorTemplateName("_EnvironmentCodeDropDown");
          columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["MyServers"], "ServerID", "ServerDetailsProperty").Width(300).Title("Server Details").EditorTemplateName("_ServerDropDown");
          columns.ForeignKey(d => d.ProjectID, (List<SynergyProjectPOCO>)ViewData["MySynergyProjects"], "ProjectID", "ProjectDetailsProperty").Width(400).Title("Project Details").EditorTemplateName("_ProjectNameDropDown");
          columns.Command(d =>
          
              d.Edit();
              d.Destroy();

          ).Width(200).Title("Action");
      

      )

      .ToolBar(tools => tools.Create())
      .Sortable()
      .Pageable()
      .Filterable()
      .Navigatable()
      .Sortable(sortable => sortable.AllowUnsort(false))
       .ClientDetailTemplateId("template")
      .HtmlAttributes(new  style = "height:430px;" )
      .Events(events => events.DataBound("dataBound"))

      .DataSource(dataSource => dataSource
        .Ajax()
            .Model(model =>
            
                model.Id(m => m.EnvironmentID);

            )

            .Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
            .Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
            .Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
            .Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
      )

)

我有一个视图数据，其中包含我想在标签条中显示的所有详细信息，但我想要的是它应该只显示与所选行相关的数据ServerID ....那里应该是 if check in for loop for eg if(//above grid ServerID==viewdata ServerID display that row of view data).但我不知道如何访问标签条中的上述网格值以及如何在 cshtml razor 引擎中使用 if。 查看不工作的 if 检查 Tabstrip 代码如下所示

<script id="template" type="text/kendo-tmpl">
   @(Html.Kendo().TabStrip()
            .Name("Logins")
            .SelectedIndex(0)
            .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
            .Items(items =>
            
                items.Add().Text("Contact Information").Content(@<div>
                                <ul>
                                @for (var i = 0; i < viewDataServer.Count; i++)
                                 //How to get the Top Grid ServerID value here in **if**
                                   @if("#=ServerID"==viewDataServer[i].ServerID.ToString())//#=ServerID should be the selected main grid serveridvalue
                                
                                <li><label>LoginID:</label>@viewDataServer[i].LoginID.ToString()</li>
                                <li><label>ServerID:</label>@viewDataServer[i].ServerID.ToString()</li>
                                <li><label>UserID:</label>@viewDataServer[i].UserID.ToString()</li>
                                <li><label>Password:</label>@viewDataServer[i].passwd.ToString()</li>
                                
                                
                                </ul>
                            </div>);
            )
            .ToClientTemplate())
</script>

【参考方案1】：

如果其他人有这个问题，这里是解决方案。 Grid 的明细模板是客户端模板，这意味着所有依赖于主行的内容自定义都必须从客户端进行管理。目前，TabStrip 使用依赖于参数 (ServerID) 的服务器端逻辑，该参数仅在客户端可用，这就是服务器逻辑无法按预期工作的原因。

您需要通过 Ajax 请求填充 TabStrip，该请求将传递 ServerID

items.Add().Text("Contact Information")
    .LoadContentFrom(Url.Content("~/controller/action/?ServerID=#=ServerID#"));

http://demos.telerik.com/aspnet-mvc/tabstrip/ajax

对于需要手动编码的更高级的自定义，您可以使用 Grid 的 detailInit 事件，如下所示：

http://demos.telerik.com/kendo-ui/grid/detailtemplate