Change column title in dynamic grid

[Steve]

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 + ")")
            )
        )
)

 

 

 

[Kostadin]

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

[Matej]

Thanks, after removing .k-link, it works on my example

[Steve]

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.

[Kostadin]

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