Telerik Forums / UI for ASP.NET AJAX Forum / Grid /

Applying CSS to RadGRID rows

Telerik UI for ASP.NET AJAX
Resources Buy Try

11 posts, 2 answers

Maruti

5 posts

Member since:
Oct 2011

Posted 03 Nov 2011 Link to this post

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

2733 posts

Member since:
May 2010

Posted 03 Nov 2011 Link to this post

Hello,

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

Thanks,
Jayesh Goyani
Answer
Shinu

17764 posts

Member since:
Mar 2007

Posted 03 Nov 2011 Link to this post

Hello Maruti,

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

ASPX:

<ClientSettings EnableAlternatingItems="false">

</ClientSettings>

Thanks,
Shinu.
Maruti

5 posts

Member since:
Oct 2011
Posted 04 Nov 2011 Link to this post

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

TelerikGrid-UI.png

Expected-UI.jpg
Answer
Jayesh Goyani

2733 posts

Member since:
May 2010
Posted 04 Nov 2011 Link to this post

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

Header-border.png
Maruti

5 posts

Member since:
Oct 2011

Posted 07 Nov 2011 Link to this post

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

2733 posts

Member since:
May 2010

Posted 08 Nov 2011 Link to this post

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

5 posts

Member since:
Oct 2011

Posted 08 Nov 2011 Link to this post

.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

2733 posts

Member since:
May 2010

Posted 08 Nov 2011 Link to this post

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

1 posts

Member since:
Apr 2016
Posted 01 Apr 2016 Link to this post

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

radgrid.png
Eyup
Admin

4081 posts

Posted 06 Apr 2016 Link to this post

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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

Applying CSS to RadGRID rows

Maruti

Jayesh Goyani

Shinu

Maruti

Jayesh Goyani

Maruti

Jayesh Goyani

Maruti

Jayesh Goyani

Manish

Eyup