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

Radgrid column width - header column width exceeding item column width

5 Answers 959 Views

Grid

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

Ripunjay asked on 29 Aug 2011, 11:33 AM

radGridColumnFall.JPG

Hi,
I am using the 2011 Q2 release (radgrid version 2011.2.712.40) in my application.
I notice that the header column width sometimes exceeds the item column width. I am not able trace out a pattern under which such scenario occurs. I am attaching the screenshot to explain the issue in mote detail. Notice the blue outlined header box. I got this blue outline from IE developer toolbar.
Can you let me what can cause such behaviour.
Below is the page mark up:

<div id="divList" runat="server" style="width: 100%; height: 505px;">

<telerik:RadGrid ID = "dgList" runat="server" AllowMultiRowSelection="True"

Skin = "XXX" CellSpacing="0" CellPadding="0" BorderStyle="Solid"

BorderWidth="0px" Width="100%" Height="510px" AutoGenerateColumns="False"

GridLines="None" AllowSorting = "True" ImagesPath="~/Skins/XXX/Grid"

OnItemDataBound="dgList_ItemDataBound" OnSortCommand = "dgList_SortCommand"

HeaderStyle-Height = "30px" EnableEmbeddedSkins="False">

<ClientSettings>

<Scrolling AllowScroll = "true" UseStaticHeaders = "true" />

<Selecting AllowRowSelect = "true"/>

<ClientEvents OnRowSelected="RowSelected" OnRowDeselected="RowDeSelected" />

</ClientSettings>

<HeaderStyle Font-Underline="False" Height="30px" />

<ItemStyle Wrap = "true" />

<MasterTableView TableLayout="Fixed" AllowNaturalSort = "true" AllowCustomSorting="true" ShowHeadersWhenNoRecords="true" NoMasterRecordsText="No details found.">

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" >

<HeaderStyle Width="3%"/>

<ItemStyle HorizontalAlign="Center" />

</telerik:GridClientSelectColumn>

<telerik:GridBoundColumn

UniqueName = "ID"

DataField = "ID"

HeaderText = "ID"

Display = "false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "Details"

DataField = "Details"

HeaderText = "Description"

HeaderStyle-Width = "13%"

SortExpression = "Details">

<HeaderStyle

HorizontalAlign = "Center"/>

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "VersionID"

DataField = "VersionID"

HeaderText = "Version"

HeaderStyle-Width = "7%"

SortExpression = "VersionID">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "ContentID"

DataField = "ContentID"

HeaderText = "ContentType"

HeaderStyle-Width = "12%"

SortExpression = "ContentID">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "PublishedDate"

DataField = "PublishedDate"

HeaderText = "Published"

SortExpression = "PublishedDate"

HeaderStyle-Width = "7%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "PlatformID"

DataField = "PlatformID"

HeaderText = "Platform"

SortExpression = "PlatformID"

HeaderStyle-Width = "10%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridButtonColumn

UniqueName = "btnDetails"

ButtonType="ImageButton"

ImageUrl="~/Images/info.png"

HeaderText = "Details"

Text = "Details"

HeaderStyle-Width = "5%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

HorizontalAlign = "Center"

Height = "100%"

CssClass = "RadGridRow"/>

</telerik:GridButtonColumn>

<telerik:GridBoundColumn

UniqueName = "Ob"

DataField = "Ob"

HeaderText = "Obsolete"

SortExpression = "Ob"

HeaderStyle-Width = "7%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Center"

CssClass = "RadGridRow" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "Size"

DataField = "size"

HeaderText = "Size[KB]"

SortExpression = "size"

HeaderStyle-Width = "6%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "Name"

DataField = "Name"

HeaderText = "FileName"

SortExpression = "Name"

ItemStyle-Wrap = "true"

HeaderStyle-Width = "16%">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "false"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn

UniqueName = "Collection"

DataField = "Collection"

HeaderText = "CollectionName"

SortExpression = "Collection"

ItemStyle-Wrap = "true"

HeaderStyle-Width = "0%"

Display = "false">

<HeaderStyle

HorizontalAlign = "Center" />

<ItemStyle

Wrap = "true"

Height = "100%"

HorizontalAlign = "Left"

CssClass = "RadGridRow"/>

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

Is there a specific CSS property to set for this?

Regards,
Ripunjay

5 Answers, 1 is accepted

answered on 03 Sep 2011, 12:18 PM

RadGrid458645.zip

Hello Ripunjay,

I tried to replicate the issue with the markup you use but no avail. Attached to this post, you will find the code which I used for testing.
Please make sure that you use the latest official version of RadControls for ASP.NET AJAX - Q2 2010.

If the problem persists, I suggest that you send us a small working project, demonstrating your full setup and showing the unwanted behavior.
We will debug it locally and get back to you with our findings.

Thank you in advance for the cooperation.

All the best,
Mira
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>