Telerik MVC Grid ClientTemplate checkbox not displayed initially

Question

I have a very similar problem to the post located here: Telerik grid with checkbox - Checkbox not showing up when the grid initially paints

Basically, I have a telerik MVC3 razor grid with a ClientTemplate column that consists of a checkbox. When the page loads initially, the checkbox is not there - instead it is what I want the value of the checkbox to be. However, when ajax is fired (such as grouping columns together), the checkbox shows with no problem.

I don't really understand the solution to the thread I pasted above....so maybe that is the answer and I just don't know how to call the grid's constructor. Here's the code I have:

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()));
        }

score 6 · Accepted Answer · answered Aug 02 '11 at 20:55

You are initially binding to server data so you will need a server template as well as a client template:

@(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)
    )

Thank you so much! That worked perfectly! Here's a link to the Template field that navigated me towards the final code I needed: http://demos.telerik.com/aspnet-mvc/razor/grid/templatesserverside — vcuankit, Aug 02 '11 at 21:06
Ha yeah, I had to look at that page for reference. I haven't worked with Telerik MVC in a while. — John Kalberer, Aug 02 '11 at 21:23

score 1 · Answer 2 · edited Oct 05 '12 at 03:01

1

Another snippet for Razor syntax: CheckBox can editable after click edit.

.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  />");

edited Oct 05 '12 at 03:01

McGarnagle

101,349
31
229
260

answered Oct 03 '12 at 03:44

Kiro64

11
1

score 0 · Answer 3 · answered Aug 11 '15 at 12:17

@McGarnagle's syntax doesn't work for me. Here's mine that works:

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

Telerik MVC Grid ClientTemplate checkbox not displayed initially

3 Answers3

Linked