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 157 Views

Button

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

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

answered on 22 Dec 2011, 10:43 PM

RadButtonGroup.png

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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!

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>

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