IE 8 Bug: Column Resize Handle not showing on dynamic Grid Columns

[BigzampanoXXl]

I have a grid which columns are dynamically created on runtime. The grid renders fine, but I cannot resize the grid columns in Internet Explorer 8, because the resize handle icon is not shown. There is no problem in IE 9 or in any other browser.

When I use a static grid (column are defined in the razor view) the column resizing works fine also in IE 8. So the combination of dynamic grid columns and IE 8 causes the bug.

Here is the code I use in my razor View to define the dynamic grid:

@{

    string controller = ViewContext.GetCurrentController();

    string action = ViewContext.GetCurrentAction();

    string methodName = "_GetNewGridRows" + "_" + action;

 

    WFObjectListViewModel objectListViewModel = Model;   

}

 

@(Html.Kendo().Grid(objectListViewModel.ObjectDataList)

    .Name("Grid_" + objectListViewModel.UniqueID)

    .Columns(columns =>

    {

        columns.Bound(c => c.ID)

            .Hidden(true)

            .Title("wfID");

 

        columns.Bound(c => c.AspSite)

            .Hidden(true)

            .Title("aspSite");

 

        for (int i = 0; i < objectListViewModel.FolderColumns.Count; i++)

        {

            var id = i;

            var itemAttributesId = id + 2;

 

            if (objectListViewModel.FolderColumns[i].Type == "text")

            {

                string template = null;

                 

                if (Model.FolderColumns[i].ColumnName == "subject")

                {

                    string wfID = "\"#=ItemAttributes[" + 0 + "]#\"";

                    string aspSite = "\"#=ItemAttributes[" + 1 + "]#\"";

                    string jsOpenWindow = "javascript:openWindow(" + wfID + ", " + aspSite + ")";

                     

                    template = string.Format("<a href='{0}' style='white-space: nowrap;'>{1}</a>", jsOpenWindow, "#=ItemAttributes[" + itemAttributesId + "]#");

                }

                else

                {

                    template = string.Format(Model.FolderColumns[id].Template, "#=ItemAttributes[" + itemAttributesId + "]#");

                }

                                 

                columns.Bound(c => c.ItemAttributes)

                        .ClientTemplate("#=gridClientTemplate(Unread, 'begin')#" + template + "#=gridClientTemplate(Unread, 'end')#")

                        .Title(Model.FolderColumns[id].ColumnDisplayName)

                        .Hidden(Model.FolderColumns[i].Hidden)

                        .Column.Member = Model.FolderColumns[id].ColumnUniqueName;

 

            }

            else if ((Model.FolderColumns[id].Type == "image") || (Model.FolderColumns[id].Type == "deadline") || (Model.FolderColumns[id].Type == "bit"))

            {                  

                int columnWidth = 22 + (Model.FolderColumns[id].ColumnDisplayName.Length * 5);

                columns.Bound(c => c.ItemAttributes)

                    .ClientTemplate("#=gridClientTemplate(Unread, 'begin')#" + string.Format(Model.FolderColumns[id].Template, "#=ItemAttributes[" + itemAttributesId + "]#") + "#=gridClientTemplate(Unread, 'end')#")

                    .Title(Model.FolderColumns[id].ColumnDisplayName)

                    .Width(columnWidth)

                    .Hidden(Model.FolderColumns[i].Hidden)

                    .Column.Member = Model.FolderColumns[id].ColumnUniqueName;

            }

        }

    })

    .EnableCustomBinding(true)

    .DataSource(dataSource => dataSource.Ajax()

        .Read(read => read.Action(methodName, controller, new { folderID = Model.FolderID, searchFilterJson = ViewData["hiddenSearchFilter_Data"] }))       

        .PageSize(Model.EntriesPerPage)

        .Total(Model.TotalItems)

    )

    .Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))

    .Selectable()

    .Scrollable()   

    .Resizable(resizing => resizing.Columns(true))

    .Events(events => events.DataBound("onObjectDataListBound_" + controller + "_" + action))

    .Pageable(pageing => pageing.Enabled(true).Refresh(Model.AllowGridRefresh).Input(true).Numeric(false).PreviousNext(true).PageSizes(new int[] {3, 5, 10, 15, 25, 50, 75, 100 }))

)

Any idea how I can get the resizing handle shown when I move over the columns in IE 8? Updating to IE 9 is not a solution for me, because the customer is forced to use IE 8. Thanks.

[BigzampanoXXl]

@kendo-team: Any news on the bug? Is it reproduceable for you or do you need a sample application?

[BigzampanoXXl]

After more searching on the web I found a similar post (on the Telerik forum) which gave me the solution for this IE 8 bug. Here is the post:

http://www.telerik.com/community/forums/aspnet-mvc/grid/resizing-does-not-work-correctly-in-ie8-where-there-is-a-hidden-column.aspx

The problems are the hidden columns. If you have a hidden column in the grid, you can't resize all other columns after the hidden column. That is a very nasty bug, so please Kendo-UI team make a fix for it. Thanks :)

[Daniel]

Hi,

This is a known issue that should be fixed in the latest release. Please update the version you are using and let me know if the columns still cannot be resized in IE 8.
If you are already using the latest version then please send a runnable project so I can check what is going wrong.

Regards,
Daniel
the Telerik team

[BigzampanoXXl]

Hello Daniel,

thanks for reply. That are good news that the bug should be fixed in the latest Release.
Unfortunately I can't update, cause of this new bug (IE 8 TreeView) in the latest Kendo UI Release:
http://www.kendoui.com/forums/mvc/treeview/treeview-q3-2012-new-bug-with-ie-9---gt-node-selection.aspx

Once that IE 8 TreeView bug is fixed, I will update and report back. Thanks.

[Jacques]

Hi BigzampanoXXl,

I also need to dynamically load columns, can you please upload a sample project or the model classes for this example?

Thanks

[Daniel]

Hi,

You could use the LoadSettings column functionality in order to load the columns dynamically. A runnable demo(Column Settings) is available in the examples project that is included with the installation([Installation Folder] > wrappers > aspnetmvc > Examples folder). An alternative is to iterate over a collection of custom classes(or a collection of strings with the property names) and use the overload of the Bound column that accepts a string.

Regards,
Daniel
the Telerik team