[Solved] Colors not resizing with RadGrid

[Joseph]

I'm not sure if this is a bug with RadGrid Prometheus or not, but I noticed, using the WebBlue built-in skin, that when I hide and unhide columns using the Display property of a RadGrid column, some of the background colors on selected header/footer rows do not resize with the rest of the grid.  This leaves part of the row blue, and part of the row white.  Specifically, the colors in the filter row and the command row to add a new record (I have AllowFilteringbyColumn and AllowAutomaticInserts both set to true) seem to show this behavior.

I found a work around, I simply set the width of the grid during the same event where I hide and unhide the columns.  But I would have thought that all background colors would have automatically been resized.

The other strange part of this behavior is that the far right side of the grid seems to be missing it's border after the grid is resized.  I have not bothered to find a workaround for this, as it is not terribly noticeable.

I'm happy with how thing look now, but I thought you might like to know in case this affects other people.  Thanks!

Here is the code of part of my ASPX:

	<asp:CheckBox ID="chkAllColumns" runat="Server" Text="Show Additional Columns" AutoPostBack="True" />
	<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
	AllowSorting="True" DataSourceID="sdsRegistrants" GridLines="None" Skin="WebBlue"
	AllowAutomaticUpdates="True" AllowAutomaticInserts="True" PageSize="10" Width="925px">
	<ExportSettings>
	<Pdf FontType="Subset" PaperSize="Letter" />
	<Excel Format="Html" />
	<Csv ColumnDelimiter="Comma" RowDelimiter="NewLine" />
	</ExportSettings>
	<MasterTableView AutoGenerateColumns="False" CommandItemDisplay="TopAndBottom"
	CurrentResetPageIndexAction="SetPageIndexToFirst"
	DataSourceID="sdsRegistrants" Dir="LTR" Frame="Border"
	TableLayout="Auto" EditMode="InPlace" DataKeyNames="RegistrationID">
	<PagerStyle AlwaysVisible="True" Mode="NextPrevNumericAndAdvanced" NextPageText="Next" PrevPageText="Prev" HorizontalAlign="Left" Position="TopAndBottom"  />
	<RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
	Visible="False">
	<HeaderStyle Width="20px" />
	</RowIndicatorColumn>
	<ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
	Resizable="False" Visible="False">
	<HeaderStyle Width="20px" />
	</ExpandCollapseColumn>
	<Columns>
	<telerik:GridEditCommandColumn EditText="Edit Person" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
	<HeaderStyle Width="150px" />
	<ItemStyle Width="150px" />
	</telerik:GridEditCommandColumn>
	<telerik:GridHyperLinkColumn DataTextFormatString="Edit Sessions: {0}" DataNavigateUrlFields="RegistrationID" HeaderText="RegistrationID"
	UniqueName="RegistrationID" DataTextField="RegistrationID" DataNavigateUrlFormatString="Sessions2.aspx?RegID={0}"
	FilterListOptions="VaryByDataType" SortExpression="RegistrationID" CurrentFilterFunction="NoFilter">
	<ItemStyle HorizontalAlign="Center" />
	</telerik:GridHyperLinkColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Name" FilterListOptions="VaryByDataType"
	ForceExtractValue="None" HeaderText="Name" SortExpression="Name" UniqueName="Name">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="LastName" FilterListOptions="VaryByDataType"
	ForceExtractValue="None" HeaderText="LastName" SortExpression="LastName" UniqueName="LastName">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="Email" FilterListOptions="VaryByDataType"
	ForceExtractValue="None" HeaderText="Email" SortExpression="Email" UniqueName="Email">
	</telerik:GridBoundColumn>
	<telerik:GridDropDownColumn DataField="RegistrantType" DataSourceID="sdsRegistrantTypes"
	HeaderText="Registrant Type" ListTextField="RegistrantTypeDescription" ListValueField="RegistrantType"
	UniqueName="RegistrantType" CurrentFilterFunction="NoFilter" ForceExtractValue="None" SortExpression="RegistrantTypeDescription" FilterListOptions="VaryByDataType">
	</telerik:GridDropDownColumn>
	<telerik:GridBoundColumn DataField="RegistrantTypeDescription" HeaderText="RegistrantTypeDescription" SortExpression="RegistrantTypeDescription"
	UniqueName="RegistrantTypeDescription" Display="False" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="CompanyName"
	FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="CompanyName"
	SortExpression="CompanyName" UniqueName="CompanyName">
	</telerik:GridBoundColumn>
	<telerik:GridCheckBoxColumn CurrentFilterFunction="NoFilter" DataField="IsPresenter"
	DataType="System.Boolean" FilterListOptions="VaryByDataType" ForceExtractValue="None"
	HeaderText="IsPresenter" SortExpression="IsPresenter" UniqueName="IsPresenter">
	</telerik:GridCheckBoxColumn>
	<telerik:GridCheckBoxColumn CurrentFilterFunction="EqualTo" DataField="IsDeleted"
	DataType="System.Boolean" FilterListOptions="VaryByDataType" ForceExtractValue="None"
	HeaderText="IsDeleted" SortExpression="IsDeleted" UniqueName="IsDeleted">
	</telerik:GridCheckBoxColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ModifiedBy"
	FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="ModifiedBy"
	SortExpression="ModifiedBy" UniqueName="ModifiedBy" Display="False">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="ModifiedDate"
	DataType="System.DateTime" FilterListOptions="VaryByDataType" ForceExtractValue="None"
	HeaderText="ModifiedDate" SortExpression="ModifiedDate" UniqueName="ModifiedDate" ReadOnly="True" Display="False">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="AddedBy" FilterListOptions="VaryByDataType"
	ForceExtractValue="None" HeaderText="AddedBy" SortExpression="AddedBy" UniqueName="AddedBy" ReadOnly="True" Display="False">
	</telerik:GridBoundColumn>
	<telerik:GridBoundColumn CurrentFilterFunction="NoFilter" DataField="AddedDate" DataType="System.DateTime"
	FilterListOptions="VaryByDataType" ForceExtractValue="None" HeaderText="AddedDate"
	SortExpression="AddedDate" UniqueName="AddedDate" ReadOnly="True" Display="False">
	</telerik:GridBoundColumn>
	</Columns>
	<EditFormSettings>
	<EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" UniqueName="EditCommandColumn1">
	</EditColumn>
	</EditFormSettings>
	</MasterTableView>
	</telerik:RadGrid>

Here is the event to hide/unhide the coloumns (and my workaround):

 

    Protected Sub chkAllColumns_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkAllColumns.CheckedChanged
        If chkAllColumns.Checked Then
            RadGrid1.Columns.FindByUniqueNameSafe("ModifiedBy").Display = True
            RadGrid1.Columns.FindByUniqueNameSafe("ModifiedDate").Display = True
            RadGrid1.Columns.FindByUniqueNameSafe("AddedBy").Display = True
            RadGrid1.Columns.FindByUniqueNameSafe("AddedDate").Display = True
            RadGrid1.Width = 1305 'Workaround to manage color issue
        Else
            RadGrid1.Columns.FindByUniqueNameSafe("ModifiedBy").Display = False
            RadGrid1.Columns.FindByUniqueNameSafe("ModifiedDate").Display = False
            RadGrid1.Columns.FindByUniqueNameSafe("AddedBy").Display = False
            RadGrid1.Columns.FindByUniqueNameSafe("AddedDate").Display = False
            RadGrid1.Width = 925 'Workaround to manage color issue
        End If
    End Sub

[Dimo]

Hello Joseph,

Thank you for providing a sample code so that we can reproduce what you are talking about.

Unfortunately this is a normal behavior and is in accordance with current web standards and CSS specifications. RadGrid has some set width, which applies to the outermost <div> element. However, when you add more columns, the <table> element inside the <div> expands horizontally because of the filtering textboxes and exceeds the width of the <div>. <div> elements do not expand horizontally automatically, as tables do and that is why the border and background do not display well.

Your workaround is good and simple, so just keep using it. There are other workarounds too, but they are more difficult to implement and require advanced CSS.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center