This is a migrated thread and some comments may be shown as answers.

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

3 Answers 125 Views
Button
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 22 Dec 2011, 12:44 PM
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

3 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 22 Dec 2011, 10:43 PM
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!
0
Mark
Top achievements
Rank 1
answered on 23 Dec 2011, 07:50 AM
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?


0
Mark
Top achievements
Rank 1
answered on 23 Dec 2011, 07:59 AM
Tags
Button
Asked by
Mark
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or