Applying CSS to RadGRID rows

[Maruti]

Hi,

  We need a grid that does not have alternate row styling and the grid lines property needs to be set to both i.e. we need both horizontal and vertical gridlines. With the default skin though I set the gridlines= "Both", the lines are visible.

I have checked the skins available and none of them currently provides this. Can you please suggest us a skin which can be applied to acheive this look. Else please let us know how to change the CSS of the default skin.

We are currently in process of evaluating Radgrid for using in our project. Please do reply ASAP, it will help us in our decision making.

Thanks,
Maruti

[Jayesh Goyani]

Hello,

can you please provide Image (screenshot) , which type of UI you want ?

Thanks,
Jayesh Goyani

[Shinu]

Hello Maruti,

You can set the "EnableAlternatingItems" as false to remove the alternate row style.

ASPX:

<ClientSettings EnableAlternatingItems="false">
</ClientSettings>

Thanks,
Shinu.

[Maruti]

Thanks Shinu, I disabled the alternatingitems property and it looks Ok.

Jayesh,

  I have attached the expected UI and the UI we have using Telerik grid. I am unable to apply grid lines to header. The following is the CSS I am using.

.RadGrid_Default .rgHeader, .RadGrid_Default th.rgResizeCol {
border: 1;
border-bottom: 0px solid #828282;
border-right: 1px #D2D2D2 solid;
border-width: 0px 0px 1px 1px !important;
}

Also the text box and calendar controls come with border. Any inputs how to get rid of them? When scroll to right the Grid row height reduces (auto-adjust) itself as Effective date and expiry date are hidden. Rest of the columns are simple text boxes. How do I stop this?

Maruti

[Jayesh Goyani]

Hello,

.HeaderwithBorder
      {
          border-left: 2px !important;
          border-left-style: solid !important;
          border-left-color: Red !important;
      }

<Columns>
                    <telerik:GridBoundColumn DataField="ID1" HeaderText="ID1" UniqueName="ID1">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ID2" HeaderText="ID2" UniqueName="ID2">
                        <HeaderStyle CssClass="HeaderwithBorder" />
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn>
                        <ItemTemplate>
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
                            </telerik:RadDatePicker>
                        </ItemTemplate>
                        <HeaderStyle CssClass="HeaderwithBorder" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridDateTimeColumn DataField="myData" UniqueName="myData" HeaderText="myData"
                        PickerType="DatePicker">
                        <HeaderStyle CssClass="HeaderwithBorder" />
                    </telerik:GridDateTimeColumn>
                    <telerik:GridButtonColumn CommandName="Delete" Text="Supprimer" UniqueName="column2">
                        <HeaderStyle CssClass="HeaderwithBorder" />
                    </telerik:GridButtonColumn>
                </Columns>

also see attached image for result.


Thanks,
Jayesh Goyani

[Maruti]

Thanks Jayesh.

I put the CSS at the Radgrid level and it worked for all columns.
<telerik:RadGrid HeaderStyle-CSSclass = "HeaderStyle">

When a template column has to controls the CSS the border is also applied to the controls. Not sure how to resolve this. See the Telerik.png in my previous post. The code is attached below.

 

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                                                       UniqueName="EffectiveDt" HeaderText='<%$Resources:WebSQPResource,EffectiveDate%>'
                                                       HeaderStyle-Width="150px">
                                                       <ItemTemplate>
                                                           <table style="width: 100%">
                                                               <tr style="width: 100%">
                                                                   <td style="width: 90%">
                                                                       <asp:TextBox runat="server" MaxLength="10" ID="txtEffDt" Text='<%# Bind("EffectiveDate") %>'
                                                                           CssClass="TextBox"  BorderStyle= "None" Width="100%" />
                                                                       <asp:RequiredFieldValidator ID="rftxtEffectiveDate" ControlToValidate="txtEffDt"
                                                                           ErrorMessage='<%$Resources:WebSQPResource,ERR_PLC_012%>' runat="server" Display="None" />
                                                                   </td>
                                                                   <td style="padding-left: 4px">
                                                                       <asp:ImageButton runat="server" ID="imgEffDt" CausesValidation="false" ImageUrl='<%$Resources:WebSQPResource,ImgCalendar%>'
                                                                           ImageAlign="Top" CssClass="calnderimagegrid" />
                                                                       <ajax:CalendarExtender runat="server" ID="calEffDt" TargetControlID="txtEffDt" PopupButtonID="imgEffectiveDate"
                                                                           Format='<%$Resources:WebSQPResource,Common_DateFormat%>' />
                                                                       <ajax:MaskedEditExtender runat="server" ID="mskExtEffDt" TargetControlID="txtEffDt"
                                                                           MaskType="Date" Mask="99/99/9999" PromptCharacter="_" ClearMaskOnLostFocus="true" />
                                                                       <asp:CompareValidator ID="cmptxtEffDt" runat="server" ErrorMessage='<%$Resources:WebSQPResource,ERR_PLC_027%>'
                                                                           Display="None" ControlToValidate="txtEffDt" Type="Date" Operator="DataTypeCheck" />
                                                                   </td>
                                                               </tr>
                                                           </table>
                                                           <input id="hdnOperationType" runat="server" type="hidden" value='<%# Bind("OperationType") %>' />
                                                       </ItemTemplate>

[Jayesh Goyani]

Hello Maruti,

please provide me a CSSclass, Which applied to HeaderStyle-CSSclass.

so i can check and short out the problem.

Thanks,
Jayesh Goyani

[Maruti]

.RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td {
border-width: 0px 0px 1px 1px !important;
}

.RadGrid_Default .rgAltRow, .RadGrid_Default .rgRow td {
 border-color: gray !important;
 font-family:Arial,Helvetica,sans-serif;
       font-size:12px;
       font-weight:normal;
       color:Black;
       border-bottom :1px #D2D2D2 solid;
       border-right: 1px #D2D2D2 solid;
       padding: 3px;
}

Jayesh,

   I have attached the CSS that is getting applied is for the rows.

Thanks,
Maruti

[Jayesh Goyani]

Hello,

You  assign "RadGrid_Default .rgRow td, .RadGrid_Default .rgAltRow td"
so it apply to all TD inside rgRow class. (its apply to your itemtemplate's td also.)

use <div> in-place of <table>  structure.

<ItemTemplate>

                      


<div style="width: 100%">

                              


                                   <asp:TextBox runat="server" MaxLength="10" ID="txtEffDt" Text='<%# Bind("EffectiveDate") %>'

                                       CssClass="TextBox" BorderStyle="None" Width="100%" />

                                   <asp:RequiredFieldValidator ID="rftxtEffectiveDate" ControlToValidate="txtEffDt"

                                       ErrorMessage='<%$Resources:WebSQPResource,ERR_PLC_012%>' runat="server" Display="None" />

                               

</div> <div style="width: 100%">

                                   <asp:ImageButton runat="server" ID="imgEffDt" CausesValidation="false" ImageUrl='<%$Resources:WebSQPResource,ImgCalendar%>'

                                       ImageAlign="Top" CssClass="calnderimagegrid" />

                                   <ajax:calendarextender runat="server" id="calEffDt" targetcontrolid="txtEffDt" popupbuttonid="imgEffectiveDate"

                                       format='<%$Resources:WebSQPResource,Common_DateFormat%>' />

                                   <ajax:maskededitextender runat="server" id="mskExtEffDt" targetcontrolid="txtEffDt"

                                       masktype="Date" mask="99/99/9999" promptcharacter="_" clearmaskonlostfocus="true" />

                                   <asp:CompareValidator ID="cmptxtEffDt" runat="server" ErrorMessage='<%$Resources:WebSQPResource,ERR_PLC_027%>'

                                       Display="None" ControlToValidate="txtEffDt" Type="Date" Operator="DataTypeCheck" />

                               

</div> <div style="width: 100%">


                       <input id="hdnOperationType" runat="server" type="hidden" value='<%# Bind("OperationType") %>' />

</div>
                   </ItemTemplate>

Thanks,
Jayesh Goyani

[Manish]

i want my telerik rad grid desing color like header and columns

[Eyup]

Hello Manish,

If you do not want to use one of the built-in Skins:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/appearance-and-styling/skins

You can modify them depending on your own preferences:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/appearance-and-styling/modifying-existing-skins

Hope this helps.

Regards,
Eyup
Telerik