ActiveItemStyle-CssClass doesn't work?

[Sayle]

I have a grid that does everything I need it to (Thanks guys!); except that the active row doesn't highlight... Would someone please look at the grid and let me know what I did wrong please?

<telerik:RadPageView ID="pvLoans" runat="server" Selected="true" Width="100%" >
    <telerik:RadGrid ID="gridLoans" runat="server" AllowAutomaticDeletes="True" Width="100%"
        AllowSorting="True" AllowMultiRowSelection="True" CellSpacing="0" CellPadding="0"
        PageSize="500" AllowCustomPaging="True"
        EnableLinqExpressions="false" GridLines="Both" HeaderStyle-Wrap="false"
        AutoGenerateColumns="false" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px"

        ActiveItemStyle-CssClass="Row2"
        ItemStyle-CssClass="Row0"
        AlternatingItemStyle-CssClass="Row1"

        OnItemDataBound="grid_ItemDataBound" OnPageIndexChanged="grid_PageIndexChanged"
        OnPageSizeChanged="grid_PageSizeChanged" OnNeedDataSource="grid_NeedDataSource"
        OnInsertCommand="gridLoans_InsertCommmand" OnUpdateCommand="gridLoans_UpdateCommand"
        OnDeleteCommand="gridLoans_DeleteCommand" OnPreRender="gridLoans_PreRender"
        OnGridExporting="gridLoans_GridExporting"
        >
        <ClientSettings allowautoscrollondragdrop="false" allowexpandcollapse="false" allowgroupexpandcollapse="false">
            <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
            <Scrolling AllowScroll="false" UseStaticHeaders="true" FrozenColumnsCount="12" ScrollHeight="" />
            <ClientEvents OnGridCreated="grid_GridCreated" OnRowDblClick="RowDblClick" />
            <Resizing AllowResizeToFit="True" EnableRealTimeResize="True" AllowColumnResize="True" AllowRowResize="True" ClipCellContentOnResize="False" ResizeGridOnColumnResize="True" />
        </ClientSettings>
        <ExportSettings IgnorePaging="true" ExportOnlyData="true" Excel-Format="ExcelML" />
        <MasterTableView EditMode="EditForms" CommandItemDisplay="None" DataKeyNames="LoanID" ClientDataKeyNames="LoanID" GridLines="Both">
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UniqueName="EditCommandColumn1" />
            </EditFormSettings>
            <CommandItemSettings ExportToPdfText="Export to PDF" />
            <Columns>
                <telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" DataType="System.Boolean" Visible="true" Display="true" DataTextField="LoanSelected" />

                <telerik:GridButtonColumn ConfirmText="Are you certian you want to hide this Loan?" ConfirmDialogType="RadWindow"
                    ConfirmTitle="Hide" ButtonType="ImageButton" ImageUrl="~/Images/remove_16.png"
                    CommandArgument="LoanID" CommandName="gridLoans_DeleteCommand"
                    Text="Hide" UniqueName="HideColumn" ItemStyle-HorizontalAlign="Center">
                </telerik:GridButtonColumn>

                <telerik:GridNumericColumn DataField="LoanNumber" FilterControlAltText="Filter LoanNumber column"
                    HeaderStyle-Wrap="true" HeaderText="LOAN NUMBER" SortExpression="LoanNumber"
                    UniqueName="LoanNumber" Visible="false" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>

                <telerik:GridNumericColumn DataField="NCLPercentage" FilterControlAltText="Filter NCLPercentage column"
                        HeaderStyle-Wrap="true" HeaderText="NCL%" SortExpression="NCLPercentage" NumericType="Percent"
                        UniqueName="NCLPercentage" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="RECPercentage" FilterControlAltText="Filter RECPercentage column"
                        HeaderStyle-Wrap="true" HeaderText="REC%" SortExpression="RECPercentage" NumericType="Percent"
                        UniqueName="RECPercentage" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="DefaultProbability" FilterControlAltText="Filter DefaultProbability column"
                        HeaderStyle-Wrap="true" HeaderText="DEFALT PROB" SortExpression="DefaultProbability"
                        UniqueName="DefaultProbability" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="DiscountPercentage" FilterControlAltText="Filter DiscountPercentage column"
                        HeaderStyle-Wrap="true" HeaderText="DISC%" SortExpression="DiscountPercentage" NumericType="Percent"
                        UniqueName="DiscountPercentage" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="PurchasePrice" NumericType="Currency" FilterControlAltText="Filter PurchasePrice column"
                    HeaderText="PURCHASE PRICE" SortExpression="PurchasePrice"
                    UniqueName="PurchasePrice">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="ReservePayments" FilterControlAltText="Filter ReservePayments column"
                        HeaderStyle-Wrap="true" HeaderText="RES PMTS" SortExpression="DiscountPercentage" NumericType="Number"
                        UniqueName="ReservePayments" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="ReservePercentage" FilterControlAltText="Filter ReservePercentage column"
                        HeaderStyle-Wrap="true" HeaderText="RES%" SortExpression="ReservePercentage" NumericType="Percent"
                        UniqueName="ReservePercentage" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="NumberOfPaidPayments" FilterControlAltText="Filter NumberOfPaidPayments column"
                        HeaderStyle-Wrap="true" HeaderText="#PD PMTS" SortExpression="NumberOfPaidPayments" NumericType="Number"
                        UniqueName="NumberOfPaidPayments" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="Recourse" FilterControlAltText="Filter Recourse column"
                        HeaderStyle-Wrap="true" HeaderText="RECOURSE" SortExpression="Recourse"
                        UniqueName="Recourse" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridBoundColumn DataField="PS_Acct_No" MaxLength="250" FilterControlAltText="Filter PS_Acct_No column"
                        HeaderStyle-Wrap="true" HeaderText="PS ACCT" SortExpression="PS_Acct_No"
                        UniqueName="PS_ACCT_NO" HeaderStyle-Font-Bold="true" Visible="true" ReadOnly="true">
                        <HeaderStyle Font-Bold="true" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ShortName" MaxLength="250" FilterControlAltText="Filter ShortName column"
                        HeaderStyle-Wrap="true" HeaderText="SHORT NAME" SortExpression="ShortName"
                        UniqueName="ShortName" HeaderStyle-Font-Bold="true" Visible="true" ReadOnly="true">
                        <HeaderStyle Font-Bold="true" />
                        <ItemStyle HorizontalAlign="Left" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="LoanType" FilterControlAltText="Filter LoanType column"
                        HeaderStyle-Wrap="true" HeaderText="LN TYPE" SortExpression="LoanType" UniqueName="LoanType"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="OriginationDate" DataFormatString="{0:MM/dd/yyyy}"
                        FilterControlAltText="Filter OriginationDate column" HeaderStyle-Wrap="true"
                        HeaderText="ORIGIN DTE" SortExpression="OriginationDate" UniqueName="OriginationDate"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridDateTimeColumn>
                <telerik:GridNumericColumn DataField="AmountFinanced" NumericType="Currency"
                        FilterControlAltText="Filter AmountFinanced column" HeaderStyle-Wrap="true"
                        HeaderText="AMT FIN" SortExpression="AmountFinanced" UniqueName="AmountFinanced"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="Apr" NumericType="Percent" FilterControlAltText="Filter Apr column"
                        HeaderStyle-Wrap="true" HeaderText="APR" SortExpression="Apr" UniqueName="Apr"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="Term" FilterControlAltText="Filter Term column"
                        HeaderStyle-Wrap="true" HeaderText="TERM" SortExpression="Term" UniqueName="Term"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="PaymentAmount" NumericType="Currency" FilterControlAltText="Filter PaymentAmount column"
                        HeaderStyle-Wrap="true" HeaderText="PMT AMT" SortExpression="PaymentAmount" UniqueName="PaymentAmount"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridDateTimeColumn DataField="FirstPrincipalPaymentDate" DataFormatString="{0:MM/dd/yyyy}"
                        FilterControlAltText="Filter FirstPrincipalPaymentDate column" HeaderStyle-Wrap="true"
                        HeaderText="FST PRN PMT DT" SortExpression="FirstPrincipalPaymentDate" UniqueName="FirstPrincipalPaymentDate"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                    <ItemStyle Font-Italic="False" />
                </telerik:GridDateTimeColumn>
                <telerik:GridDateTimeColumn DataField="NextPrincipalPaymentDate" DataFormatString="{0:MM/dd/yyyy}"
                        FilterControlAltText="Filter NextPrincipalPaymentDate column" HeaderStyle-Wrap="true"
                        HeaderText="NXT PRN PMT DT" SortExpression="NextPrincipalPaymentDate" UniqueName="NextPrincipalPaymentDate"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridDateTimeColumn>
                <telerik:GridNumericColumn DataField="DaysPastDue" NumericType="Number" DecimalDigits="0" FilterControlAltText="Filter DaysPastDue column"
                        HeaderStyle-Wrap="true" HeaderText="DYS PAST DUE" SortExpression="DaysPastDue"
                        UniqueName="DaysPastDue" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="PayOff" NumericType="Currency" FilterControlAltText="Filter PayOff column"
                        HeaderStyle-Wrap="true" HeaderText="PAY OFF AMT" SortExpression="PayOff"
                        UniqueName="PayOff" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="PrincipleBalance" NumericType="Currency" FilterControlAltText="Filter PrincipleBalance column"
                        HeaderStyle-Wrap="true" HeaderText="PRIN BAL" SortExpression="PrincipleBalance"
                        UniqueName="PrincipleBalance" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="AccruedInterestAmount" NumericType="Currency"
                        FilterControlAltText="Filter AccruedInterestAmount column" HeaderStyle-Wrap="true"
                        HeaderText="ACCRUED INT" SortExpression="AccruedInterestAmount" UniqueName="AccruedInterestAmount"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="LastPaymentAmount" NumericType="Currency" FilterControlAltText="Filter LastPaymentAmount column"
                        HeaderStyle-Wrap="true" HeaderText="LST PMT AMT" SortExpression="LastPaymentAmount"
                        UniqueName="LastPaymentAmount" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridDateTimeColumn DataField="LastPaymentDate" DataFormatString="{0:MM/dd/yyyy}"
                        FilterControlAltText="Filter LastPaymentDate column" HeaderStyle-Wrap="true"
                        HeaderText="LST PMT DT" SortExpression="LastPaymentDate" UniqueName="LastPaymentDate"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridDateTimeColumn>
                <telerik:GridNumericColumn DataField="TotalPaymentsCount" FilterControlAltText="Filter TotalPaymentsCount column"
                        HeaderStyle-Wrap="true" HeaderText="TTL PMTS CNT" SortExpression="TotalPaymentsCount" Visible = "false"
                        UniqueName="TotalPaymentsCount" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="TotalPaymentsCountCalc" NumericType="Number" DecimalDigits="0" FilterControlAltText="Filter TotalPaymentsCountCalc column"
                        HeaderStyle-Wrap="true" HeaderText="TTL PYMTS CNT CALC" SortExpression="TotalPaymentsCountCalc"
                        UniqueName="TotalPaymentsCountCalc" Visible="false" ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridNumericColumn>
                <telerik:GridCheckBoxColumn DataField="isPledegEligible" FilterControlAltText="isPledegEligible" Visible = "false"
                        HeaderStyle-Wrap="true" HeaderText="isPledegEligible" SortExpression="isPledegEligible" UniqueName="isPledegEligible"
                        ReadOnly="true">
                    <HeaderStyle Wrap="True" />
                </telerik:GridCheckBoxColumn>
            </Columns>
            <ItemStyle CssClass="Row0" />
            <AlternatingItemStyle CssClass="Row1" />
        </MasterTableView>
        <FilterMenu EnableImageSprites="false" />
        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
        <HeaderStyle Wrap="False" />
        <FilterMenu EnableImageSprites="false" />
        <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
    </telerik:RadGrid>
</telerik:RadPageView>

The CSS is:

div.RadGrid .rgDataDiv
{
    font: normal 13px arial;
    /* height: auto !important; */
}

div.RadGrid .Row0 td
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #FFFFFF;    /* White */
}
div.RadGrid .Row1 td
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #DFC5DF;    /* Lite Grey */
}
div.RadGrid .Row2 td
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #CCFF99;    /* Parchment */
}

div.RadGrid tr.Row0
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #FFFFFF;    /* White */
}
div.RadGrid tr.Row1
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #DFC5DF;    /* Lite Grey */
}
div.RadGrid tr.Row2 td
{
    padding-top: 0;
    padding-bottom: 0;
    height: 1px;
    vertical-align: middle;
    border: 1 solid black;
    font: normal 10px arial;
    color: Black;
    background: #CCFF99;    /* Parchment */
}

Thanks for your help!

[Princy]

Hi Miles,

Try setting the selected item style in SelectedItemStyle CssClass.

ASPX:

<SelectedItemStyle CssClass="SelectedItem" />

CSS:

.SelectedItem td
{
    padding-top : 0 !important;
    padding-bottom: 0 !important;
    height: 1px !important;
    vertical-align: middle !important;
    border: 1 solid black !important;
    font: normal 10px arial !important;
    color: Black !important;
    background-color: #CCFF99 !important;
}

Thanks,
Princy.

[Sayle]

Hi Princy!
Thank you for your response; however, adding the " !important;" attribute to each entry of the .SelectedItemStyle CSS class didn't change anything at all...

Do you know of anything else I could try or any "gotcha's" I should look for?

Regards,
-Miles

[Galin]

Hi Miles,


You do not need extra styles to see the active/selected row or cell as you can see at the following demo pages
http://demos.telerik.com/aspnet-ajax/grid/examples/client/cellselection/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/keyboardnavigation/defaultcs.aspx

I hope this helps.

All the best,
Galin
the Telerik team