kendo grid title change

Question

I am trying to change the title of the kendo grid.

However when i do the below on change event the filtering doesn't work for that column. I have a sample code here to replicate the issue in jsfiddle: http://jsfiddle.net/nLn5b/4/

$("#change").on("click", function() {
$("#grid th[data-field=FirstName]").html("<a tabindex='-1' class='k-grid-filter'     href='#'><span class='k-icon k-filter'></span></a>MiddleName")
})

var grid = $("#grid").kendoGrid({
dataSource: {
    data    : createRandomData(10),
    pageSize: 5,
    schema  : {
        model: {
            fields: {
                Id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City     : { type: 'string' }
            }
        }
    }
},
editable  : false,
pageable  : true,
filterable: true,
columns   : [
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 90, title: "Last Name" },
    { field: "City", width: 100 }
]
}).data("kendoGrid");

Thanks for any help.

Answer 1

I believe it is more clear this way:

$("#grid th[data-field=FirstName]").html("MiddleName");

Answer 2

Why do you want to change the title in runtime instead of while creating it? Anyhow, you can do it using:

$("#change").on("click", function() {
    $("#grid th[data-field=FirstName]").contents().last().replaceWith("MiddleName");
});

Your JSFiddle modified here: http://jsfiddle.net/OnaBai/nLn5b/5/