[Solved] Group a Column Template

[Conrad Salazar]

I have been trying to come up with a way to add a checkbox to a grouped row. Does the grid control support making a column template groupable? If not please suggest other possibilities of performing this task. I am using the following code that corresponds to the attached screen shot. The screen shot ilustrates the line where I need to add the checkbox. Thank you.

<% Html.Telerik().Grid(Model.RequiredInspectionTypeDocuments)
      .Name("inquiry")
      .DataKeys(keys =>
      {
          keys.Add(o => o.InspectionDocument.BuildingInspectionDocumentID);
      })
     .Columns(columns =>
      {
          columns.Bound(o => o.DocumentName).Title("Document").Width(200);
          columns.Bound(o => o.InspectionDocument.DocumentReceivedDate).Format("{0:MMM/dd/yyyy HH:mm:ss}").Title("Received Date").Width(200);
            columns.Template(o =>
            {
                %>
                <input name="checkedRecords"  type="checkbox" value="<%=o.InspectionDocument.BuildingInspectionDocumentID %>"
                    <% if (o.InspectionDocument.IsNecessary.Value) {%>

                    checked="checked"

                    <% } %>
                />
                <%
            }).Title("Necessary").Width(50);
      })
      .Groupable(grouping => grouping.Groups(groups =>
      {
          groups.Add(c => c.BuildingInspectionType);
      }))
    .DataBinding(dataBinding => dataBinding
        //Server binding
        .Server()
        //Action method
        .Select("InquirePermit", "InquirePermit", new { TabIndex = 3 }))
    //.Pageable()
    .Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.InspectionType.BuildingInspectionTypeDescription).Descending()))
    //.Scrollable()
    .Render();
%>

[Atanas Korchev]

Hello Conrad Salazar,

 Unfortunately this is not possible. Only the value of the column is used during grouping. The template is not shown. A possible workaround is to use jQuery to insert the checkboxes when the grid is loaded.

Regards,
Atanas Korchev
the Telerik team

[Conrad Salazar]

Atanas:

Thank you for the quick response. Would you happen to have a sample that I can leverage to perform the jQuery insert?

[Atanas Korchev]

Hi Conrad Salazar,

 You can try this:

<%= Html.Telerik().Grid()
 .ClientEvents(e => e.OnLoad("onLoad"))
%>

<script type="text/javascript">
function onLoad() {
    $('.t-grouping-row > td', this).each(function() {
        $(this).find('.t-icon').after('<input type="checkbox" />');
    });
}
</script>

All the best,
Atanas Korchev
the Telerik team