No Div with Display:Block around Buttons configured as ToogleButtons (Radio)

4 posts, 0 answers
  1. Mark
    Mark avatar
    8 posts
    Member since:
    Jan 2011

    Posted 22 Dec 2011 Link to this post

    I have three Buttons within the same Group (GroupName) as type "StandardButton" with ToogleType="Radio"

    Each of them gets enclosed with a Div element that have style="display:block;" so the buttons are listed unter each other.

    This is the Code:

    <telerik:RadButton ID="btnAbsolut" runat="server" Checked="true"
        ButtonType="StandardButton" ToggleType="Radio" GroupName="turnoverChartValue"
        Text="Absolute Werte" Skin="Rausch" ToolTip="Anzeige als Absolute Werte"
        EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False" Width="60" OnCheckedChanged="TurnoverChartButton_CheckedChanged">
    </telerik:RadButton>
    <telerik:RadButton ID="btnAbweichung" runat="server"
        ButtonType="StandardButton" ToggleType="Radio" GroupName="turnoverChartValue"
        Text="Abweichung" Skin="Rausch" ToolTip="Anzeige als Abweichung"
        EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False" Width="60" OnCheckedChanged="TurnoverChartButton_CheckedChanged">
    </telerik:RadButton>
    <telerik:RadButton ID="btnProzent" runat="server"
        ButtonType="StandardButton" ToggleType="Radio" GroupName="turnoverChartValue"
        Text="Abweichung in %" Skin="Rausch" ToolTip="Anzeige als Abweichung in Prozent"
        EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False" Width="60" OnCheckedChanged="TurnoverChartButton_CheckedChanged">
    </telerik:RadButton>

    and this this the rendered result:

    <div style="display: block;" id="btnAbsolutPanel">
        <a style="width: 60px; display: inline-block;" id="btnAbsolut" class="RadButton RadButton_Rausch rbSkinnedButton rbSkinnedButtonChecked" title="Anzeige als Absolute Werte" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnAbsolut_input" class="rbDecorated" tabIndex="-1" name="btnAbsolut" value="Absolute Werte" type="submit"><input id="btnAbsolut_ClientState" name="btnAbsolut_ClientState" type="hidden" autocomplete="off"></a>
    </div>
    <div style="display: block;" id="btnAbweichungPanel">
        <a style="width: 60px; display: inline-block;" id="btnAbweichung" class="RadButton RadButton_Rausch rbSkinnedButton" title="Anzeige als Abweichung" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnAbweichung_input" class="rbDecorated" tabIndex="-1" name="btnAbweichung" value="Abweichung" type="submit"><input id="btnAbweichung_ClientState" name="btnAbweichung_ClientState" type="hidden" autocomplete="off"></a>
    </div>
    <div style="display: block;" id="btnProzentPanel">
        <a style="width: 60px; display: inline-block;" id="btnProzent" class="RadButton RadButton_Rausch rbSkinnedButton" title="Anzeige als Abweichung in Prozent" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnProzent_input" class="rbDecorated" tabIndex="-1" name="btnProzent" value="Abweichung in %" type="submit"><input id="btnProzent_ClientState" name="btnProzent_ClientState" type="hidden" autocomplete="off"></a>
    </div>

    Maybe I'm to stupid, but how can I disable this.

    BTW, I'm using 2011 Q3 Release of the Telerik Controls
  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 22 Dec 2011 Link to this post

    Mark:

    Your markup works without issue for me when displaying in Firefox 8.0.1. See the attached screenshot which also displays the rendered HTML in Firebug.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <scripts>
                <%--Needed for JavaScript IntelliSense in VS2010--%>
                <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadButton ID="btnAbsolut" runat="server" Checked="true" ButtonType="StandardButton"
                ToggleType="Radio" GroupName="turnoverChartValue" Text="Absolute Werte" Skin="Rausch"
                ToolTip="Anzeige als Absolute Werte" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False"
                Width="60" >
            </telerik:RadButton>
            <telerik:RadButton ID="btnAbweichung" runat="server" ButtonType="StandardButton"
                ToggleType="Radio" GroupName="turnoverChartValue" Text="Abweichung" Skin="Rausch"
                ToolTip="Anzeige als Abweichung" EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False"
                Width="60" >
            </telerik:RadButton>
            <telerik:RadButton ID="btnProzent" runat="server" ButtonType="StandardButton" ToggleType="Radio"
                GroupName="turnoverChartValue" Text="Abweichung in %" Skin="Rausch" ToolTip="Anzeige als Abweichung in Prozent"
                EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False"
                Width="122px" >
            </telerik:RadButton>
        </div>
        </form>
    </body>
    </html>

    What browser and version are you using? This could be related to the use of your own custom skin.

    Cheers!
  3. Mark
    Mark avatar
    8 posts
    Member since:
    Jan 2011

    Posted 23 Dec 2011 Link to this post

    I have investigated this a little bit.

    The Buttons get enclosed into a div when i add them as Updated Control to the AjaxManager

    <telerik:AjaxSetting AjaxControlID="btnPreviousYear" EventName="CheckedChanged">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="btnBudget" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChart" LoadingPanelID="loadingPanel" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChartHeadline" />
        </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="btnBudget" EventName="CheckedChanged">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="btnPreviousYear" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChart" LoadingPanelID="loadingPanel" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChartHeadline" />
        </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="btnAbsolut" EventName="CheckedChanged">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="btnAbweichung" />
            <telerik:AjaxUpdatedControl ControlID="btnProzent" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChart" LoadingPanelID="loadingPanel" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChartHeadline" />
        </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="btnAbweichung" EventName="CheckedChanged">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="btnAbsolut" />
            <telerik:AjaxUpdatedControl ControlID="btnProzent" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChart" LoadingPanelID="loadingPanel" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChartHeadline" />
        </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="btnProzent" EventName="CheckedChanged">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="btnAbsolut" />
            <telerik:AjaxUpdatedControl ControlID="btnAbweichung" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChart" LoadingPanelID="loadingPanel" />
            <telerik:AjaxUpdatedControl ControlID="turnoverChartHeadline" />
        </UpdatedControls>
    </telerik:AjaxSetting>

    When i remove them from the AjaxManager then no additional Div is rendered around each button

    <a style="width: 60px; display: inline-block;" id="btnPreviousYear" class="RadButton RadButton_Rausch rbSkinnedButton rbSkinnedButtonChecked" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnPreviousYear_input" class="rbDecorated" tabIndex="-1" name="btnPreviousYear" value="Vorjahr" type="submit"><input id="btnPreviousYear_ClientState" name="btnPreviousYear_ClientState" type="hidden" autocomplete="off"></a>
    <a style="width: 60px; display: inline-block;" id="btnBudget" class="RadButton RadButton_Rausch rbSkinnedButton" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnBudget_input" class="rbDecorated" tabIndex="-1" name="btnBudget" value="Budget" type="submit"><input id="btnBudget_ClientState" name="btnBudget_ClientState" type="hidden" autocomplete="off"></a>
    <a style="width: 60px; display: inline-block;" id="btnAbsolut" class="RadButton RadButton_Rausch rbSkinnedButton rbSkinnedButtonChecked" title="Anzeige als Absolute Werte" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnAbsolut_input" class="rbDecorated" tabIndex="-1" name="btnAbsolut" value="Absolute Werte" type="submit"><input id="btnAbsolut_ClientState" name="btnAbsolut_ClientState" type="hidden" autocomplete="off"></a>
    <a style="width: 60px; display: inline-block;" id="btnAbweichung" class="RadButton RadButton_Rausch rbSkinnedButton" title="Anzeige als Abweichung" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnAbweichung_input" class="rbDecorated" tabIndex="-1" name="btnAbweichung" value="Abweichung" type="submit"><input id="btnAbweichung_ClientState" name="btnAbweichung_ClientState" type="hidden" autocomplete="off"></a>
    <a style="width: 60px; display: inline-block;" id="btnProzent" class="RadButton RadButton_Rausch rbSkinnedButton" title="Anzeige als Abweichung in Prozent" href="javascript:void(0)"><input style="width: 100%; padding-right: 0px; padding-left: 4px;" id="btnProzent_input" class="rbDecorated" tabIndex="-1" name="btnProzent" value="Abweichung in %" type="submit"><input id="btnProzent_ClientState" name="btnProzent_ClientState" type="hidden" autocomplete="off"></a>

    How can I prevent this withour removing the controls from th UpdatedControls section in the AjaxManager?


  4. Mark
    Mark avatar
    8 posts
    Member since:
    Jan 2011
Back to Top