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

RADGrid does not re-size on column re-size in chrome browser

5 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JP
Top achievements
Rank 1
JP asked on 10 Jul 2013, 06:21 PM
Hi,

In Google chrome browser, when user increases grid column size on client side, grid does not re size so it does not show right columns and it does not show horizontal scroll bar as well. I use Telerik.Web.UI.dll released on 02-Apr-2013 version 2013.1.403.35. 

HTML page code.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
        //$(document).ready(SetObject);
        $(window).resize(SetRADGrid);
        function SetRADGrid() {
            var grid = document.getElementById(rdgrdGenericReportClientID);
            var windowHeight = $(window).height();
            var windowWidth = $(window).width();
            var gridHeight = 0;
            var contentPageHeight = 510;
            var pageHeaderAndFooter = 125;
            var gridHeader = 75;
            gridHeight = windowHeight - pageHeaderAndFooter < contentPageHeight ? contentPageHeight - gridHeader : windowHeight - gridHeader - pageHeaderAndFooter;
            grid.style.height = gridHeight + "px";
            var webSiteWidth = 1024;
            var submenuWidth = 231;
            var gridWidth = windowWidth < webSiteWidth ? webSiteWidth - submenuWidth : windowWidth - submenuWidth;
            grid.style.width = gridWidth+ "px";
            //grid.repaint();
        }
        function GridCreating(sender, eventArgs) {
            SetRADGrid();
        }
        function ColumnResized(sender, eventArgs) {
            //alert('hi');
            SetRADGrid();
        }       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
    <telerik:RadGrid ID="rdgrdGenericReport" AllowSorting="True" runat="server" GridLines="None"
        AllowPaging="True" PageSize="25"
        AllowFilteringByColumn="True" OnNeedDataSource="rdgrdGenericReport_NeedDataSource"
        OnColumnCreated="rdgrdGenericReport_ColumnCreated" ShowGroupPanel="True"
        EnableLinqExpressions="False" EnableTheming="false" Style="overflow: hidden;
        position: relative">
        <GroupHeaderItemStyle Font-Bold="True" />
        <ClientSettings Resizing-AllowColumnResize="true" AllowDragToGroup="True">
            <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="true"></Resizing>
            <Scrolling AllowScroll="true" />
            <ClientEvents OnGridCreating="SetRADGrid" OnColumnResized="SetRADGrid" />
        </ClientSettings>
        <ExportSettings ExportOnlyData="true" IgnorePaging="true" OpenInNewWindow="true">
        </ExportSettings>
        <MasterTableView ShowHeader="true" BorderStyle="None" CommandItemDisplay="Top" TableLayout="Fixed">
            <HeaderStyle Font-Bold="true"></HeaderStyle>
            <FooterStyle HorizontalAlign="right"></FooterStyle>
            <CommandItemTemplate/>
        </MasterTableView>
        <PagerStyle Mode="NextPrevAndNumeric" />
    </telerik:RadGrid>   
    </div>
    </form>
</body>
</html>

Code behind 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Page.ClientScript.RegisterStartupScript(this.GetType(), "RADGrid", string.Format("rdgrdGenericReportClientID='{0}';", rdgrdGenericReport.ClientID), true);
    }
    protected void rdgrdGenericReport_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        BO bo = new BO();
        rdgrdGenericReport.DataSource = bo.GetStudent();
    }
    protected void rdgrdGenericReport_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        e.Column.HeaderStyle.Width = Unit.Pixel(100);
    }
}
public class BO
{
    public List<Student> GetStudent()
    {
        List<Student> students = new List<Student>();
        for (int counter = 1; counter <= 45; counter++)
        {
            students.Add(new Student(counter.ToString(),
                string.Format("Student({0})", counter),
                string.Format("Class Name A{0}", counter),
                string.Format("Marks 10{0}", counter),
                string.Format("Student Rank is {0}", counter)
                ));
        }
        return students;
    }
}
public class Student
{
    public Student(string id, string name, string className, string marks, string rank)
    {
        ID = id;
        Name = name;
        ClassName = className;
        Marks = marks;
        Rank = rank;
 
    }
    public string ID { get; set; }
    public string Name { get; set; }
    public string ClassName { get; set; }
    public string Marks { get; set; }
    public string Rank { get; set; }
}

Please find attached same sample code without telerik dll.

5 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 15 Jul 2013, 04:20 PM
Hi Jigar,

In your example you set width for the columns in code behind, but the total width of the grid is greater than the total width of all columns, so they re-size to fill all the space and are not 100px wide anymore. This leads to the described behavior. In order to avoid this you can either delete this line:
e.Column.HeaderStyle.Width = Unit.Pixel(100) , or set the RadGrid's width to be equal to the total width of all columns or less.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
JP
Top achievements
Rank 1
answered on 22 Jul 2013, 08:26 PM
Thanks for answer but you misunderstood me.

When grid appears first time(initial load), it looks good (I.e. no horizontal scroll bar appears) because total grid width is greater than sum of all the column widths. After the initial load, when user drags the column border to increase width of any of the columns and causes the sum of column widths to be greater than total width of grid, then the grid fails to show horizontal scroll bar and any column information that has been pushed to the right cannot be seen.

We noticed this issue only in Google Chrome.

0
Venelin
Telerik team
answered on 24 Jul 2013, 05:16 PM
Hello Jigar,

I am sorry for the misunderstanding.

You can easily achieve the desired functionality without any additional scripting, just by setting AllowColumnResize, ResizeGridOnColumnResize and AllowScroll properties to true, as you already did and add the following CSS rule to your page styles:

#rdgrdGenericReport {
    width: 900px !important;
}

This will prevent the grid from changing its width and horizontal scroll bar should appear when the total width of the columns exceeds the width of the grid.

Additionally, I saw some mistakes in the provided code. Firstly the line
var grid = document.getElementById(rdgrdGenericReportClientID); retrieves an html DOM element and stores it into grid variable. After that you try to repaint the grid: grid.repaint() which is not possible and you'll get a javascript error. In order to repaint the grid you need to get its client-side object instead. You can do that either by using the sender object which is internally passed to the event handler SetRADGrid on grid created:

JavaScript:

function SetRADGrid(sender, eventArgs) {
             
    var grid = sender;
   ....
    sender.repaint();
}

or like follows:

var grid = $find("<%=rdgrdGenericReport.ClientID %>");

Please refer to this help topic: Getting Familiar with Client-side API which will provide more detailed information. Also it is not recommended to set the same attributes twice:

<ClientSettings Resizing-AllowColumnResize="true" AllowDragToGroup="True">
     <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="true"></Resizing>
     <Scrolling AllowScroll="true" />
     <ClientEvents OnGridCreating="SetRADGrid" OnColumnResized="SetRADGrid" />
</ClientSettings>

I also attach a sample project to illustrate the approach.

I hope this helps.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Marco
Top achievements
Rank 1
answered on 25 Oct 2013, 10:00 AM
I find this bug in your demo too. 
This is not an implementation error of Jigar
look at http://demos.telerik.com/aspnet-ajax/grid/examples/client/resizing/defaultcs.aspx 
only in Google Chrome, after grid column size change, user can't resize the column again


0
Venelin
Telerik team
answered on 29 Oct 2013, 01:15 PM
Hello Marco,

Jigar's question concerned a specific requirement where RadGrid should show a horizontal scroll bar when the total width of all columns become greater than the width of the grid. However the problem you mention in your post is different. It appeared with version 30 of Google Chrome and we are aware of it. The fix will be included in the service pack.

Please find attached a sample project that includes the mentioned fix. However I should warn you that the test for it are not completed yet. If you decide to contribute and test it on your side too, we will be very grateful to receive your feedback.

Regards,
Venelin
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
JP
Top achievements
Rank 1
Answers by
Venelin
Telerik team
JP
Top achievements
Rank 1
Marco
Top achievements
Rank 1
Share this question
or