RAdGrid header height issue

[Balamurali Venkatesan]

Hi,
We have customized the rad Grid skin to suit our needs.We have problem with the header height.

Actually the header style image comes from the sprite.gif image.
For some rad Grids the hedaer style image seem to overflow a little bit.This happens when we set the AllowMultiRowSelection=true.

When we remove this multirow selection the rad grid header image seem to work fine.

Find below the code for radgrid

<

telerik:RadGrid ID="radGridFacts" runat="server" AllowMultiRowSelection="True" AllowPaging="True"

 

 

AutoGenerateColumns="False" GridLines="None" PageSize="30" AllowAutomaticDeletes="True"

 

 

AllowAutomaticInserts="True" AllowAutomaticUpdates="True" AllowMultiRowEdit="True"

 

 

DataSourceID="objContDsFact" AllowFilteringByColumn ="True" Height="400px">

 

 

<AlternatingItemStyle BackColor="#EDEFF1" BorderColor="Blue" />

 

 

<PagerStyle AlwaysVisible="True" Mode="NextPrevNumericAndAdvanced" PageButtonCount="25"

 

 

Position="TopAndBottom" />

 

 

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace" AllowFilteringByColumn="True"

 

 

DataSourceID="objContDsFact" TableLayout ="Fixed">

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" height="2px" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridEditCommandColumn ButtonType="ImageButton" UpdateImageUrl="../images/Update.gif"

 

 

EditImageUrl="../images/Edit.gif" InsertImageUrl="../images/Insert.gif" CancelImageUrl="../images/Cancel.gif"

 

 

UniqueName="EditCommandColumn">

 

 

<HeaderStyle Width="4%" />

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridEditCommandColumn>

 

 

<telerik:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton"

 

 

ImageUrl="../images/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

 

 

<HeaderStyle Width="4%" />

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridButtonColumn>

 

 

<telerik:GridClientSelectColumn>

 

 

<HeaderStyle Width="4%" HorizontalAlign="center"/>

 

 

 

<ItemStyle HorizontalAlign="Center" />

 

 

</telerik:GridClientSelectColumn>

 

 

<telerik:GridBoundColumn DataField="Tag" HeaderText="Tag" UniqueName="factTagCol">

 

 

<HeaderStyle Width="13%" />

 

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="ShortDescription" HeaderText="Short Description"

 

 

UniqueName="colFactShortDesc">

 

 

<HeaderStyle Width="16%" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="LongDescription" HeaderText="Long Description"

 

 

UniqueName="colFactLongDesc">

 

 

<HeaderStyle Width="20%" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="CurrencyDbMarketTag" HeaderText="Currency Market Tag"

 

 

UniqueName="colCurrencyDbMarketTag" ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="CurrencyDbFactTag" HeaderText="Currency Fact Tag "

 

 

UniqueName="colCurrencyDbFactTag " ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn DataField="FactRate" HeaderText="Fact Rate" UniqueName="colFactRate"

 

 

ReadOnly="True">

 

 

<HeaderStyle Width="13%" />

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

<EditFormSettings>

 

 

<EditColumn UniqueName="EditCommandColumn1">

 

 

</EditColumn>

 

 

</EditFormSettings>

 

 

<CommandItemTemplate>

 

<%

-- <div style="padding: 10px 0px;">--%>

 

 

<asp:LinkButton ID="btnEditSelected" runat="server" CommandName="UpdateEdited"

 

 

Style="vertical-align: bottom"

 

 

Visible="<%# radGridFacts.EditIndexes.Count > 0 %>"><img alt=""

 

 

src="../images/Update.gif" style="border:0px;vertical-align:middle;" />

 

Update Products

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="false"

 

 

CommandName="CancelAll"

 

 

Visible="<%# radGridFacts.EditIndexes.Count > 0 || radGridFacts.MasterTableView.IsItemInserted %>"><img

 

 

alt="" src="../images/Cancel.gif" style="border:0px;vertical-align:middle;" />

 

Cancel editing

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnAddProduct" runat="server" CommandName="InitInsert"

 

 

Visible="<%# !radGridFacts.MasterTableView.IsItemInserted %>"><img alt=""

 

 

src="../images/AddRecord.gif" style="border:0px;vertical-align:middle;" />

 

Add new Product

</asp:LinkButton>

 

 

<asp:LinkButton ID="btnSaveProduct" runat="server" CommandName="PerformInsert"

 

 

Visible="<%# radGridFacts.MasterTableView.IsItemInserted %>"><img alt=""

 

 

src="../images/Insert.gif" style="border:0px;vertical-align:middle;" /> Add

 

this Product

</asp:LinkButton>

 

 

&nbsp;

 

 

<asp:LinkButton ID="btnUpdateEdited" runat="server" CausesValidation="false"

 

 

CommandName="EditSelected" Visible="<%# radGridFacts.EditIndexes.Count == 0 %>"><img

 

 

alt="" src="../images/Edit.gif" style="border:0px;vertical-align:middle;" />

 

Edit Selected Products

</asp:LinkButton>

 

 

<asp:LinkButton ID="btnDeleteSelectedProducts" runat="server"

 

 

CausesValidation="false" CommandName="DeleteSelected"

 

 

OnClientClick="javascript:return confirm('Delete all selected Products?')"><img

 

 

alt="" src="../images/Delete.gif" style="border:0px;vertical-align:middle;" />

 

Delete Selected Products

</asp:LinkButton>

 

 

&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

 

 

<asp:LinkButton ID="btnRefresh" runat="server" CommandName="RebindGrid"><img

 

 

alt="" src="../images/Refresh.gif" style="border:0px;vertical-align:middle;" />

 

Refresh Product list

</asp:LinkButton>

 

<%

-- </div>--%>

 

 

</CommandItemTemplate>

 

 

</MasterTableView>

 

 

<ClientSettings AllowKeyboardNavigation="True" AllowColumnsReorder="True">

 

 

<Selecting AllowRowSelect="True" />

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="true" ScrollHeight="300px" />

 

 

</ClientSettings>

 

 

<FilterMenu EnableTheming="True">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

<EditItemStyle BackColor="#A2A2A2" />

 

 

</telerik:RadGrid>

 

Thanks
Bala

[Dimo]

Hello Balamurali,

Thanks for the RadGrid declaration, but I am afraid I still don't understand very well what the problem is. Please provide your custom RadGrid CSS as well and some screenshots (you cannot attach files in the forum, so you will have to host the images somewhere).

Alternatively, open a regular support ticket and attach the files there. Thanks.

Best wishes,
Dimo
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.