Add Label to Select All checkbox in Grid Header

[Jason]

I have a kendo grid in an mvc view that I'm using check boxes to select multiple records.  I need to add a "Select All" label to the checkbox in the header that is used for selecting all records.  Is there a header template that I can use to accomplish that or is this only able to be done through javascript and dom manipulation?  Here's my grid:

 

@(Html.Kendo().Grid(Model.ResultFiles)
          .Name("ResultsGrid")
          .Columns(columns =>           {
              columns.Select().Width(50);
              columns.Bound(r => r.Id).Hidden();
              columns.Bound(r => r.SomeNumber).Title("Some Number").Filterable(f => f.Cell(cell => cell.ShowOperators(false))).ClientTemplate("#= SomeNumber# # if(!Viewed) { # <span id='unread-#= Id #' class='badge new-results'>New</span> # } #");
              columns.Bound(r => r.Name).Title("Person").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
              columns.Bound(r => r.DateOfBirth).Title("Date of Birth")
                  .ClientTemplate("#= DateOfBirthAsString#")
                  .Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
              columns.Bound(r => r.CompanyName).Hidden();
              columns.Bound(r => r.SomeOtherName).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
              columns.Bound(r => r.DisplayName).Title("Clinic").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));
              columns.Bound(r => r.EntryDateAsString).Title("Collection Date").Filterable(false);
              columns.Bound(r => r.ReportGuid).Hidden(true);
          })
          .ToolBar(t => t.Template(@<text><label>Search By Collection Date Range:</label>                                        <div class="row">                                            <div class="col-md-3">@Html.Kendo().DatePicker().Name("startSearch").HtmlAttributes(new { PlaceHolder = "Start Date..." })</div>                                            <div class="col-md-3">@Html.Kendo().DatePicker().Name("endSearch").HtmlAttributes(new { PlaceHolder = "End Date..." })</div>                                            <div class="col-md-1"><button class="k-button" type="button" onclick="filterGrid()" style="width: 100%">Search</button></div>                                            <div class="col-md-1"><button class="k-button" type="button" onclick="resetFilter()" style="width: 100%">Reset</button></div>                                            <div class="col-md-1"><button class="k-button" type="button" onclick="downloadFiles()" style="width: 100%">Download</button></div>                                        </div></text>))
          .Pageable(p => p.PageSizes(new int[] { 10, 25, 50, 100 }))
          //.Selectable(p => p           //    .Mode(GridSelectionMode.Multiple)           //    .Type(GridSelectionType.Cell))           .Sortable()
          .Filterable(ftb => ftb.Mode(GridFilterMode.Row)
              .Operators(o => o
                  .ForString(str => str.Clear()
                      .Contains("Contains")
                  )
              )
          )
          .DataSource(dataSource => dataSource
              .Ajax()
              .Sort(sort => sort.Add("EntryDate").Descending())
              .Read(read => read.Action("Search", "Reports"))
              .PageSize(10)
              .Model(model=>model.Id(p=>p.ReportGuid))
          )
          .PersistSelection()
          .Events(e => e

              .DataBound("onDataBound")

          )
          )

[Tsvetomir]

Hi Jason,

The custom text could be added by finding the specific checkbox's label and appending text to it. It could be accessed in the DataBound event handler as follows: 

<script>
    function dataBound(e) {
        var label = e.sender.element.find(".k-grid-header .k-checkbox-label.k-no-text"); // Find the element
        if (label) {
            label.removeClass("k-no-text");
            label.html(label.html() + "Select All"); // Append the custom text
        }
    }
</script>

Since you have already subscribed to the DataBound event, I am pasting only its handler. 

I hope this proves helpful.


Kind regards,
Tsvetomir
Progress Telerik

[Jason]

That worked.  Trying to get the label to appear above and centered over the checkbox.  Everything I'm trying is being overridden by the kendo css classes.  Is there a way to do that without removing all the kendo stying?

[Tsvetomir]

Hi Jason,

Since the approach suggested in my previous response does not create a new element but rather appends text to an existing one, issues with the positioning of the checkbox and the text might occur. Another strategy would be to prepend a new element which contains the text. 

function dataBound(e) {
    var label = e.sender.element.find(".k-grid-header .k-checkbox-label.k-no-text");
    if (label) {
        var newlabeltext = $("<p>Select All</p>");
        label.parent().prepend(newlabeltext);
        newlabeltext.on("click", function () {
            this.nextSibling.click();
        })
    }
}

Note that, the click event is added in order to alternate the check state of the checkbox when a user clicks on the text. 


Regards,
Tsvetomir
Progress Telerik