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

7 posts, 0 answers
  1. BigzampanoXXl
    BigzampanoXXl avatar
    66 posts
    Member since:
    Jan 2007

    Posted 01 Feb 2013 Link to this post

    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.
  2. BigzampanoXXl
    BigzampanoXXl avatar
    66 posts
    Member since:
    Jan 2007

    Posted 04 Feb 2013 Link to this post

    @kendo-team: Any news on the bug? Is it reproduceable for you or do you need a sample application?
  3. BigzampanoXXl
    BigzampanoXXl avatar
    66 posts
    Member since:
    Jan 2007

    Posted 04 Feb 2013 Link to this post

    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 :)
  4. Daniel
    Admin
    Daniel avatar
    2214 posts

    Posted 05 Feb 2013 Link to this post

    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!
  5. BigzampanoXXl
    BigzampanoXXl avatar
    66 posts
    Member since:
    Jan 2007

    Posted 05 Feb 2013 Link to this post

    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.
  6. Jacques
    Jacques avatar
    6 posts
    Member since:
    Jul 2012

    Posted 14 Sep 2013 Link to this post

    Hi BigzampanoXXl,

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

    Thanks
  7. Daniel
    Admin
    Daniel avatar
    2214 posts

    Posted 18 Sep 2013 Link to this post

    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!
Back to Top