Applying CSS to RadGRID rows

11 posts, 2 answers
  1. Maruti
    Maruti avatar
    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
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Shinu
    Shinu avatar
    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.
  5. Maruti
    Maruti avatar
    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
  6. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  7. Maruti
    Maruti avatar
    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>
  8. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  9. Maruti
    Maruti avatar
    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
  10. Jayesh Goyani
    Jayesh Goyani avatar
    2732 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
  11. Manish
    Manish avatar
    1 posts
    Member since:
    Apr 2016

    Posted 01 Apr Link to this post

    i want my telerik rad grid desing color like header and columns
  12. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 06 Apr 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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017