radGrid doesn't support CSS3 Rounded Corners

7 posts, 0 answers
  1. Shane Milton
    Shane Milton avatar
    219 posts
    Member since:
    Dec 2003

    Posted 15 Jan 2010 Link to this post

    A growing number of people (including us) have been using CSS3 (proprietary-only for now) rounded corners and some Telerik controls play nicely with it and some do not. It would be handy if you could start adding compatibility for these.

    <Telerik:RadGrid ... style="-moz-border-radius: 3ex;-webkit-border-radius: 3ex;" /> is how I would define it (if you try it and view it in Chrome or FireFox, you'll see that it doesn't play very nicely).

    Many thanks!!
    -Shane
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Jan 2010 Link to this post

    Hello Shane,

    I created a simple test page and my conclusion is that the problem is caused by the browsers' limited support for rounded corners when the rounded element contains a table with cell borders, background colors or background images.


    <%@ Page Language="C#" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Rounded corners</title>
    <style type="text/css">
     
    .MyDiv
    {
        width:600px;
        border:1px solid #666;
    }
     
    .MyRow
    {
        background:#fff;
    }
     
    .MyAltRow
    {
        background:#ff9;
    }
     
     
    .MyRow td
    {
        border-bottom:1px solid red;
    }
     
    .MyAltRow td
    {
        border-bottom:1px solid green;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
     
    <div class="MyDiv" style="-moz-border-radius: 3ex;-webkit-border-radius: 3ex;">
    <table cellspacing="0" style="width:100%">
    <tr class="MyRow"><td>aa</td><td>aa</td><td>aa</td><td>aa</td><td>aa</td></tr>
    <tr class="MyAltRow"><td>aa</td><td>aa</td><td>aa</td><td>aa</td><td>aa</td></tr>
    </table>
    </div>
     
    </form>
    </body>
    </html>


    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. atul
    atul avatar
    7 posts
    Member since:
    Apr 2011

    Posted 13 Sep 2011 Link to this post

    I being bit lazy i know it can be fixed but thought of asking you guys first.....

    Radgrid can have round corner agreed but if we add CommandItemTemplateit doesn't work for CommandItemTemplate ...is there any css fix available for this ...
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 Sep 2011 Link to this post

    Hello Atul,

    Take a look at the following forum thread which implements the similar scenario.
    Rounded Corner on RadGrid Header

    Thanks,
    Princy.
  6. atul
    atul avatar
    7 posts
    Member since:
    Apr 2011

    Posted 13 Sep 2011 Link to this post

    Hi Princy,
    Thanks for your prompt reply i have already applied the solution that have mentioned but it is not working for commanditemtemplate.

    THIS IS MY CSS FILE

    div.RadGrid, div.RadGrid table.rgMasterTable thead
    {
        -moz-border-radius: 10px 10px 0 0;
        -webkit-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0;
    }
    div.RadGrid table.rgMasterTable thead th.rgHeader:first-child
    {
        -moz-border-radius: 10px 0 0 0;
        -webkit-border-radius: 10px 0 0 0;
        border-radius: 10px 0 0 0;
    }
    div.RadGrid table.rgMasterTable thead th.rgHeader:last-child
    {
        -moz-border-radius: 0 10px 0 0;
        -webkit-border-radius: 0 10px 0 0;
        border-radius: 0 10px 0 0;
    }


    THIS IS MY RADGRID

       <telerik:RadGrid ID="rgListOptions" runat="server" GridLines="None" AutoGenerateColumns="False"
                    AllowPaging="True" PageSize="15" HorizontalAlign="NotSet" AllowAutomaticDeletes="true"
                    AllowAutomaticInserts="true" AllowAutomaticUpdates="true" DataSourceID="dsSimpleListOption">
                    <MasterTableView CommandItemDisplay="Top" CommandItemStyle-HorizontalAlign="Right"
                        DataKeyNames="SimpleListOptionID">
                        <RowIndicatorColumn Visible="False" FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="">
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn Resizable="False" Visible="False" CollapseImageUrl="" ExpandImageUrl=""
                            FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="">
                        </ExpandCollapseColumn>
                        <CommandItemTemplate>
                            <telerik:RadButton ID="AddNew" runat="server" Text="Add" ToolTip="Click to add" OnClick="AddNew_Click">
                                <Icon PrimaryIconUrl="RadButtonImages/btnAdd.png" PrimaryIconLeft="4" PrimaryIconTop="4" />
                            </telerik:RadButton>
                        </CommandItemTemplate>
                        <Columns>
                            <telerik:GridTemplateColumn AllowFiltering="False" UniqueName="TemplateColumn">
                                <ItemTemplate>
                                    <asp:ImageButton CssClass="Button" ID="btnEdit" runat="server" ImageUrl="~/Images/edit.gif"
                                        CommandName="Edit" />
                                </ItemTemplate>
                                <ItemStyle Width="16px" />
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="OptionName" HeaderText="Option Name" SortExpression="OptionName"
                                UniqueName="OptionName" FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OptionData" HeaderText="Option Data" SortExpression="OptionData"
                                UniqueName="OptionData" FilterImageUrl="" SortAscImageUrl="" SortDescImageUrl="">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn AllowFiltering="False" UniqueName="TemplateColumnDel">
                                <ItemTemplate>
                                    <asp:ImageButton CssClass="Button" ID="btnDelete" runat="server" ImageUrl="~/Images/delete.gif"
                                        CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete this list option?');" />
                                </ItemTemplate>
                                <ItemStyle Width="16px" />
                            </telerik:GridTemplateColumn>
                        </Columns>
                        <EditFormSettings EditFormType="Template">
                            <FormTemplate>
                                <asp:Panel ID="pnlForm" runat="server" DefaultButton="btnSave">
                                    <table>
                                        <tr>
                                            <td class="formLabelLeft">
                                                Option Name
                                            </td>
                                            <td>
                                                <asp:HiddenField ID="hfName" runat="server" Value='<%# Eval("OptionName") %>' />
                                                <telerik:RadTextBox ID="tbName" runat="server" Text='<%# Bind("OptionName") %>' Skin=""
                                                    EnableEmbeddedBaseStylesheet="false">
                                                </telerik:RadTextBox>
                                                <asp:RequiredFieldValidator ID="reqtbName" runat="server" ControlToValidate="tbName"
                                                    Display="Dynamic" ErrorMessage="Name is required." ToolTip="Name is required."><img src="RadButtonImages/Invalid.png" alt="invalid" /></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="formLabel">
                                                Option Data
                                            </td>
                                            <td>
                                               
                                                <telerik:RadTextBox ID="tbData" runat="server" Text='<%# Bind("OptionData") %>' Skin=""
                                                    EnableEmbeddedBaseStylesheet="false">
                                                </telerik:RadTextBox>
                                                <asp:HiddenField ID="hfData" runat="server" Value='<%# Eval("OptionData") %>' />
                                                <asp:RequiredFieldValidator ID="reqtbData" runat="server" ControlToValidate="tbData"
                                                    Display="Dynamic" ErrorMessage="Name is required." ToolTip="Name is required."><img src="RadButtonImages/Invalid.png" alt="invalid" /></asp:RequiredFieldValidator>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <asp:Label ID="ErrorLabel" runat="server" CssClass="errorlbl"></asp:Label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="text-align: right;">
                                                <telerik:RadButton ID="btnSave" runat="server" Text="Save" ToolTip="Click to add"
                                                    CommandName='<%# IIf(CType(Container,GridItem).OwnerTableView.IsItemInserted ,"PerformInsert","Update") %>'>
                                                    <Icon PrimaryIconUrl="RadButtonImages/btnSave.png" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>
                                                <telerik:RadButton ID="btnCancel" runat="server" Text="Cancel" ToolTip="Cancel" CommandName="Cancel"
                                                    CausesValidation="false">
                                                    <Icon PrimaryIconUrl="RadButtonImages/btnCancel.png" PrimaryIconLeft="4" PrimaryIconTop="4" />
                                                </telerik:RadButton>
                                            </td>
                                        </tr>
                                    </table>
                                </asp:Panel>
                            </FormTemplate>
                            <EditColumn UniqueName="EditCommandColumn1" CancelImageUrl="" EditImageUrl="" FilterImageUrl=""
                                InsertImageUrl="" SortAscImageUrl="" SortDescImageUrl="" UpdateImageUrl="">
                            </EditColumn>
                        </EditFormSettings>
                        <%--  <FooterStyle ForeColor="#6699CC" />
                        <HeaderStyle ForeColor="#6699CC" />--%>
                    </MasterTableView>
                </telerik:RadGrid>
    I know i can do this without using commanditem template but i just want to see it working with it.....
    Any help???
    Kind Regard,
    Atul Chaudhary.


  7. atul
    atul avatar
    7 posts
    Member since:
    Apr 2011

    Posted 05 Oct 2011 Link to this post

    Hi,

    Im using raddatepicker and i want to set the dataforamt string for that. But in my case i got the appsetting for formats in my webconfig. Please look below
     <appSettings>
        <add key="LongDateDisplayFormat" value="dddd, MMMM dd, yyyy"/>
        <add key="ShortDateDisplayFormat" value="dd-MMM-yyyy"/>
        <!--<add key="ShortDateDisplayFormat" value="{0:yyyy-MMM-dd}"/>-->
        <add key="DateTimeDisplayFormat" value="yyyy-MMM-dd hh:mm:ss"/>
     </appSettings>

    Now Is there anyway i can assign this app setting in page source for raddatepicker. Please keep in mind i want to do that from page source only not from code behind.

     <telerik:RadDatePicker ID="RadDatePicker1" runat="server" OnPreRender="RadDatePicker1_OnPreRender">
            <DateInput runat="server" DateFormat="WANT TO ACCESS MY APP SETTING VALUE HERE">
            </DateInput>
        </telerik:RadDatePicker>

    It is urgent. 

    Kind Regards,
    Atul Chaudhary
  8. atul
    atul avatar
    7 posts
    Member since:
    Apr 2011

    Posted 06 Oct 2011 Link to this post

    Hi,

    I solved it sorry for posting it bit late the solution for this is

    To read it from webconfig. LongDateDisplayFormat is setting name

     <telerik:RadDatePicker ID="RadDatePicker1" runat="server" OnPreRender="RadDatePicker1_OnPreRender">
            <DateInput runat="server" DateFormat="<%$ appSettings: LongDateDisplayFormat %>">
            </DateInput>
        </telerik:RadDatePicker>

    To read it from class property LongDateFormat is property name which return string
     <telerik:RadDatePicker ID="RadDatePicker3" runat="server">
            <DateInput ID="DateInput1" runat="server" DateFormat='<%# LongDateFormat %>'>
            </DateInput>
        </telerik:RadDatePicker>

    Need to do this in page code to get it working if reading from class property
     if (!IsPostBack)
                {
                   DataBind();
                }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017