FormDecorator with MultiPageView, DropDownList and Google Chrome

4 posts, 0 answers
  1. Nick
    Nick avatar
    17 posts
    Member since:
    Jan 2012

    Posted 24 Apr 2012 Link to this post

    This is the scenario:

    RadFormDecorator on a page with a MultiPage and DropDownList inside two different PageViews.
    The default PageView renders fine - all the controls are nicely designed using the FormDecorator.

    On the other hand, on the 2nd PageView the FormDecorator is not doing its thing and the DropDownList keeps the default style.

    All the other controls work fine in both PageViews.

    The problem occurs only in Google Chrome - IE and FF work as expected. This was tested in Multiple Chrome versions - problem persists.

    Here is a sample code, nothing fancy:

    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" AsyncPostBackTimeout="1000">
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="rfd" runat="server" Skin="Office2010Blue" DecoratedControls="All" />
    <telerik:RadTabStrip ID="ts" runat="server" Skin="Office2007" MultiPageID="rp" CausesValidation="False"
        SelectedIndex="0" AutoPostBack="false">
        <Tabs>
            <telerik:RadTab Text="Customer Information" PageViewID="rvp1">
            </telerik:RadTab>
            <telerik:RadTab Text="Items" PageViewID="rvp2">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rp" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="rvp1" runat="server" Selected="true">
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rvp2" runat="server">
            <asp:DropDownList ID="DropDownList2" runat="server" Width="100px">
            </asp:DropDownList>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    </form>

  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 25 Apr 2012 Link to this post

    Hi Nick,

    In webkit based browsers it is not trivial both as complexity and performance, to detect the appearance of hidden elements. Therefore in such cases manual calling to the decorate method of the RadFormDecorator should be done. In your case the best option would be to register for the OnClientTabSelected and call the decorate method. Here is a sample implementation:
    function onTabSelected(tabStrip, args)
    {
        var fd = getFD();
        fd.decorate(args.get_tab().get_pageView().get_element(), false);
    }
      
    function getFD() { return $find("<%= rfd.ClientID %>"); }
    The second parameter in the decorate method prevents the FormDecorator from inserting additional CssClasses in the page, as they are already present.

    Hope this helps.

    Regards,
    Niko
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    17 posts
    Member since:
    Jan 2012

    Posted 25 Apr 2012 Link to this post

    Niko,

    Thank you for your response.
    This still does not explain two things - How come its working fine in FF?
    Moreover, how come all the other controls are OK but the DropDownList. If you put a Textbox / Button in the 2nd PageView, the Decorator will do its thing - the DropDownList seems to be the only issue.
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 26 Apr 2012 Link to this post

    Hi Nick,

    The Webkit based browsers have an issue with tracking the change of the visibility of the DOM elements. The FormDecorator does not decorate elements unless they are visible and tracks the invisible parents of such elements when they will appear and just then decorates them.
    The decoration of buttons and inputs in webkit browsers is different from decorating select elements. Inputs and buttons there are decorated using purely CSS, which explains why on JS manipulations are necessary. In FF and the rest decorating in both inputs and buttons is done using JS as well.
    To sum up, in webkit selects are decorated using JS and one should force decoration when showing/hiding them through JavaScript, while buttons and inputs are decorated purely through CSS, where no JS is needed and thus the previous case is irrelevant.

    Hope my explanations are reasonable and understandable enough.

    Greetings,
    Niko
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top