I am using Kendo ui Grid in MVC (ASP.NET) Project, I want to change the grid column header(title) base on data which es from database and also change the field value in javascript. I have below code for binding the 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=ApprovePartplete('#:TRPartUnitId#','approve'); value='Approve'/>  <input class='k-button k-button-icontext k-grid-AddFeedback'type='button' onclick=ApprovePartplete('#:TRPartUnitId#','reject'); value='Reject'/><span>#} #",
        },
    ]
});

I have to change "title" dynamically as per "TestFrequency" value and also change its "field". Please let me help for it.

thanks,

I am using Kendo ui Grid in MVC (ASP.NET) Project, I want to change the grid column header(title) base on data which es from database and also change the field value in javascript. I have below code for binding the 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=ApprovePartplete('#:TRPartUnitId#','approve'); value='Approve'/>  <input class='k-button k-button-icontext k-grid-AddFeedback'type='button' onclick=ApprovePartplete('#:TRPartUnitId#','reject'); value='Reject'/><span>#} #",
        },
    ]
});

I have to change "title" dynamically as per "TestFrequency" value and also change its "field". Please let me help for it.

thanks,

• javascript
• jquery
• asp-mvc

2 Answers 2

You can use jquery to change the column title.

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

To change the header title of the kendo grid you can use two approaches

$("#grdDynamicCol thead [data-field=Src] .k-link").html("New Source")

or

$("#grdDynamicCol th[data-field=Dest]").html("New Destination")