Dynamic Column Titles

6 posts, 0 answers
  1. Phillip
    Phillip avatar
    3 posts
    Member since:
    Feb 2011

    Posted 09 May 2012 Link to this post

    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>
     }
  2. TISAL
    TISAL avatar
    8 posts
    Member since:
    Dec 2013

    Posted 13 May 2015 in reply to Phillip Link to this post

    I do it using jquery:

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

     

     

  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 18 May 2015 Link to this post

    Hello guys,

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

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Yousung
    Yousung avatar
    4 posts
    Member since:
    Dec 2015

    Posted 31 Mar 2016 in reply to TISAL Link to this post

    I changed column header titles. but,

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

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 01 Apr 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Yousung
    Yousung avatar
    4 posts
    Member since:
    Dec 2015

    Posted 01 Apr 2016 in reply to Dimiter Madjarov Link to this post

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