cannot change column width

[James]

hi, i have a radgrid that i am progratically adding a grouping to. i am trying to change the column widths, but it is not applying the changes, the columns are the size of the data or column headr, which ever is the wider (f the content is a data it's 10 charactes for example)

i have not set a width for the grid itself,

i have even tried this on prerender for the grid:

RadGrid1.MasterTableView.Columns(1).HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(500)

RadGrid1.MasterTableView.Columns(2).HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(500)

RadGrid1.MasterTableView.Columns(3).HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(500)

RadGrid1.MasterTableView.Columns(4).HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(500)

and it is not applied the fist 5 columns are about 20-50px depending on what the data is

[Jayesh Goyani]

Hello,

i try with your code and it works fine.

void RadGrid1_PreRender(object sender, EventArgs e)

    {

        RadGrid1.MasterTableView.Columns[1].HeaderStyle.Width = System.Web.UI.WebControls.Unit.Pixel(500);

      } 

please let me know which are properties you set on your radgrid or check that header class css not overwrite by global css or skin.


Thanks,
Jayesh Goyani

[James]

i have a lot of columns in the grid - 20+ and it makes the page scroll to the right which i am totally fine with. if i try to apply the widths either via code or in the style it doesn't make any difference.

i have however just deleted all but 3 columns of the grid and not changed anything else. the widths are now sort of implemented.... if i set a single column to 30px the column is smaller than the other 2, but wider than 30px.... which is also wider than the content. if i set it to 300px it's wider than the other columns and possibly somewhere around 300px, but if i set it to a silly value like 3000px it ignores this value.

the problem seems to be that the grid is set to 100% width and is doing something with %'s automatically becasue os this.  the code for my grid (with 3 columsn) is below. is there anythign i need to set to stop this behaviour?

<

 

telerik:radgrid id="RadGrid1" runat="server" datasourceid="dsrcDupes" gridlines="None"

 

 

skin="Web20" AllowSorting="True" AllowPaging="True" PageSize="100">

 

<

 

MasterTableView DataSourceID="dsrcDupes" AutoGenerateColumns="False">

 

 

<Columns>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn">

 

 

<ItemTemplate>

 

 

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "edit_menu.aspx?id="& eval("unique_id_ref") %>'>View File</asp:HyperLink>

 

 

<br />

 

 

<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "nominal.aspx?nominal_id=" & eval("nominal_id") %>'>View Nominal</asp:HyperLink>

 

 

</ItemTemplate>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn DataField="unique_id_ref" HeaderText="File ID" SortExpression="unique_id_ref"

 

 

UniqueName="column1" GroupByExpression="unique_id_ref">

 

 

<HeaderStyle Width="30px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="area" HeaderText="Area" SortExpression="area"

 

 

UniqueName="column2" GroupByExpression="area">

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

</

 

MasterTableView>

 

 

<PagerStyle Position="TopAndBottom" />

 

</

 

telerik:radgrid>

 

 

[Pavlina]

Hello James,

I recommend that you go through the forum thread below:
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx

Best wishes,
Pavlina
the Telerik team

[James]

Hi, thanks for the link i have had a look through and set all column widths, still no luck. i have setup a simple grid as below. first column 300px, second 200px, last 100px. this is still not displaying as i expect, even with tablelayout="Fixed" as it is still making the radgrid 100% wide. as my screen res is 1280x1024 i would expect that the radgrid did not take 100%, but it still is. please see attached screen shot of how it looks

<

 

telerik:radgrid id="RadGrid1" runat="server" datasourceid="dsrcDupes" gridlines="None"

 

 

skin="Web20" AllowSorting="True" AllowPaging="True" PageSize="100">

 

<

 

MasterTableView DataSourceID="dsrcDupes" AutoGenerateColumns="False" TableLayout ="Fixed" >

 

 

<Columns>

 

 

<telerik:GridTemplateColumn UniqueName="TemplateColumn">

 

 

<ItemTemplate>

 

 

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "edit_menu.aspx?id="& eval("unique_id_ref") %>'>View File</asp:HyperLink>

 

 

<br />

 

 

<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# "nominal.aspx?nominal_id=" & eval("nominal_id") %>'>View Nominal</asp:HyperLink>

 

 

</ItemTemplate>

 

 

<HeaderStyle Width="300px" />

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn DataField="unique_id_ref" HeaderText="File ID" SortExpression="unique_id_ref"

 

 

UniqueName="column1" GroupByExpression="unique_id_ref">

 

 

<HeaderStyle Width="200px" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="area" HeaderText="Area" SortExpression="area"

 

 

UniqueName="column2" GroupByExpression="area">

 

 

<HeaderStyle Width="100px" />

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

</

 

MasterTableView>

 

 

<PagerStyle Position="TopAndBottom" />

 

</

 

telerik:radgrid>

 

[James]

iif however i set the width of the grid to 600px it behaves as i would expect it to and leaves space. is the way to achaive what i want to set the rad grid width and every column?

can i just set the columns that i want a specific width, set eh width of the rad grid to seomthign that is too small - say 100px, then it would work out the sizings of the other columns and grid like a gridview would do?

[James]

sorry to keep replying to myself, but i dont want to edit the old posts in case people have read them.

i have now setup my grid as follows:
radgrid width not set
master table tablelayout = fixed
a single column width (brief circumstances in the screen shot) is set to 500px
all other columns have no width defined.
grouping is on and a custom expression applied.

what happens now si that the column that i set to 500px is corect, but as the gridahas still decided to make itself 100% wide all the other columns are now too narrow and have not expanded with their content.... so you can't see all of the text. please see screen shot. 

what i wanted to happen was have the grid continue off screen and scroll with the brief circumstances column a set width of 500px and the other columns their minimum width depending on their contatne and header text. it's the automatic adding of 100% width causing the issue again.

if i set the grid to 100px width though, it does not display all the columns, it stays at 100px even though the content is wider than 100px.

i think the only way to achieve what i want is to set EVERY column and the grid width, even though the link above siad not to do that?

[Pavlina]

Hello James,

When the RadGrid resizes together with its parent then you should either set pixel widths to all columns and TableLayout="Fixed", or do not set any column widths at all and set TableLayout property to Auto.
 
Kind regards,
Pavlina
the Telerik team

[Remco]

Hello Pavlina,

I did not start a new thread, because we're also unable to set the columns width.

We want our users to be able to create their own column layout. Therefore we must be able to set the width of the columns, when a user returns to a previous page. However the grid seems to handle to columns width as propertional to the grid. We tried several approaches, during the PageLoad, PageInit and Render, but nothing works. 

I enclosed the sourcecode of the latest test page. Could you tell me what I'm doing wrong or which property we did not set correctly? I also enclosed 2 screen shots: (1) initial screen layout, (2) screen layout when I've pressed the page.2 button.

Kind Regards,
Remco

WebForm.aspx

<div id="DivGrid4" style="height:200px; margin-top:10px;" >
    <asp:PlaceHolder ID="PlaceHolderGrid4" runat="server"></asp:PlaceHolder>
</div>

WebForm.aspx.cs

RadGrid RadGrid4 = new RadGrid();

protected void Page_Load(object sender, EventArgs e)
{
   Grid4_PageLoad();
}

protected void Page_Init(object sender, System.EventArgs e)
{
   Grid4_PageInit();
}


private void Grid4_PageInit()
{
  RadGrid4.ID = "RadGrid4";

  SqlDataReader dr;
  String sql = "SELECT TaskId, AreaId, Quantity, TimeCreated FROM TaskQueue WHERE TaskStatus <> 3";
  dr = SqlRetrieve(sql, ConfigurationManager.ConnectionStrings["slwmsConnectionString"].ConnectionString);
  RadGrid4.DataSource = dr;

  RadGrid4.Skin = "Office2010Blue";
  RadGrid4.Width = Unit.Percentage(100);
  RadGrid4.AllowPaging = true;
  RadGrid4.AutoGenerateColumns = false;
  RadGrid4.GroupingEnabled = false;
  RadGrid4.ShowGroupPanel = false;
  RadGrid4.ShowStatusBar = true;
  RadGrid4.AllowMultiRowSelection = true;
  RadGrid4.AutoGenerateColumns = false;

  RadGrid4.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
  RadGrid4.PagerStyle.AlwaysVisible = true;

  RadGrid4.ClientSettings.AllowDragToGroup = true;
  RadGrid4.ClientSettings.Selecting.AllowRowSelect = true;
  RadGrid4.ClientSettings.AllowColumnsReorder = true;
  RadGrid4.ClientSettings.EnableRowHoverStyle = true;

  RadGrid4.ClientSettings.Scrolling.AllowScroll = true;
  RadGrid4.ClientSettings.Scrolling.UseStaticHeaders = true;
  RadGrid4.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(100);

  RadGrid4.ClientSettings.Resizing.AllowColumnResize = true;
  RadGrid4.ClientSettings.Resizing.EnableRealTimeResize = true;
  RadGrid4.ClientSettings.Resizing.ResizeGridOnColumnResize = true;
  RadGrid4.ClientSettings.Resizing.AllowResizeToFit = true;

  RadGrid4.MasterTableView.PageSize = 100;
  RadGrid4.MasterTableView.AllowSorting = true;
  RadGrid4.MasterTableView.AllowMultiColumnSorting = true;
  RadGrid4.MasterTableView.TableLayout = GridTableLayout.Fixed;


  this.PlaceHolderGrid4.Controls.Add(RadGrid4);
}


private void Grid4_PageLoad()
{

   if (!IsPostBack)
   {
      GridClientSelectColumn selectColumn;
      selectColumn = new GridClientSelectColumn();
      selectColumn.UniqueName = "ClientSelectColumn";
      selectColumn.HeaderStyle.Width = Unit.Pixel(35);
      selectColumn.Resizable = false;
      RadGrid4.MasterTableView.Columns.Add(selectColumn);

      GridBoundColumn boundColumn;
      boundColumn = new GridBoundColumn();
      RadGrid4.MasterTableView.Columns.Add(boundColumn);
      boundColumn.DataField = "TaskId";
      boundColumn.HeaderText = "Taak";
      boundColumn.HeaderStyle.Width = Unit.Pixel(100);
      boundColumn.ItemStyle.Wrap = false;

      boundColumn = new GridBoundColumn();
      RadGrid4.MasterTableView.Columns.Add(boundColumn);
      boundColumn.DataField = "AreaId";
      boundColumn.HeaderText = "Gebied";
      boundColumn.HeaderStyle.Width = Unit.Pixel(100);
      boundColumn.ItemStyle.Wrap = false;

      boundColumn = new GridBoundColumn();
      RadGrid4.MasterTableView.Columns.Add(boundColumn);
      boundColumn.DataField = "Quantity";
      boundColumn.HeaderText = "Aantal";
      boundColumn.HeaderStyle.Width = Unit.Pixel(100);
      boundColumn.ItemStyle.Wrap = false;

      boundColumn = new GridBoundColumn();
      RadGrid4.MasterTableView.Columns.Add(boundColumn);
      boundColumn.DataField = "TimeCreated";
      boundColumn.HeaderText = "Start";
      boundColumn.DataFormatString = "{0:dddd d MMMM yyyy}";
      boundColumn.HeaderStyle.Width = Unit.Pixel(100);
      boundColumn.ItemStyle.Wrap = false;
   }

}

[Pavlina]

Hi Remco,

Note that when generating RadGrid instance entirely in code behind on Page_Init event, grid columns should also be added on Page_Init. Please examine the attached sample page which I prepared based on the provided code and let me know if other questions arise.

Regards,
Pavlina
the Telerik team

[Remco]

Hello Pavlina,

Thank you for the prepared example, but we already tried this approach and it did not solve our issue.

Nevertheless I copied your code into a new WebForm of my project and only replaced the datasource with our datasource reference. But the width of the columns still does not correspond with the column width (35,100,100,100,100) we set in the Page_Init.

Maybe my question was not clear. I hope the following screenshots describe the issue more clearly. Screenshot 1 (29-11-2011 21-52-41.jpg) shows the page as it is rendered by the sourcecode and screenshot 2 (29-11-2011 21-59-26.jpg) shows the result I expected. 

Kind Regards,
Remco


 

[Pavlina]

Hi Remco, 

To achieve your goal you should leave one column without width(for example the last one). Generally, when the RadGrid is used with fixed width and static headers and you set some column widths, it is good to leave one column with no width.

Additionally, you can refer to the link below for more information about column widths:
http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx#1214355Regards,

Pavlina
the Telerik team

[Remco]

Thanks Pavlina, not setting the width of the  last column solved my problem.

Kind Regards, Remco