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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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?


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