Currently when cookiless session is enabled and RadButton with custom image is used the Image is not displayed, until the button is hovered. ASPX: <telerik:RadButton ID="ButtunTest" runat="server" Icon-PrimaryIconUrl="~/Examples7/eClose.png" Text="Testbutton" Width="200px" UseSubmitBehavior="False" /> Web.Config: <system.web> <sessionState cookieless="true"></sessionState> </system.web> The workaround is to override the background image of the button: <style> .RadButton.RadButton_Default.rbSkinnedButton .rbPrimaryIcon { background-image: url("/RadControlsWebSite2/Examples7/eClose.png"); } </style>
Two possible workarounds are attached
Currently disabled RadButton doesn't have a border for Silk skin. For the time being the border can be set manually: <telerik:RadButton ID="RadButton1" runat="server" Skin="Silk" Text="Submit" BorderColor="#C9C9C9" BorderWidth="1px" Enabled="false"> </telerik:RadButton>
For the time being you can use the following workaround: CSS: <style> .RadButton input { width: 100% !important; } </style> ASPX: <telerik:RadButton ID="rbACH" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="test" AutoPostBack="false" Text="eCheck" Width="200px"> <ToggleStates> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton> <br /> <br /> <telerik:RadButton ID="btnToggle" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="StandardButton" Width="200px"> <ToggleStates> <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleRadio" /> <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton>
The workaround is to override the background image of the button: CSS: <style> .RadButton.RadButton_Default.rbLinkButton .rbPrimaryIcon { background-image: url("images/Groups (16x16).png"); } </style> ASPX: <telerik:RadButton ID="RadButton1" runat="server" ButtonType="LinkButton" Text="Click" Skin="Default"> <Icon PrimaryIconUrl="images/myImage (16x16).png" PrimaryIconTop="2" PrimaryIconLeft="2" /> </telerik:RadButton>
For the time being you can use the following CSS workaround: CSS: <style> .RadButton span.rbText { display: inline; } </style> ASPX: <telerik:RadButton ID="rbACH" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="test" AutoPostBack="false" Text="eCheck" Width="200px" RenderMode="Lightweight"> <ToggleStates> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadioChecked" /> <telerik:RadButtonToggleState Text="eCheck" PrimaryIconCssClass="rbToggleRadio" /> </ToggleStates> </telerik:RadButton>
For the time being you can either set the UseSubmitBehavior property of the button to false or place the following JavaScript workaround below the button's declaration: ASPX: <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <asp:UpdatePanel ID="Updatepanel1" runat="server"> <ContentTemplate> <telerik:RadButton ID="RadButton1" runat="server" Text="Click" OnClick="RadButton1_Click" RenderMode="Lightweight" /> <asp:Label ID="Label1" Text="" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <script> var $T = Telerik.Web.UI; $T.RadButton.prototype._mouseClickHandler = function (args) { var button = this, result; var target = args.target; var e = args.rawEvent; var element = button.get_element(); if (target !== element && $telerik.isDescendant(element, target)) { $telerik.cancelRawEvent(e); simulateMouseEvent(element, "click", e); return; } try { if (button._functionality.clicking(args) && !element.getAttribute("rwOpener")) { button._functionality.click(args); result = button._functionality.clicked(args); } } finally { button._mouseUp(args); button._restoreFlags(); setTimeout(function () { Page_BlockSubmit = false; }, 0); return !result ? $telerik.cancelRawEvent(e) : true; } }; function simulateMouseEvent(element, eventName, args) { var o = $telerik.$.extend({}, args || {}); var oEvent; if (document.createEvent) {//deprecated DOM2 Event Model oEvent = document.createEvent("MouseEvents"); oEvent.initMouseEvent(eventName, o.bubbles, o.cancelable, document.defaultView, o.button, o.screenX, o.screenY, o.clientX, o.clientY, o.ctrlKey, o.altKey, o.shiftKey, o.metaKey, o.button, element); } else if ("MouseEvent" in window) {//standard DOM3 Event Mode oEvent = new MouseEvent('click', o); } oEvent && element.dispatchEvent(oEvent); if (!oEvent) {//IE oEvent = extend(document.createEventObject(), o); element.fireEvent('on' + eventName, oEvent); } return element; } function extend(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } </script> </form> C#: protected void RadButton1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }
The icon of a checkbox button appears over the text when the configured width is not enough to display them both on one line in Classic render mode.
For the time being you can use the following JavaScript workaround: <telerik:RadButton ID="radbtnVehicleList" runat="server" Text="Google" Skin="Default" Width="200px" NavigateUrl="http://www.telerik.com" ButtonType="LinkButton" AutoPostBack="false" Target="_blank"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype = { clicked: function (ev) { var that = this; that.base.clicked(ev); that._handleNavigateUrl(); }, _handleNavigateUrl: function () { var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (!url) return; if (target && target == "_blank") window.open(url); else if (target && target == "_parent") window.parent.location.href = url; else if (target && target == "_top") window.top.location.href = url; else if (!target || target == "_self") window.location.href = url; else { var targetFrame = $("iframe[name='" + target + "']").get(0) || $("frame[name='" + target + "']").get(0) || $("#" + target).get(0); if (targetFrame && targetFrame.tagName.toLowerCase().indexOf("frame") > -1) { targetFrame.setAttribute("src", url); } else if (target) { window.open(url, target); } } } }; </script>
For the time being you can place the following JavaScript workaround at the end of the form: <script> $T = Telerik.Web.UI; $T.RadButton.prototype.initialize = function () { var that = this; $T.RadButton.callBaseMethod(that, "initialize"); //if the button is in RTL parent apply rbRtl CSS class to the holding element that._setRightToLeft(); that._createToggleStates(); that._requestIconsAndImages(); if (that.get_checked()) { that.clearCheckedRadios(that.get_uniqueGroupName()); } $T.registerRadButton(that); that._initModules(); that._initHTML(); that._attachClickEvent(true); if (that.get_enabled() && !that.get_readOnly()) { that._attachEvents(true); } that.updateClientState(); that.raiseEvent('load', Sys.EventArgs.Empty); }; </script>
For the time being the following workaround can be used: ASPX: <telerik:RadButton ID="RadButton1" runat="server" Text="Click" NavigateUrl="http://www.google.bg" Target="_blank" ButtonType="LinkButton"> </telerik:RadButton> <script> Telerik.Web.UI.Button.NavigationFunctionality.prototype._handleNavigateUrl = function () { $ = $telerik.$; var that = this, target = that.options.navigateTarget, url = that.options.navigateUrl; if (target && target == "_blank") window.open(url); if (target && target == "_parent") window.parent.location.href = url; if (target && target == "_top") window.parent.location.href = url; else if (!target || target == "_self") window.location.href = url; else { var targetFrame = $("iframe[name='" + target + "']").get(0) || $("frame[name='" + target + "']").get(0) || $("#" + target).get(0); if (targetFrame && targetFrame.tagName.toLowerCase().indexOf("frame") > -1) targetFrame.setAttribute("src", url); } } </script>
Currently the value of RadButton's property 'Width' is not applied correctly and its width is not as specified.