[Solved] Checkbox behaviour is strange

[Shane P]

I am having an issue with the grid and need some help. I thought i had it sorted but not

I am trying to get a checkbox to work on initial load and also paging but with no luck

@{Html.Telerik().Grid(Model)
        .Name("Grid")
        .Selectable()
          .ToolBar(toolBar => toolBar.Template(
    @<text>
    <label class="customer-label" for="Customers-input">
        Select Customer:
    </label>
    <input id="customer-selector" class="kendo-dd" />
    <button id="apply-selected" class="k-button">
        Apply</button>
    <button id="save-changes" class="k-button">
        Save Changes</button>
    </text>))

        .Columns(columns =>
        {
            columns.Bound(o => o.id)
                .ClientTemplate(

                         "<input type='checkbox' name='checkedRecords' value='@item.id' title='checkedRecords' />"

                         )
                .Title("<input type='checkbox' class='select-all'/>").Width(36);

        columns.Template(
                @<text>
                    <input name="checkedRecords" type="checkbox" value="@item.id " title="checkedRecords"/>
                </text>)
                .Title("<input type='checkbox' class='select-all'/>").Width(36);
            columns.Bound(o => o.name).Title("Name").Width(130);
            columns.Bound(o => o.sku).Title("SKU").Width(160);
            columns.Bound(o => o.tags).Title("Tags").Width(60);
            columns.Bound(o => o.supplier_name).Title("Supplier").Width(90);
            columns.Bound(o => o.brand_name).Title("Brand Name").Width(90);
        })
       .DataKeys(keys =>
       {
           keys.Add(p => p.id);
       })

        .DataBinding(dataBinding => dataBinding
           .Ajax()
           .Select("_GetProducts","Products", new { id = (string)ViewData["id"] })

        )
        .Scrollable()
        .Sortable()
        .Pageable(paging =>
            paging.PageSize(250)
                  .Style(GridPagerStyles.NextPreviousAndNumeric)
                  .Position(GridPagerPosition.Bottom)
        )

        .Filterable()
        .Groupable(grouping => grouping.Enabled(true))
        .Footer(true)
        .Render();
}

You will see that I have the client template and also column template added. 

When the grid loads the client template renders out the value of the checkbox not the actual checkbox
The column template loads correctly.

When I page the client template renders correctly however the column template disappears. 

 Can anyone help out on this? its driving me nuts

[Daniel]

Hello Shane,

The code you sent seems correct. The only thing that may be causing problems is that you are using Razor syntax to access the value in the ClientTemplate:

columns.Bound(o => o.id)
            .ClientTemplate("<input type='checkbox' name='checkedRecords' value='@item.id' title='checkedRecords' />")

Instead, you should be using a client-side expression syntax to access the value e.g.

columns.Bound(o => o.id)
            .ClientTemplate("<input type='checkbox' name='checkedRecords' value='<#= id #>' title='checkedRecords' />")

However, this shouldn't be causing the problems you wrote about. Could you send a sample project so I can check the exact setup?

Regards,
Daniel
the Telerik team

[Shane P]

Hi Daniel,

Please find attached an example that has the same problem.


Thanks
Shane

[Shane P]

After starting again I found the problem.

I needed to add the Template to the bound column and also provide the clienttemplate for ajax paging.

.Columns(columns =>
         {
          columns.Bound(o=>o.id).Template(
          @<text>
           <input name="checkedRecords" type="checkbox" value="<#= id #>" title="checkedRecords" />
           </text>).ClientTemplate(
                  "<input name='checkedRecords' type='checkbox' title='checkedRecords' />"
                        ).Sortable(false).Filterable(false)
              .Title("<input type='checkbox' class='check-all'/>").Width(36);