Change column title in dynamic grid

4 posts, 0 answers
  1. Steve
    Steve avatar
    7 posts
    Member since:
    Jun 2013

    Posted 10 Oct Link to this post

    Hi all,

    I've a dynamic grid (no columns defined). I want to allow the user to change the text in the column header. Ideally, I'd like the user to click the column menu, select Rename. A modal will appear prompting them for the new column title. They enter text, click OK, and that title is applied to the selected column. Any thoughts how I can achieve that?

    If it's any help, below is my Razor code that generates the grid.

    Thanks in advance!

    Steve.

    @(Html.Kendo().Grid<dynamic>()
                .Name("StandardTable_" + Model.InstanceKey)
                .ToolBar(toolbar =>
                {
                toolbar.Template(@<text>
                    @ToolbarTemplate()
                    </text>);
                })
                .Resizable(resize => resize.Columns(true))
                .Pageable(pageable => pageable
                    .Input(true)
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5)
                    .Enabled(true)
                    .Numeric(false)
                ).ColumnMenu()
                .Sortable(s => s.SortMode(GridSortMode.MultipleColumn).AllowUnsort(true))
                .Filterable()
                .Groupable()
                .Reorderable(reorder => reorder.Columns(true))
                .EnableCustomBinding(true)
            .Events(m => m.DataBound("pan.dashDatapart.getGridState(" + Model.DataPart?.DatapartKey + "," + Model.InstanceKey + ")"))
            .DataSource(d => d
                .Ajax()
                .PageSize(pageSize)
                .Read(read => read
                    .Action("StandardTableRead", "DashDataparts").Data("pan.dashDatapart.StandardGridRead(" + Model.DataPart?.DatafeedKey + "," + Model.InstanceKey + ")")
                )
            )
    )

     

     

     

  2. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 12 Oct Link to this post

    Hi Steve,

    Basically you can set the column title dynamically using jQuery to find the current column header and replace it's text. Please check the example below for CustomerNumber column:

    //replace "grid" with your grid id
    $("#grid thead [data-field=CustomerNumber] .k-link").html("NewTitle")

    In order to change it by using the column menu you can hook on ColumnMenuInit event handler, add an element which will fire a script that will change the name. Please check out the following code snippet.
    .Events(e=>e.ColumnMenuInit("menuInit"))
    function menuInit(e)
    {
        var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
                       '<span onclick=\'changeTitle("' + e.field + '");\' class="k-link"><b>ChangeTitle</b></span></li>';
        $(e.container).find("ul").append(itemHtml);
    }
     
    function changeTitle(field)
    {
        $("#grdData thead [data-field=" + field + "] .k-link").html("New Title " + field)
    }

    I hope this information helps.

    Regards,
    Kostadin
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Steve
    Steve avatar
    7 posts
    Member since:
    Jun 2013

    Posted 18 Oct in reply to Kostadin Link to this post

    Took me a while to circle back around to this, but thanks! It works great!! I ran into another issue - I'm saving those custom names to a database and then reloading them when the user loads the grid back up. However, I'm having some timing issues. Since it's sorta a different topic, I started a new thread with the title of "Databound event firing before Datasource.Read".

    Anyway, thanks again for the help!

    Steve.

  5. Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 20 Oct Link to this post

    Hi Steve,

    I will close this ticket and we can continue our conversation in the other one in order to avoid duplicating threads.

    Regards,
    Kostadin
    Telerik by Progress
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready