Dynamically change Kendo ui Grid Column Text and Title Bar

Question

I am using the Kendo ui Grid project in MVC (ASP.NET), I want to change the column header (header) database to the data coming from the database, and also change the field value in javascript. I have a code to snap a kendo ui grid.

detailRow.find("#childGrid").kendoGrid({
    dataSource: partDataSource,
    scrollable: false,
    sortable: true,
    pageable: 
    {
        input: true,
        numeric: false
    },

    columns: [{
            field: "UnitNumber",
            title: "Unit Number",
        },
        {
            field: "SampleNumber",
            title: "Sample Number",
        },
        {
            field: "TotalMiles",
            title: "TestFrequency",

        },
        {
            field: "IsTestCompletedByDriver",
            title: "Part Complete",
            template: "#if( IsPartCompleteApprove==true){#<a href='javascript:return(void)' style='float: left; font-size: 17px;' class='app-btn'>Approved</a>#} else if( IsTestCompletedByDriver==false || MarkTesterComplete==true) {#<input type=\"checkbox\"   name='IsTestCompletedByDriver' #= IsTestCompletedByDriver? 'checked' : '' # disabled  /># }   else {#<span><input class='k-button k-button-icontext k-grid-AddFeedback' type='button' onclick=ApprovePartcomplete('#:TRPartUnitId#','approve'); value='Approve'/>  <input class='k-button k-button-icontext k-grid-AddFeedback'type='button' onclick=ApprovePartcomplete('#:TRPartUnitId#','reject'); value='Reject'/><span>#} #",
        },
    ]
});

I need to dynamically change the "name" according to the value of "TestFrequency", as well as change its "field". Please let me help.

thank,

Answer 1

You can use jquery to change the name of the column.

$("#childGrid th[data-field=TotalMiles]").html("TestFrequency");