Dynamic Column Titles

[Phillip]

I an posting this fully functional code to help others with the issue. The code below sets the column titles with a dynamic variable that is set based on FunctionalBusinessArea.

@model SPI.UI.View.Models.RecordingDetails
@{
    //Dynamically set the grid column labels based on functional business area.
    var colProgram = string.Empty;
    var colTeritoryName = string.Empty;
    var colParty = string.Empty;
    var colCatalog = string.Empty;


    if (ViewBag.FunctionalBusinessArea == "Song")
    {
        colProgram = @WorkRes.GridWCIColProgram;
        colTeritoryName = @WorkRes.GridWCIColTerritory;
        colParty = @WorkRes.GridWCIColParty;
        colCatalog = @WorkRes.GridWCIColCatalog;
    }
    else if (ViewBag.FunctionalBusinessArea == "Product")
    {
        colProgram = @ProductRes.GridWCIColProgram;
        colTeritoryName = @ProductRes.GridWCIColTeritory;
        colParty = @ProductRes.GridWCIColParty;
        colCatalog = @ProductRes.GridWCIColImprint;
    }
    else if (ViewBag.FunctionalBusinessArea == "Recording")
    {
        colProgram = @RecordingRes.GridWCIColProgram;
        colTeritoryName = @RecordingRes.GridWCIColTeritory;
        colParty = @RecordingRes.GridWCIColParty;
        colCatalog = @RecordingRes.GridWCIColRecordingLabel;
    }


<div>
    <div class="section-title">Who controls it?</div>
    <table id="tblDerivedCreationRights"></table>
</div>


    <script type="text/javascript">
        $(document).ready(function () {
            $("#tblDerivedCreationRights").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "/Song/SongDerivedCreationRights/@Model.Recording.Id.ToString()"
                    },
                    schema: {
                        model: {
                            fields: {
                                ProgramId: { type: "string" },
                                TerritoryName: { type: "string" },
                                PrimaryPartyName: { type: "string" },
                                PrimaryRightshareSetName: { type: "string" }
                            }
                        }
                    },
                    pageSize: 100,
                    serverPaging: false,
                    serverSorting: true
                },
                scrollable: true,
                sortable: { mode: "single", allowUnsort: false },
                pageable: false,
                columns: [
                    { field: "ProgramId", title: '@colProgram', width: 75 },
                    { field: "TerritoryName", title: '@colTeritoryName', width: 100 },
                    { field: "PrimaryPartyName", title: '@colParty', width: 100, template: '<a href="/Party/Details?id=#=PartyId#">#=PrimaryPartyName#</a>' },
                    { field: "PrimaryRightshareSetName", title: '@colCatalog', width: 200, template: '<a href="/RightshareSet/Details?id=#=RightshareSetId#">#=PrimaryRightshareSetName#</a>' }
                    //{ field: "", title: "", template: "" }
                ]
            });
        });


    </script>
 }

[TISAL]

I do it using jquery:

$("#myGrid th[data-field=MyDataField]").html("NewName");

 

 

[Dimiter Madjarov]

Hello guys,

Thank you for sharing the approaches with the community. Have a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[Yousung]

I changed column header titles. but,

when I tried to export excel file, the OLD titles were still there on the sheet.

[Dimiter Madjarov]

Hello Yousung,

This is expected, the current modification only changes the title in the DOM, while the Excel export retrieves it from the Grid configuration. In this case you could attach a handler to the excelExport event of the Grid and manually modify the headers in the exported workbook. Here is a small example of this.

Regards,
Dimiter Madjarov
Telerik

 

 

[Yousung]

That works perfect! Thank you so much, Dimiter. Have a great weekend~ ^.^