[Solved] Skin not applied to RadDatePicker

[Thomas]

I running into a problem whereby the Skin styles are not applied to a DatePicker control.The effect is that the calendar cannot be opened (even though it shows my icons which are set manually). The DatePicker is on a custom UserControl used for editing a RadGrid which itself is on a page with a DesignMaster. The RadGrid has the Office2007 skin applied by virtue of a .skin file and theme.

<telerik:RadGrid ID="ValueGrid" runat="server" AutoGenerateColumns="False"
    Width="100%" GridLines="Horizontal"
    AllowAutomaticDeletes="true" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
    OnNeedDataSource="ValueGrid_NeedDataSource"
    OnItemDataBound="ValueGrid_ItemDataBound"
    OnDeleteCommand="ValueGrid_DeleteCommand"
    OnInsertCommand="ValueGrid_InsertCommand"
    OnUpdateCommand="ValueGrid_UpdateCommand">
    <MasterTableView DataKeyNames="Key" CommandItemDisplay="Top"
        NoMasterRecordsText="No additional info data for this contract."
        ShowHeadersWhenNoRecords="true">
        <Columns>
            <telerik:GridButtonColumn CommandName="Edit" ButtonType="ImageButton" Text="Edit"
                UniqueName="EditCommandColumn"
                ImageUrl="~/App_Themes/Default/buttons/grid_edit.jpg">
                <HeaderStyle Width="20px" />
            </telerik:GridButtonColumn>

            <telerik:GridTemplateColumn DataField="Attribute" HeaderText="Type">
                <HeaderStyle Width="100px" />
                <ItemStyle Width="100px" />
                <ItemTemplate>
                    <asp:Literal ID="AttributeLabel" runat="server"
                        Text='<%#DataBinder.Eval(Container, "DataItem.Attribute.Name") %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridTemplateColumn HeaderText="Value">
                <HeaderStyle Width="300px" />
                <ItemStyle Width="300px" />
                <ItemTemplate>
                    <asp:Literal ID="ValueLabel" runat="server"
                        Text='<%# ((AttributeValue)DataBinder.Eval(Container, "DataItem")).DisplayMarkup %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>

            <telerik:GridBoundColumn DataField="Note" HeaderText="Note">
                <HeaderStyle Width="150px" />
                <ItemStyle Width="150px" />
            </telerik:GridBoundColumn>

            <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="DeleteColumn" CommandName="Delete"
                ImageUrl="~/App_Themes/Default/buttons/grid_delete.jpg"
                ConfirmText="<%$Resources:AvailsResources, DeleteConfirmationGeneral%>">
                <HeaderStyle Width="20px" />
            </telerik:GridButtonColumn>
        </Columns>
        <CommandItemSettings AddNewRecordText="Add" />
        <EditFormSettings
            UserControlName="~/Controls/AttributeValueEdit.ascx"
            EditFormType="WebUserControl" >
            <EditColumn ButtonType="ImageButton"
                InsertImageUrl="~/App_Themes/Default/buttons/grid_add.jpg"
                UpdateImageUrl="~/App_Themes/Default/buttons/grid_update.jpg"
                CancelImageUrl="~/App_Themes/Default/buttons/grid_cancel.jpg">
            </EditColumn>
        </EditFormSettings>
    </MasterTableView>
</telerik:RadGrid>

Here is the UserControl markup:

<table class="standardTable">
    <colgroup>
        <col width="80px" />
        <col width="100%" />
    </colgroup>
    <tr>
        <td>
            <asp:Label ID="AttributeLabel" runat="server" meta:resourcekey="AttributeLabel" /></td>
        <td>
            <asp:DropDownList ID="AttributeEdit" runat="server" AutoPostBack="True"
                Width="200px"
                DataValueField="Key" DataTextField="Name"
                OnSelectedIndexChanged="AttributeEdit_SelectedIndexChanged">
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="ValueLabel" runat="server" meta:resourcekey="ValueLabel" />
        </td>
        <td>
            <telerik:RadDatePicker ID="ValueDateEdit" runat="server" Width="104px" Skin="Web20">
                <Calendar ID="ValueDateCalendar" runat="server" Skin="Web20">
                </Calendar>
                <DateInput runat="server" EnabledStyle-HorizontalAlign="Right" Skin="Default" MinDate="1900-01-01" DateFormat="<%$ SystemSetting:ShortDatePattern %>" />
                <DatePopupButton ImageUrl="~/App_Themes/Default/icons/icon_datePickerPopup.gif"
                    HoverImageUrl="~/App_Themes/Default/icons/icon_datePickerPopupHover.gif" />
            </telerik:RadDatePicker>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="NoteLabel" runat="server" meta:resourcekey="NoteLabel" /></td>
        <td>
            <asp:TextBox ID="NoteEdit" runat="server" Width="150px" />
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:Button ID="SaveButton" runat="server" CommandName="Update" meta:resourcekey="SaveButton" />
            <asp:Button ID="CancelButton" runat="server" meta:resourcekey="CancelButton"
                CausesValidation="False" CommandName="Cancel" />
        </td>
    </tr>
</table>

The style "standardTable" is defined as follows:

table.standardTable
{
    table-layout    :   fixed;
    border      :   none 0px;
    border-collapse :   collapse;
    border-spacing  :   0px;
}
table.standardTable select, table.standardTable input
{
    font            :   menu;
}

[Vlad]

Hello Thomas,

Do you have any ajax in your scenario (UpdatePanel, RadAjaxManager, etc)? If this is the case can please turn it off temporary to see what will be the result?

Kind regards,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Thomas]

Indeed I did have an AjaxManager on the control with the grid. However, the AjaxManager was not setup with the grid triggering to itself. Instead, I had another button above the grid which triggered a refresh of the grid. Regardless, once I removed the AjaxManager, the styles were applied properly.

Now, that said, I would obviously like to Ajax-ify the grid including an ajax refresh on firing my button.

[Sebastian]

Hello Thomas,

I tried to replicate the issue using the latest release Q3 2007 SP1 of RadControls Prometheus but unfortunately to no avail. Note that I have created grid-to-grid ajax settings to refresh the control because the other ajax setting (button-to-grid) automatically creates MS UpdatePanel around the grid and ajaxifies it. The grid has its Office2007 skin applied while the date picker control inside the WebUserControl edit form uses the Default skin.

Can you please confirm the proper behavior on your machine? Any further details concerning your addition RadAjaxManager settings can lead us to the source of the problem to eliminate it accordingly.

Kind regards,

Stephen

the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rune]

The asp:Updatepanel conflicts with radControls in general when it comes to skinning using the Skin property. For some reason, running radcontrols wrapped inside an Updatepanel generates partial skin-rendering for both updatemodes.

My calendar shows, but lacks background and font-styles when rendering the overlay-layer showing the dates (clicking the icon). The dates are shown and I'm able to click a date to send it back to the input of the calendar control.

The RadTreeview have the same problem. It doesn't show correct style specified in any default Skin. Some of the styles do work and some don't. For instance clicking a radtree-element marking it gives me a solid background with UpdatePanel turned off, and the default page font-style when updatepanel wrapper removed.

The same goes for the RadDock.
I guess this problem has been in attention before, so what am I doing wrong?


Regards,
Rune Solberg

[Sebastian]

Hi Rune,

As a first step can you please verify that you are using the latest version 2008.2.826 of RadControls for ASP.NET AJAX (formerly Prometheus)?

Secondly, in case your controls are initially hidden on the page and you display them after ajax request, you will need to register their style sheets manually on the page. This is a known issue with the MS UpdatePanels which is explained in this help topic:

http://www.telerik.com/help/aspnet-ajax/troubleshooting.html (paragraph 'RadControl stylesheet is not registered after an ajax request (inside MS UpdatePanel) when the control is not initially visible on the page')

Finally, if you fall under the second case, replace the MS UpdatePanel with RadAjaxPanel or ajaxify the control via RadAjaxManager. Thus the stylesheet should be applied properly after an ajax request even if the RadControl is initially invisible.

Best regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Rune]

Thanks Stephen!

Tried the simplest solution first by replacing the MS UpdatePanel control with RadAjaxPanel and it did the trick. It did not fall into my attention in the first place because of an earlier confusion about postback problems to MS controls when enabling AJAX for specific radcontrols on a single page using RadAjax Panel.

I'm using the Q2 2008 release of RadControls in my project. Works like a dream.

Thanks for the fast response and great support!

Rune Solberg

[Anupam Godbole]

Adding the following lines to the web.config worked like a charm for me.

<location path="Telerik.Web.UI.WebResource.axd">
   <system.web>
     <authorization>
       <allow users="*"/>
     </authorization>
   </system.web>
 </location>