This is a migrated thread and some comments may be shown as answers.

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

6 Answers 184 Views
Grid
This is a migrated thread and some comments may be shown as answers.
BigzampanoXXl
Top achievements
Rank 1
BigzampanoXXl asked on 01 Feb 2013, 09:30 AM
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.

6 Answers, 1 is accepted

Sort by
0
BigzampanoXXl
Top achievements
Rank 1
answered on 04 Feb 2013, 06:34 PM
@kendo-team: Any news on the bug? Is it reproduceable for you or do you need a sample application?
0
BigzampanoXXl
Top achievements
Rank 1
answered on 04 Feb 2013, 07:27 PM
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 :)
0
Daniel
Telerik team
answered on 05 Feb 2013, 08:39 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
BigzampanoXXl
Top achievements
Rank 1
answered on 05 Feb 2013, 05:16 PM
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.
0
Jacques
Top achievements
Rank 1
answered on 14 Sep 2013, 05:38 PM
Hi BigzampanoXXl,

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

Thanks
0
Daniel
Telerik team
answered on 18 Sep 2013, 07:43 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
BigzampanoXXl
Top achievements
Rank 1
Answers by
BigzampanoXXl
Top achievements
Rank 1
Daniel
Telerik team
Jacques
Top achievements
Rank 1
Share this question
or