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 228 Views

Grid

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

JP asked on 10 Jul 2013, 06:21 PM

ChromeIssue.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.

answered on 24 Jul 2013, 05:16 PM

Sample.zip

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

answered on 29 Oct 2013, 01:15 PM

RadGridResizing.zip

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

5 Answers, 1 is accepted