Grid Skin problem

[nagendra]

Query 1: I am using Hierarchal RadGrid(version: Telerik 2008). The Skin used is “Office2007”. The border line is not displaying properly for the nested rows(please refer the snapshot1) and also the grid background is not shown properly when we select even rows (please refer the snapshot2). Please give us the solution for this.

 

 

Query 2: For the RadGrid, Paging and Sorting is set to true. Suppose if we are in Page 3 and click on column to sort, Sorting will happen but it will remain in the same page(i.e. Page 3). But I want the grid to display Page 1 when sorting happens. Please let me know how to achieve this.

 

Thanks,

Nagendra

[Dimo]

Hi Nagendra,

Regarding your first query - the question is not why the right border is missing (this is on purpose), but why the rows do not extend to the right edge of the RadGrid control. You can set Width="100%" to the detail GridTableViews, and also, if you have pixel widths for all columns, remove one of them, so that it can adjust, according to the available horizontal space. If you by any chance have an explicit width for the MasterTableView, consider removing that as well.

Regarding your question about row backgrounds, please refer to:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-preserve-the-original-radgrid-selected-hover-row-background-when-using-itemstyle-backcolor.aspx

If you want to reset the page index during sorting, then subscribe to the RadGrid SortCommand event and set the CurrentPageIndex to zero.

Greetings,
Dimo
the Telerik team

[nagendra]

Hi Dimo,

      I tried the solution but the solution doesn't seem to be working. I have attached the screenshots. Snapshot1 shows the even row selection and Snapshot2 shows the border line missing for the DetailTable. I have also attached the code snippet.
     Please suggest solution for this. 

<telerik:RadGrid ID="rgCostBasisInquiry" runat="server" AllowMultiRowSelection="false" AllowPaging="true" OnPreRender="rgCostBasisInquiry_PreRender"
                                ShowHeader="true" AutoGenerateColumns="False" loadingtemplatetransparency="25"
                                OnNeedDataSource="rgCostBasisInquiry_NeedDataSource" Width="765px" OnItemDataBound="rgCostBasisInquiry_ItemDataBound"
                                OnDetailTableDataBind="rgCostBasisInquiry_DetailTableDataBind" GridLines="None"
                                AllowSorting="True" Height="200px" AlternatingItemStyle-BackColor="AliceBlue"
                                Skin="Office2007">
                                <AlternatingItemStyle BackColor="AliceBlue"></AlternatingItemStyle>
                                <MasterTableView TableLayout="Fixed" Name="CBInquiryGrid" DataKeyNames="SecurityMasterID">
                                    <PagerStyle Mode="NextPrevAndNumeric" Visible="true" />
                                    <NoRecordsTemplate>
                                    </NoRecordsTemplate>
                                    <ParentTableRelation>
                                        <telerik:GridRelationFields DetailKeyField="SecurityMasterID" MasterKeyField="SecurityMasterID" />
                                    </ParentTableRelation>
                                    <DetailTables>
                                        <telerik:GridTableView AllowPaging="false" Name="gtvCBInquiryChildGrid" runat="server"
                                            ShowHeader="true" Width="100%" >
                                            <RowIndicatorColumn>
                                                <HeaderStyle Width="20px"></HeaderStyle>
                                            </RowIndicatorColumn>
                                            <ExpandCollapseColumn>
                                                <HeaderStyle Width="20px"></HeaderStyle>
                                            </ExpandCollapseColumn>
                                            <Columns>
                                                <telerik:GridTemplateColumn DataField="SecurityMasterID" HeaderButtonType="TextButton" HeaderText="SecurityMasterID"
                                                    SortExpression="SecurityMasterID" UniqueName="SecurityMasterID" Visible="false">
                                                    <HeaderStyle HorizontalAlign="left" Width="0px" />
                                                    <ItemStyle HorizontalAlign="left" />
                                                    <ItemTemplate>
                                                        <asp:Label runat="server" ID="lblSecurityMasterID" Text='<%# DataBinder.Eval(Container.DataItem, "SecurityMasterID")%>'></asp:Label>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridTemplateColumn DataField="ParentLotID" HeaderButtonType="TextButton" HeaderText="ParentLotID"
                                                    SortExpression="ParentLotID" UniqueName="ParentLotID" Visible="false">
                                                    <HeaderStyle HorizontalAlign="left" Width="0px" />
                                                    <ItemStyle HorizontalAlign="left" />
                                                    <ItemTemplate>
                                                        <asp:Label runat="server" ID="lblParentLotID" Text='<%# Convert.ToInt64(DataBinder.Eval(Container.DataItem, "ParentLotID"))%>'></asp:Label>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridTemplateColumn DataField="TradeNumber" HeaderButtonType="TextButton" HeaderText="Trade #"
                                                    SortExpression="TradeNumber" UniqueName="TradeNumber" >
                                                    <HeaderStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="hlTradeNumber" Font-Underline="true" ForeColor="Blue" ToolTip="Click here to view Cost Basis Detail screen"
                                                            runat="server" Text='<%# ((DataBinder.Eval(Container.DataItem, "TradeNumber") == null) || (DataBinder.Eval(Container.DataItem, "TradeNumber") == "")) ? " " : DataBinder.Eval(Container.DataItem, "TradeNumber")%>'></asp:LinkButton>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridTemplateColumn DataField="TaxLotID" HeaderButtonType="TextButton" HeaderText="Lot ID"
                                                    SortExpression="TaxLotID" UniqueName="TaxLotID">
                                                    <HeaderStyle HorizontalAlign="center" Width="30px" />
                                                    <ItemStyle HorizontalAlign="center" Width="30px" />
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="hlLotID" Font-Underline="true" ForeColor="Blue" ToolTip="Click here to view Cost Basis Detail screen"
                                                            runat="server" Text='<%#Convert.ToInt64(DataBinder.Eval(Container.DataItem, "TaxLotID")) %>'></asp:LinkButton>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridTemplateColumn DataField="MatchedLotID" HeaderButtonType="TextButton" HeaderText="Matched Lot ID"
                                                    SortExpression="MatchedLotID" UniqueName="MatchedLotID">
                                                    <HeaderStyle HorizontalAlign="center" Width="25px" />
                                                    <ItemStyle HorizontalAlign="center" Width="25px" />
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="hlMatchedLotID" Font-Underline="true" ForeColor="Blue" ToolTip="Click here to view Cost Basis Detail screen"
                                                            runat="server" Text='<%#Convert.ToInt64(DataBinder.Eval(Container.DataItem, "MatchedLotID")) %>'></asp:LinkButton>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn DataField="TradeDate" HeaderButtonType="TextButton" HeaderText="Trade Date"
                                                    SortExpression="TradeDate" UniqueName="TradeDate">
                                                    <HeaderStyle HorizontalAlign="left" Width="25px" />
                                                    <ItemStyle HorizontalAlign="left" Width="25px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridTemplateColumn DataField="TradeType" HeaderButtonType="TextButton" HeaderText="Trade Type"
                                                    SortExpression="TradeType" UniqueName="TradeType" >
                                                    <HeaderStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemTemplate>
                                                        <asp:Label runat="server" ID="lblTradeType" Text='<%# DataBinder.Eval(Container.DataItem, "TradeType")%>'></asp:Label>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn DataField="Quantity" HeaderButtonType="TextButton" HeaderText="Qty"
                                                    SortExpression="Quantity" UniqueName="Quantity">
                                                    <HeaderStyle HorizontalAlign="left" Width="60px" />
                                                    <ItemStyle HorizontalAlign="left" Width="60px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Price" HeaderButtonType="TextButton" HeaderText="Price"
                                                    SortExpression="Price" UniqueName="Price">
                                                    <HeaderStyle HorizontalAlign="left" Width="50px" />
                                                    <ItemStyle HorizontalAlign="left" Width="50px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="MarketValue" HeaderButtonType="TextButton" HeaderText="Market Value"
                                                    SortExpression="MarketValue" UniqueName="MarketValueChld">
                                                    <HeaderStyle HorizontalAlign="left" Width="50px" />
                                                    <ItemStyle HorizontalAlign="left" Width="50px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridTemplateColumn DataField="CostBasis" HeaderButtonType="TextButton" HeaderText="Cost Basis"
                                                    SortExpression="" UniqueName="CostBasis">
                                                    <HeaderStyle HorizontalAlign="left" Width="50px" />
                                                    <ItemStyle HorizontalAlign="left" Width="50px" />
                                                    <ItemTemplate>
                                                        <telerik:RadNumericTextBox ID="txtCostBasis" Font-Size="xx-small" runat="server"
                                                            Width="90%" Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "CostBasis"))%>'>
                                                        </telerik:RadNumericTextBox>
                                                        <asp:HiddenField ID="hdnCostBasisChldHdnChanged" runat="server" Value="0" />
                                                        <asp:HiddenField ID="hdnCostBasisChldHdn" runat="server" Value='<%# Convert.ToDecimal(DataBinder.Eval(Container.DataItem, "CostBasis"))%>' />
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn DataField="UnrealisedGainLoss" HeaderButtonType="TextButton"
                                                    HeaderText="Unrealised Gain/Loss" SortExpression="UnrealisedGainLoss" UniqueName="UnrealisedGainLoss">
                                                    <HeaderStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemStyle HorizontalAlign="left" Width="40px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="RealisedGainLoss" HeaderButtonType="TextButton"
                                                    HeaderText="Realised Gain/Loss" SortExpression="RealisedGainLoss" UniqueName="RealisedGainLoss">
                                                    <HeaderStyle HorizontalAlign="left" Width="40px" />
                                                    <ItemStyle HorizontalAlign="left" Width="40px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="GainLossTerm" HeaderButtonType="TextButton" HeaderText="Term"
                                                    SortExpression="GainLossTerm" UniqueName="GainLossTerm">
                                                    <HeaderStyle HorizontalAlign="left" Width="20px" />
                                                    <ItemStyle HorizontalAlign="left" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="ClosedDate" HeaderButtonType="TextButton" HeaderText="Closed Date"
                                                    SortExpression="ClosedDate" UniqueName="ClosedDate">
                                                    <HeaderStyle HorizontalAlign="left" Width="20px" />
                                                    <ItemStyle HorizontalAlign="left" Width="20px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn DataField="Gifted/Inherited" HeaderButtonType="TextButton" HeaderText="Gifted"
                                                    SortExpression="Gifted" UniqueName="Gifted">
                                                    <HeaderStyle HorizontalAlign="left" Width="30px" />
                                                    <ItemStyle HorizontalAlign="left" Width="30px" />
                                                </telerik:GridBoundColumn>
                                                <telerik:GridTemplateColumn DataField="Action" HeaderButtonType="TextButton" HeaderText="Action"
                                                    SortExpression="Action" UniqueName="Action">
                                                    <HeaderStyle HorizontalAlign="center" />
                                                    <ItemStyle HorizontalAlign="center" />
                                                    <ItemTemplate>
                                                        <asp:LinkButton ID="hlAction" Font-Underline="true" ForeColor="Blue" ToolTip="Click here to view Update Lot screen"
                                                            runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Action") %>'></asp:LinkButton>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                            </Columns>
                                        </telerik:GridTableView>
                                    </DetailTables>
                                    <RowIndicatorColumn>
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                    </RowIndicatorColumn>
                                    <ExpandCollapseColumn Visible="True">
                                        <HeaderStyle Width="20px"></HeaderStyle>
                                    </ExpandCollapseColumn>
                                    <Columns>
                                        <telerik:GridBoundColumn DataField="SecurityMasterID" HeaderButtonType="TextButton"
                                            Visible="false" HeaderText="SecurityMasterID" SortExpression="SecurityMasterID"
                                            UniqueName="SecurityMasterID">
                                            <HeaderStyle HorizontalAlign="left" Width="0%" />
                                            <ItemStyle HorizontalAlign="left" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridTemplateColumn DataField="Symbol" HeaderButtonType="TextButton" HeaderText="Symbol"
                                            SortExpression="Symbol" UniqueName="Symbol">
                                            <HeaderStyle HorizontalAlign="left" Width="55px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblSymbol" Text='<%# DataBinder.Eval(Container.DataItem, "Symbol")%>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="CUSIP" HeaderButtonType="TextButton" HeaderText="CUSIP"
                                            SortExpression="CUSIP" UniqueName="CUSIP">
                                            <HeaderStyle HorizontalAlign="left" Width="55px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblCUSIP" Text='<%# DataBinder.Eval(Container.DataItem, "CUSIP")%>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="Description" HeaderButtonType="TextButton"
                                            HeaderText="Description" SortExpression="Description" UniqueName="Description">
                                            <HeaderStyle HorizontalAlign="left" Width="120px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblDescription" Text='<%# DataBinder.Eval(Container.DataItem, "Description")%>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="SecurityType" HeaderButtonType="TextButton"
                                            HeaderText="Sec. Type" SortExpression="SecurityType" UniqueName="SecurityType">
                                            <HeaderStyle HorizontalAlign="left" Width="55px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblSecurityType" Text='<%# DataBinder.Eval(Container.DataItem, "SecurityType")%>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn DataField="Quantity" HeaderButtonType="TextButton" HeaderText="Qty"
                                            SortExpression="Quantity" UniqueName="Quantity">
                                            <HeaderStyle HorizontalAlign="left" Width="50px" />
                                            <ItemStyle HorizontalAlign="left" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="MarketValue" HeaderButtonType="TextButton" HeaderText="Market Value"
                                            SortExpression="MarketValue" UniqueName="MarketValueParent">
                                            <HeaderStyle HorizontalAlign="left" Width="55px" />
                                            <ItemStyle HorizontalAlign="left" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="CostBasis" HeaderButtonType="TextButton" HeaderText="Cost Basis"
                                            SortExpression="CostBasis" UniqueName="CostBasis">
                                            <HeaderStyle HorizontalAlign="left" Width="50px" />
                                            <ItemStyle HorizontalAlign="left" />
                                        </telerik:GridBoundColumn>
                                        <telerik:GridTemplateColumn DataField="UnRealisedGainLoss" HeaderButtonType="TextButton"
                                            HeaderText="Unrealised Gain/Loss" SortExpression="UnRealisedGainLoss" UniqueName="UnRealisedGainLoss">
                                            <HeaderStyle HorizontalAlign="left" Width="55px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblUnrealisedGainLoss" Text='<%# DataBinder.Eval(Container.DataItem, "UnRealisedGainLoss") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="RealisedGainLoss" HeaderButtonType="TextButton"
                                            HeaderText="Realised Gain/Loss" SortExpression="RealisedGainLoss" UniqueName="RealisedGainLoss">
                                            <HeaderStyle HorizontalAlign="left" Width="52px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:Label runat="server" ID="lblRealisedGainLoss" Text='<%# DataBinder.Eval(Container.DataItem, "RealisedGainLoss") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="Action" HeaderButtonType="TextButton" HeaderText=""
                                            SortExpression="Action" UniqueName="Action">
                                            <HeaderStyle HorizontalAlign="left" Width="20px" />
                                            <ItemStyle HorizontalAlign="left" />
                                            <ItemTemplate>
                                                <asp:ImageButton ID="hlAddTaxLot" ToolTip="Click here to add Tax Lot" ImageUrl="~/Skins/Office2007/Grid/AddRecord.gif"
                                                    runat="server" />
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                </MasterTableView>
                                <ClientSettings AllowExpandCollapse="true">
                                    <Scrolling AllowScroll="True" UseStaticHeaders="false"/>
                                    <Selecting AllowRowSelect="True" />
                                </ClientSettings>
                                <FilterMenu NotSelectedImageUrl="~/Skins/GridSkin/Ice/NotSelectedMenu.gif" SelectedImageUrl="~/Skins/GridSkin/Ice/SelectedMenu.gif">
                                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                </FilterMenu>
                            </telerik:RadGrid>

Thanks,
Nagendra

[nagendra]

Hi Dimo,

 Please reply to the queries as soon as possible. We need to fix that fast. Thanks in advance.

Thanks,
Nagendra

[Dimo]

Hello Nagendra,

1. The "gap" between selected items is actually a background color, which is applied to the RadGrid alternating rows. The previously provided demo shows how to resovle the issue, however, you have to use the correct CSS classes for your RadGrid version, which seems an older one.

So instead of

.RadGrid_Office2007 .rgSelectedRow
{
    background-color:#ffcb60 !important;
}

.RadGrid_Office2007 .rgHoveredRow,
.RadGrid_Office2007 .rgActiveRow
{
    background-color:#ecf4ff !important;
}


you should use something like this:

.RadGrid_Office2007 .SelectedRow_Office2007
{
    background-color:#f1c15f  !important;
}

.RadGrid_Office2007 .GridRowOver_Office2007,
.RadGrid_Office2007 .ActiveRow_Office2007
{
    background-color:#f9d99f  !important;
}


Here is a list of the old and new RadGrid CSS classes:

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html


2. In order to add a right border to the RadGrid detail tables, use this CSS rule:

.RadGrid_Office2007  .DetailTable_Office2007
{
    border-right:1px solid #9eb6ce;
}


Regards,
Dimo
the Telerik team