This is a migrated thread and some comments may be shown as answers.

Using checkboxes in Detail Grid of Grid Hierarchy

1 Answer 171 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 09 Oct 2012, 06:47 AM
Good morning everyone,

I am currently using a grid with a hierarchy where in the detail grid, I cannot get the page to render properly when I use checkboxes, that are in readonly mode, to be displayed in a column in the detail grid.  If I do not use the checkboxes, the page renders properly.  I am not sure what I am doing wrong in the detail grid.  I am currently using a licensed version of Kendo UI Complete for ASP.NET MVC (Q2 2012).

I am using "ClientTemplate" method call in the detail grid (the grid in the "WebsiteLanguagesTemplate" script block).  I tried to do many different things but still cannot get it to work

The following is my code:

@model IEnumerable<WebsiteViewModel>
 
@(Html.Kendo().Grid<WebsiteViewModel>()
    .Name("grdAllWebsites")
    .Columns(columns =>
    {
        columns.Bound(o => o.Id)
            .Visible(false);
        columns.Bound(o => o.Name)
            .Width(200);
        columns.Bound(o => o.Type)
            .Width(125);
        columns.Bound(o => o.IsActive)
            .Width(75)
            .Filterable(false)
            .HtmlAttributes(new { style = "text-align: center;" })
            .ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive_#=Id#' id='chkIsActive_#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");
        columns.Command(command =>
        {
            command.Edit().Text(" ");
            command.Destroy().Text(" ");
        })
            .HtmlAttributes(new { style = "text-align: center;" });
    })
    .ClientDetailTemplateId("WebsiteLanguagesTemplate")
    .DataSource(dataSource =>
    {
        dataSource.Ajax()
            .Model(model =>
            {
                // DataKey
                model.Id(o => o.Id);
            })
            .PageSize(15)
            .Read(read => read.Action("Read", "Websites"))
            .Update(update => update.Action("Read", "Websites"))
            .Destroy(destroy => destroy.Action("Read", "Websites"));
    })
    .Events(events =>
    {
        events.Edit("Grid.onEdit");
        events.Remove("Grid.onDelete");
    })
    .Pageable(paging =>
    {
        paging.Numeric(true)
            .Info(true)
            .PreviousNext(true)
            .Refresh(true)
            .Messages(message =>
            {
                message.Empty(AdminResource.Admin_Page_Websites_Grid_NoRecordMsg);
            });
    })
    .Sortable()
    .Filterable()
)
 
<script id="WebsiteLanguagesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<WebsiteLanguageViewModel>()
        .Name("WebsiteLanguages_#=Id#")
        .Columns(columns =>
        {
            columns.Bound(o => o.Id)
                .Visible(false);
            columns.Bound(o => o.Name)
                .Width(200);
            columns.Bound(o => o.Code)
                .Width(50);
            columns.Bound(o => o.IsActive)
                .Width(75)
                .Filterable(false)
                .HtmlAttributes(new { style = "text-align: center;" });
                .ClientTemplate("<input readonly='readonly' type='checkbox' disabled='disabled' name='chkIsActive_#=Id#' id='chkIsActive_#=Id#' #= IsActive? \"checked='checked'\" : \"\" # />");
        })
        .DataSource(dataSource =>
        {
            dataSource.Ajax()
                .Model(model =>
                {
                    // DataKey
                    model.Id(o => o.Id);
                })
                .Read(read => read.Action("Read2", "Websites", new { websiteId = "#=Id#" }));
        })
        .Pageable(paging =>
        {
            paging.Enabled(false)
                .Refresh(false)
                .Messages(message =>
                {
                    message.Empty(AdminResource.Admin_Page_WebsiteLanguages_Grid_NoRecordMsg);
                });
        })
        .Sortable()
        .ToClientTemplate()
    )
</script>

I am struggling a bit on this and really need to have that checkbox column available in the detail grid.

Any help on this matter, is very much appreciated.  

Thank you so much for your help.

1 Answer, 1 is accepted

Sort by
0
Sam
Top achievements
Rank 1
answered on 11 Oct 2012, 07:24 PM
found the answer:

.ClientTemplate("<input type='checkbox' disabled='disabled' name='chkIsActive_\\#=Id\\#' id='chkIsActive_\\#=Id\\#' \\#= IsActive ? \"checked='checked'\" : \"\" \\# />");

you have to escape the escape which in turn escapes the "#" character.  it works.
Tags
Grid
Asked by
Sam
Top achievements
Rank 1
Answers by
Sam
Top achievements
Rank 1
Share this question
or