Generate an onClick event on Grid header in JQuery or JavaScript

Question

I have this KendoUI grid for which I would like to add a click event to its header row, and get the text value of the clicked cell:

@(Html.Kendo()
      .Grid<Timeshet.Web.Models.UserWeekModel>()
      .Name("grid")
      .Sortable(sortable => sortable.AllowUnsort(false))
      .Columns(columns =>
      {
              columns.Bound(t => t.Name);//.ClientTemplate("#=Name#" + " " + "<div class='jobDescriptionInfo-img' onclick='showDescription()' title='Job Description' >&nbsp;</div>");
              columns.Bound(t => t.JobDescription).Visible(false);
              columns.Bound(t => t.LastFri).ClientTemplate("#=LastFri#").HtmlAttributes(new { @class = "last-week" }).Hidden().Sortable(false);
              columns.Bound(t => t.Monday).ClientTemplate("#if (Monday.HasNotes) {#" + "#=Monday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Monday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Monday.Style#" });
              columns.Bound(t => t.Tuesday).ClientTemplate("#if (Tuesday.HasNotes) {#" + "#=Tuesday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Tuesday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Tuesday.Style#" });
              columns.Bound(t => t.Wednesday).ClientTemplate("#if (Wednesday.HasNotes) {#" + "#=Wednesday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Wednesday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Wednesday.Style#" });
              columns.Bound(t => t.Thursday).ClientTemplate("#if (Thursday.HasNotes) {#" + "#=Thursday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Thursday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Thursday.Style#" });
              columns.Bound(t => t.Friday).ClientTemplate("#if (Friday.HasNotes) {#" + "#=Friday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Friday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Friday.Style#" });
              columns.Bound(t => t.Saturday).ClientTemplate("#if (Saturday.HasNotes) {#" + "#=Saturday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Saturday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Saturday.Style#" });
              columns.Bound(t => t.Sunday).ClientTemplate("#if (Sunday.HasNotes) {#" + "#=Sunday.Name#" + " " + "<div class='project-note-img' title='Project Notes' >&nbsp;</div>" + "#}else{#" + "#=Sunday.Name#" + "#}#").Sortable(false).HtmlAttributes(new { @Class = "#=Sunday.Style#" });
              columns.Command(command => command.Custom("Job Description").Click("showDescription"));
      })
      .Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
                 .DataSource(source => source.Ajax()
                 .Batch(true)
                 .Model(model => model.Id("UserId"))
                 .Read(read => read.Action("GetData", "Home").Data("additionalData"))
                 .Update(update => update.Action("UpdateData", "Home").Data("additionalData")
                 ).Events(events => events.RequestEnd("onRequestEnd"))
                 ))

I have tried to do the following on document.ready but it doesn't seem to be working:

var titles = $("#grid thead tr th");

for (var i = 0, len = titles.length; i < len; i++)
{
    titles[i].addEventListener("click", function() {
        alert(this.innerHTML);
    }, false);
}

I also found this solution which is exactly what I want to do but I couldn't really refactor it for my own use as I don't quit know it all: jsFiddle

I wonder how to fire a click event on the grid's header.

This is how the above grid is rendering in the browser as HTML:

Answer 1

Try this jquery Code:

$(document).on("click", "th[role='columnheader']", function () {
    alert($(this).text());
});

Answer 2

This is the CSS Selector for the table header, if you substitute it into Vinod's solution it works. All kendo controls use some form of .k-whatever

.k-grid table th
{  
    text-align: center !important;      
}    


$(document).on("click", ".k-grid table th", function () {
    alert($(this).text());
});