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

ActiveItemStyle-CssClass doesn't work?

3 Answers 93 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sayle
Top achievements
Rank 1
Sayle asked on 18 Jun 2012, 08:19 PM
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!



3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 20 Jun 2012, 09:42 AM
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.
0
Sayle
Top achievements
Rank 1
answered on 20 Jun 2012, 10:37 PM
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
0
Galin
Telerik team
answered on 21 Jun 2012, 04:27 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Sayle
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Sayle
Top achievements
Rank 1
Galin
Telerik team
Share this question
or