Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

radGrid doesn't support CSS3 Rounded Corners

6 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shane Milton
Top achievements
Rank 2
Shane Milton asked on 15 Jan 2010, 08:29 PM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 18 Jan 2010, 11:54 AM
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.
0
atul
Top achievements
Rank 1
answered on 13 Sep 2011, 08:04 AM
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 ...
0
Princy
Top achievements
Rank 2
answered on 13 Sep 2011, 08:35 AM
Hello Atul,

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

Thanks,
Princy.
0
atul
Top achievements
Rank 1
answered on 13 Sep 2011, 01:58 PM
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.


0
atul
Top achievements
Rank 1
answered on 06 Oct 2011, 02:20 AM
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
0
atul
Top achievements
Rank 1
answered on 06 Oct 2011, 06:08 AM
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();
            }
Tags
Grid
Asked by
Shane Milton
Top achievements
Rank 2
Answers by
Dimo
Telerik team
atul
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or