AjaxManager and the Created Panel Display:Block problem

5 posts, 1 answers
  1. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 08 Jul 2010 Link to this post

    Hello All,

    I am using radAjaxManager with two buttons that are adjacent to each other, it seems that Ajax manager wraps the first button with a panel with display:block, this is causing the first button to display over the second button.

    not sure why the display:block is used, but if it has to be used, is there a way to work around this?!!!

    attached is the code and an image, and a snap of the generated code.

    ASPX Code:
    <div class="DialogButtons">
        <MyC:MyButton ID="btnDeleteYes" runat="server" Text="Yes"       CausesValidation="false" ></MyC:MyButton
        <MyC:MyButton ID="btnCancel" runat="server" Text="No"           CausesValidation="false" ></MyC:MyButton>                                                      
    </div>
     
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnDeleteYes">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="btnDeleteYes" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    MyButton is a custom control to wrap the button in a DIV for theming and for using a display:inline-block in order to enable divs to be adjacent. DialogButtons is a class to center the buttons in the middle of the dialog.

     

    Generated HTML:
    <DIV class=DialogButtons><DIV style="DISPLAY: block" id=ctl00_ContentCPH_ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1_ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1uDel_btnDeleteYesPanel>
    <DIV class="MyDivButton MyDivButtonTheme">
    <DIV class="MyDivButtonCorner MyDivButtonTL MyDivButtonTLTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonBL MyDivButtonBLTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonTR MyDivButtonTRTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonBR MyDivButtonBRTheme"></DIV><INPUT style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none" id=ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1_ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1uDel_btnDeleteYes class="YCIButtonSize0 YCIButton" onclick="javascript:HideToolTip('ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1_ttt');" value=Yes type=submit name=ctl00$ContentCPH$rgInbox$ctl00$ctl02$ctl00$InboxActions1$ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1uDel$btnDeleteYes> </DIV></DIV
    <DIV class="MyDivButton MyDivButtonTheme">
    <DIV class="MyDivButtonCorner MyDivButtonTL YCIDivButtonTLTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonBL MyDivButtonBLTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonTR MyDivButtonTRTheme"></DIV>
    <DIV class="MyDivButtonCorner MyDivButtonBR MyDivButtonBRTheme"></DIV><INPUT style="BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none" id=ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1_ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1uDel_btnCancel class="MyButtonSize0 MyButton" onclick="javascript:HideToolTip('ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1_ttt');return false;" value=No type=submit name=ctl00$ContentCPH$rgInbox$ctl00$ctl02$ctl00$InboxActions1$ctl00_ContentCPH_rgInbox_ctl00_ctl02_ctl00_InboxActions1uDel$btnCancel> </DIV></DIV>
  2. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 08 Jul 2010 Link to this post

    Found it !!!!

    While hidden i think,

    code should be
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnDeleteYes" >
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="btnDeleteYes" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8450 posts

    Posted 08 Jul 2010 Link to this post

    Hello Basel,

    http://www.telerik.com/help/aspnet-ajax/layout-problem-updated-controls-on-new-line.html

    Sincerely yours,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  4. Basel Nimer
    Basel Nimer avatar
    94 posts
    Member since:
    Oct 2009

    Posted 08 Jul 2010 Link to this post

    Wow, that was fast

    Thank you Dimo, I already managed as you can see.
    i wasnt lucky enough to dig into this before posting, my apologies.

  5. Adrian
    Adrian avatar
    1 posts
    Member since:
    Oct 2012

    Posted 17 Jan 2012 Link to this post

    Wow, Thanks Basel for posting the solution. That is maddening. It took me quite a while to figure out what was wrong.
Back to Top