Telerik MVC Grid ClientTemplate 复选框最初未显示

Posted 2023-04-13

【中文标题】Telerik MVC Grid ClientTemplate 复选框最初未显示

【英文标题】：Telerik MVC Grid ClientTemplate checkbox not displayed initially

【发布时间】：2011-10-18 14:30:58

【问题描述】：

我有一个与这里的帖子非常相似的问题： Telerik grid with checkbox - Checkbox not showing up when the grid initially paints

基本上，我有一个 Telerik MVC3 剃须刀网格，其中包含一个由复选框组成的 ClientTemplate 列。当页面最初加载时，复选框不存在 - 相反，它是我希望复选框的值。但是，当 ajax 被触发时（例如将列组合在一起），复选框显示没有问题。

我不太了解上面粘贴的线程的解决方案....所以也许这就是答案，我只是不知道如何调用网格的构造函数。这是我的代码：

research.cshtml

@(html.Telerik().Grid(Model)
    .Name("Grid")
    .DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
    .DataBinding(databinding => databinding.Ajax()
        .Select("_ViewMessages", "Results")
        .Update("_UpdateSelectedMessage", "Results"))
    .Columns(columns =>
                 
                     columns.Bound(o => o.MessageInformation.MessageGUID)
                         .ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
                         .Title("Check")
                         .Width(50)
                         .HtmlAttributes(new  style = "text-align:center" );
                     columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
                     columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("0:d");
                     columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("0:t");
                     columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
                     columns.Bound(o => o.MessageStatus).Title("Status");
                     columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
                 )

    .Editable(editing => editing.Mode(GridEditMode.PopUp))
    .Scrollable(scrolling => scrolling.Enabled(true))
    .Sortable(sorting => sorting.Enabled(true))
    .Pageable(paging => paging.Enabled(true))
    .Filterable(filtering => filtering.Enabled(true))
    .Groupable(grouping => grouping.Enabled(true))
    .Footer(true)
    )

ResultsController.cs

        [GridAction]
        public ActionResult Research()
        
            ViewBag.Message = "Research";

            return View(DataAccess.Get_Messages());
        

        [GridAction]
        public ActionResult _ViewMessages()
        
            ViewBag.Message = "Research";

            return View(new GridModel(DataAccess.Get_Messages()));
        

【参考方案1】：

您最初是绑定到服务器数据，因此您需要一个服务器模板和一个客户端模板：

@(Html.Telerik().Grid(Model)
    .Name("Grid")
    .DataKeys(keys => keys.Add(m => m.MessageInformation.MessageGUID))
    .DataBinding(databinding => databinding.Ajax()
        .Select("_ViewMessages", "Results")
        .Update("_UpdateSelectedMessage", "Results"))
    .Columns(columns =>
                 
                     columns.Bound(o => o.MessageInformation.MessageGUID)
                         .Template(mi => 
                             %>
                                 <input type='checkbox' id='chkMessage' name='checkedRecords' value='<%= mi.MessageGUID %>' />
                             %>
                         )
                         .ClientTemplate("<input type='checkbox' id='chkMessage' name='checkedRecords' value='<#= MessageInformation.MessageGUID #>' />")
                         .Title("Check")
                         .Width(50)
                         .HtmlAttributes(new  style = "text-align:center" );
                     columns.Bound(o => o.MessageInformation.MessageGUID).Title("ID");
                     columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Date").Format("0:d");
                     columns.Bound(o => o.MessageInformation.MessageReceivedDateTime).Title("Received Time").Format("0:t");
                     columns.Bound(o => o.MessageInformation.MedVAMessageTypeString).Title("Message Type");
                     columns.Bound(o => o.MessageStatus).Title("Status");
                     columns.Command(commands => commands.Edit().ButtonType(GridButtonType.Text)).Title("Edit");
                 )

    .Editable(editing => editing.Mode(GridEditMode.PopUp))
    .Scrollable(scrolling => scrolling.Enabled(true))
    .Sortable(sorting => sorting.Enabled(true))
    .Pageable(paging => paging.Enabled(true))
    .Filterable(filtering => filtering.Enabled(true))
    .Groupable(grouping => grouping.Enabled(true))
    .Footer(true)
    )

【讨论】：

非常感谢！效果很好！这是一个指向模板字段的链接，它引导我找到我需要的最终代码：demos.telerik.com/aspnet-mvc/razor/grid/templatesserverside

哈，是的，我必须查看该页面以供参考。我有一段时间没有使用 Telerik MVC。

【参考方案2】：

另一个用于 Razor 语法的 sn-p：CheckBox 在单击编辑后可以编辑。

.Template(
        @<text>
            <input name="chkStatus" type="checkbox" @if(item.Status)  @:checked="checked"  disabled /> 
        </text>
         )
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled  />");

【参考方案3】：

@McGarnagle 的语法对我不起作用。这是我的工作：

.Template(@<text><input name="chkStatus" type="checkbox" @(item.Status ? "checked=\"checked\"" : "") disabled /></text>)
.ClientTemplate("<input type='checkbox' name='chkStatus' value='<#= Status #>' <#=Status?'checked':''#> disabled  />")