Button Render

[Cush]

Hi All

I have two buttons inside a Grid Edit form,
I can see the text on the buttons but the skins are not rendering?
I have used this method before and it worked fine, the only difference is a am using Ajax Manager on this occasions and i used a panel before,
I have also found that on few few occasions the Datepicker's have not rendered properly, they have rendered as a frame,
the button error is constant though.

<EditFormSettings EditFormType="Template">
<FormTemplate>
   <table style="width: 100%;">
       <tr>
           <td align="left" width="25%">
               <asp:Label ID="MadeDteLabel" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="Agreement Made:"></asp:Label>
           </td>
           <td align="left" width="25%">
               <telerik:RadDatePicker ID="MadeDatePicker" runat="server" Skin="Web20">
                   <Calendar runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
                       Skin="Web20">
                   </Calendar>
                   <DateInput runat="server" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy">
                   </DateInput>
                   <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
               </telerik:RadDatePicker>
           </td>
           <td align="left" width="25%">
               <asp:Label ID="Label2" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="RebateType:"></asp:Label>
           </td>
           <td align="left" colspan="2" width="25%">
               <telerik:RadComboBox ID="RebTypComboBox" runat="server" DataTextField="rebateType"
                   DataValueField="rebateTypeID" Skin="Web20" Width="150px">
                   <Items>
                       <telerik:RadComboBoxItem runat="server" Text="--" Value="0" Selected="true" />                   </Items>
               </telerik:RadComboBox>
           </td>
       </tr>
       <tr>
           <td align="left" width="25%">
               <asp:Label ID="RevDteLabel" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="Rebate Revision Date:"></asp:Label>
           </td>
           <td align="left" width="25%">
               <telerik:RadDatePicker ID="RevDatePicker" runat="server" Skin="Web20">
                   <Calendar runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x"
                       Skin="Web20">
                   </Calendar>
                   <DateInput runat="server" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy">
                   </DateInput>
                   <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
               </telerik:RadDatePicker>
           </td>
           <td align="left" width="25%">
               <asp:Label ID="Label1" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="Rebate Amount:"></asp:Label>
           </td>
           <td align="left" colspan="2" width="25%">
               <telerik:RadNumericTextBox ID="RebateAmt" runat="server" Text='<%# Bind("rebate_amount") %>'
                   Skin="Web20" Width="70px">
               </telerik:RadNumericTextBox>
           </td>
       </tr>
       <tr>
           <td align="left" width="25%">

           </td>
           <td align="left" width="25%">
               <asp:CheckBox ID="AgentRebApplyAllCB" runat="server" AutoPostBack="true" Font-Names="Arial"
                   Font-Size="X-Small" OnCheckedChanged="AgentRebApplyAllCB_CheckedChanged" Text="Apply To All Ports" />
           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" colspan="2" width="25%">
               <asp:Label ID="RebORLabel0" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="Rate Terms:"></asp:Label>
           </td>
       </tr>
       <tr>
           <td align="left" width="25%">
               <asp:Label ID="RebAPLabel" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="X-Small"
                   Text="Applicable Port:"></asp:Label>
           </td>
           <td align="left" width="25%">
               <telerik:RadComboBox ID="RebAppPortComboBox" runat="server" Skin="Web20">
               </telerik:RadComboBox>
           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" colspan="2" width="25%">
               <telerik:RadComboBox ID="RebTermComboBox" runat="server" DataTextField="term_type"
                   DataValueField="termID" Skin="Web20" Width="150px">
                   <Items>
                       <telerik:RadComboBoxItem runat="server" Text="--" Value="0" Selected="true" />
                       <telerik:RadComboBoxItem runat="server" Text="Weekly" Value="1" />
                       <telerik:RadComboBoxItem runat="server" Text="Monthly" Value="2" />
                       <telerik:RadComboBoxItem runat="server" Text="Quaterly" Value="3" />
                       <telerik:RadComboBoxItem runat="server" Text="Half Year" Value="4" />
                       <telerik:RadComboBoxItem runat="server" Text="Yearly" Value="5" />
                   </Items>
               </telerik:RadComboBox>
           </td>
       </tr>
       <tr>
           <td align="left" width="25%">

           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" colspan="2" width="25%">

           </td>
       </tr>
       <tr>
           <td align="left" width="25%">

           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" width="25%">

           </td>
           <td align="left" style="width: 12.5%" width="12.5%">
               <telerik:RadButton ID="btnUpdate" CommandName='<%#  Iif (TypeOf Container is GridEditFormInsertItem, "PerformInsert", "Update") %>'
                   runat="server" Skin="Web20" Text='<%#  Iif (TypeOf Container is GridEditFormInsertItem, "Insert", "Update") %>'>
               </telerik:RadButton>
           </td>
           <td align="left" style="width: 12.5%" width="12.5%">
               <telerik:RadButton ID="btnCancel" runat="server" Skin="Web20" CausesValidation="false"
                   CommandName="Cancel" Text="Cancel">
               </telerik:RadButton>
           </td>
       </tr>
   </table>
</FormTemplate>
</EditFormSettin

Any advice "As Always" would be appriciated.

Best Regards

Cush
    

[Radoslav]

Hello Cush,

I tried to reproduce the described issue, but to no avail. I am sending you a simple example, based on your code. Also on the following link I attached a small video which demonstrates how the example works on my side. Please check it out and let me know what differs in your case?
Looking forward for your reply.

Kind regards,
Radoslav
the Telerik team

[Cush]

Hi Radoslav

Thanks for taking the time to get back to me on this,
I have tried your sample code and it runs fine,
There are no differences between the two form templates at all, in fact i even copied your code over to mine and it runs fine but the button skins still do not appear? (Screen Shot Attached)

The only difference i have is that my grid is in a page view on a sliding pane?
I have other edit forms that render perfectly! i just cannot see where the difference is with this one.

If you have any thoughts i would be greatfull.

Many Thanks

Best Regards

Cush

[Cush]

Hi All

I have found another wierd twist to this problem?
Currently there are not any other Rad buttons on this page apart from the ones that do not render properly,
However if i place another button anywhere on the page the buttons render correctly?

Does anyone have any idea what the problem might be please.

Rgds

Cush

[Cush]

Hi Radoslav

I have found that removing the style tag from the page allows the button to render properley!

<style type="text/css">
        html, body, form, a img
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
            border: 0;
        }
</style>

I have no clue why but if you have a solution i would appriciate it.

Many Thanks

Regards

Cush

[Radoslav]

Hello Cush,

I still could not reproduce the described issue. I am sending you the modified version of the example with added css styles from your last post. However the button is styled as expected. It will be helpful if you could send us a small example where the described issue could be reproduced . You could open a formal support ticket from your Telerik account and attach a ZIP file there.Thus we will be able to debug the project and provide a solution.

Also if the problem exists only into the IE could you please verify that the count of the css files which are downloaded on the client is not bigger than 31. The IE has CSS limits, you could check out the following blog post for more information:
http://blogs.telerik.com/blogs/posts/10-05-03/internet_explorer_css_limits.aspx

Looking forward for your reply.

All the best,
Radoslav
the Telerik team

[Cush]

Hi Radoslav

Sorry for the delay and getting back to you,
Thanks very much for the information,
I had not exceeded the css limit as you explained but i remember that i has a similar problem with the scheduler and was advised by Telerik support to put a style sheet manager on the page.

I have done so in this case and it has rectified the problem.

Many Thanks again for you help

Best Regards

Cush

[Radoslav]

Hello Cush,

I am glad that you resolved the described issue. In case you experience any further problems, do not hesitate to contact us again.

Greetings,
Radoslav
the Telerik team