[Solved] Add new columns with Javascript

[Simon]

Hi,

I am trying to use Javascript to add new columns to my grid. I am using Javascript to bind, and I need to generate dynamic columns based on the result set. I have successfully added columns to the grid, but the headers do not appear and the paging summary ("Displaying items 41 - 48 of 48") does not appear under the new columns.

Here's my grid. I'm doing my own Ajax binding based on when a user clicks a Refresh button, so both binding methods are commented out. I manually make my own Ajax call and databind when user clicks Refresh:

Html.Telerik().Grid<TaskDetail>()
.Name("Grid")
.PrefixUrlParameters(false)
//.DataBinding(db => db.Server().Select("Monitor", "NovationConsent"))
//.DataBinding(db => db.Ajax().Select("MonitorCustomBinding", "NovationConsent"))
.ClientEvents(events =>
                  {
                      events.OnRowDataBound("onRowDataBound");
                      events.OnDataBinding("onDataBinding");
                      events.OnLoad("onGridLoad");
                  })

.Columns(columns =>
             {
                 columns.Bound(c => c.TaskRequestId).Title("Task ID")
                     .Width(50);
                 columns.Bound(c => c.CreatedDate).Title("Created Date")
                     .HtmlAttributes(new { style = "text-align:right" })
                     .Format("{0:dd MMM yyyy}")
                     .Width(100);
                 columns.Bound(c => c.ApplicationName).Title("Application");
                 columns.Bound(c => c.TaskTypeName).Title("Task Type");
                 columns.Bound(c => c.ResolvedBy).Title("Status");
             })
.Pageable()
//.Sortable(sort => sort.SortMode(GridSortMode.SingleColumn))
.Filterable(filter => filter.Enabled(false))
.Scrollable(scrolling => scrolling.Enabled(false))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
.Render();

After I get the data from the Ajax call, and before I bind, I need to add the new columns and headers to the grid as follows:

function GetAttributeColumnIndices() {
    //debugger;

    var attribIndices = new Array();
    var numberOfAttributes = 0;

    if ((gridData != null) && (gridTotal > 0))
    {
        //loop through all rows and find all the unique attributes
        for (var i = 0; i < gridPageSize; i++) {
            var taskDetail = gridData[i];

            if ( (taskDetail != null) && (taskDetail.AggregationAttribute) ) {
                var attributes = taskDetail.Attributes;

                //store the index that each attribute column will have
                for (var attributeName in attributes) {
                    if ((attributeName != null) && (attribIndices[attributeName] == null)) {
                        attribIndices[attributeName] = numberOfOriginalColumns + numberOfAttributes++;
                    }
                }
            }
        }
    }

    //alert("Found " + numberOfAttributes + " attributes to create columns for.");
    //debugger;

    return attribIndices;
}


function AddAttributeColumns(attribIndices)
{
    //debugger;

    //var grid = $("#Grid").data('tGrid');
    var columns = grid.columns;
    var header = grid.$header[0];

    for (var attrib in attribIndices) {

        //make a copy of an existing text column
        var oldHeaderCell = header.cells[0];
        var oldColumn = columns[TEXT_COLUMN_INDEX];    //get the index of a column that contains text data

        //make a deep copy of this column to use as a new column
        var newHeaderCell = jQuery.extend(true, {}, oldHeaderCell);
        var newColumn = jQuery.extend(true, {}, oldColumn);

        //set properties according to attribute
        newHeaderCell.innerHTML = attrib;
        newHeaderCell.innerText = attrib;
        newColumn.title = attrib;
        newColumn.member = attrib;

        //add the new column
        var newColumnIndex = attribIndices[attrib];
        header.cells[newColumnIndex] = newHeaderCell;
        columns[newColumnIndex] = newColumn;
    }

}

I then use the onRowDataBound event to populate the values into the new columns. This part works. It's just that it doesn't look acceptable because the headers don't appear and the footer under the new dynamic columns is messed up too.

Please see attached screenshot.

Thanks,
Simon.

[Simon]

Any ideas? I am having to abandon the Telerik control for now and try out jqGrid. If anyone has a way to modify the grid header and footer using Javascript please let me know and I will have another go with Telerik.

regards,
Simon.