Hi,
I want to add ios7 Style Toggle Switch in RadGrid Item Template. So i have used this jquery control http://abpetkov.github.io/switchery/
I am able to apply the control over checkbox but the problem is that it kills the autopostback of the checkbox under itemtemplate. What i found that after render html it adds a span over the input control so the checkbox event is never fired. Please tell me the workaround for this
My Page markup
<%@ Page Title="" Language="C#" MasterPageFile="~/Admin.Master" AutoEventWireup="true" CodeBehind="CountryMaster.aspx.cs" Inherits="Test.CountryMaster" %><br><asp:ContentID="Content1"ContentPlaceHolderID="head"runat="server"><br> <linkhref="content/css/switchery.css"rel="stylesheet"/><br> <scriptsrc="content/js/switchery.js"></script><br> <scripttype="text/javascript"><br> function pageLoad() {<br> var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));<br> elems.forEach(function (html) {<br> var switchery = new Switchery(html);<br> });<br> };<br> </script><br></asp:Content><br><asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"runat="server"><br> <div><h4class="heading-inline">Country Manager</h4></div><br> <divclass="row-spacer"></div><br> <divclass="row"><br> <telerik:RadGridID="grv_countries"runat="server"AllowFilteringByColumn="True"AllowPaging="True"AllowSorting="True"AutoGenerateColumns="False"GroupPanelPosition="Top"OnNeedDataSource="grv_countries_NeedDataSource"OnItemCreated="grv_countries_ItemCreated"><br> <MasterTableViewNoMasterRecordsText="No Country Found"CommandItemDisplay="Top"InsertItemPageIndexAction="ShowItemOnCurrentPage"DataKeyNames="CountryID"><br> <CommandItemSettings ShowAddNewRecordButton="False"/><br> <Columns><br> <telerik:GridBoundColumnDataField="CountryID"FilterControlAltText="Filter SystemLogID column"HeaderText="Country ID"UniqueName="CountryID"FilterControlWidth="50px"AutoPostBackOnFilter="True"><br> </telerik:GridBoundColumn><br> <telerik:GridImageColumnFilterControlAltText="Filter CountryFlagPicture column"ImageHeight="20px"ImageWidth="30px" UniqueName="CountryFlagPicture" HeaderText="Flag"AllowFiltering="false"DataImageUrlFields="CountryFlagPicture"><br> </telerik:GridImageColumn><br> <telerik:GridBoundColumnDataField="CountryName"FilterControlAltText="Filter CountryName column"HeaderText="Name"UniqueName="CountryName"AutoPostBackOnFilter="True"><br> <ItemStyleWrap="false"></ItemStyle><br> </telerik:GridBoundColumn><br> <telerik:GridTemplateColumnAutoPostBackOnFilter="True"DataField="AllowedSending"FilterControlAltText="Filter AllowedSending column"FilterControlWidth="50px"HeaderText="Allowed Sending"UniqueName="AllowedSending"><br> <ItemTemplate><br> <asp:CheckBoxID="chk_sending"runat="server"Checked='<%# Eval("AllowedSending") %>' AutoPostBack="True" OnCheckedChanged="chk_sending_CheckedChanged" /><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> <telerik:GridTemplateColumnAutoPostBackOnFilter="True"DataField="AllowedReceving"FilterControlAltText="Filter AllowedReceving column"FilterControlWidth="50px"HeaderText="Allowed Receving"UniqueName="AllowedReceving"><br> <ItemTemplate><br> <asp:CheckBoxID="chk_receving"runat="server"Checked='<%# Eval("AllowedReceving") %>' AutoPostBack="True" OnCheckedChanged="chk_receive_CheckedChanged" /><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> <telerik:GridBoundColumnFilterControlAltText="Filter CurrencyCode column"UniqueName="CurrencyCode"HeaderText="Currency"DataField="CurrencyCode"AutoPostBackOnFilter="True"><br> <ItemStyleWrap="false"></ItemStyle><br> </telerik:GridBoundColumn><br> <telerik:GridTemplateColumnAutoPostBackOnFilter="True"DataField="MinTransferLimit"FilterControlAltText="Filter MinTransferLimit column"HeaderText="Min Transfer Limit"UniqueName="MinTransferLimit"><br> <ItemTemplate><br> <telerik:RadNumericTextBoxID="txt_min_amount"DbValue='<%# Eval("MinTransferLimit") %>' runat="server" CssClass="form-control" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" EnableTheming="True" MinValue="0" RenderMode="Auto" AutoPostBack="True" OnTextChanged="txt_min_amount_TextChanged"><br><NegativeStyleResize="None"></NegativeStyle><br><br><NumberFormatZeroPattern="n"DecimalDigits="2"GroupSeparator=","></NumberFormat><br><br><EmptyMessageStyleResize="None"></EmptyMessageStyle><br><br><ReadOnlyStyleResize="None"></ReadOnlyStyle><br><br><FocusedStyleResize="None"></FocusedStyle><br><br><DisabledStyleResize="None"></DisabledStyle><br><br><InvalidStyleResize="None"></InvalidStyle><br><br><HoveredStyleResize="None"></HoveredStyle><br><br><EnabledStyleResize="None"></EnabledStyle><br> </telerik:RadNumericTextBox><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> <telerik:GridTemplateColumnAutoPostBackOnFilter="True"DataField="MaxTransferLimit"FilterControlAltText="Filter MaxTransferLimit column"HeaderText="Max Transfer Limit"UniqueName="MaxTransferLimit"><br> <ItemTemplate><br> <telerik:RadNumericTextBoxID="txt_max_amount"DbValue='<%# Eval("MaxTransferLimit") %>' runat="server" CssClass="form-control" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" EnableTheming="True" MinValue="0" RenderMode="Auto" AutoPostBack="True" OnTextChanged="txt_max_amount_TextChanged"><br><NegativeStyleResize="None"></NegativeStyle><br><br><NumberFormatZeroPattern="n"DecimalDigits="2"GroupSeparator=","></NumberFormat><br><br><EmptyMessageStyleResize="None"></EmptyMessageStyle><br><br><ReadOnlyStyleResize="None"></ReadOnlyStyle><br><br><FocusedStyleResize="None"></FocusedStyle><br><br><DisabledStyleResize="None"></DisabledStyle><br><br><InvalidStyleResize="None"></InvalidStyle><br><br><HoveredStyleResize="None"></HoveredStyle><br><br><EnabledStyleResize="None"></EnabledStyle><br> </telerik:RadNumericTextBox><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> <telerik:GridTemplateColumnAutoPostBackOnFilter="True"DataField="RecevingPercentage"FilterControlAltText="Filter RecevingPercentage column"HeaderText="Receving Percentage"UniqueName="RecevingPercentage"><br> <ItemTemplate><br> <telerik:RadNumericTextBoxID="txt_receving_percentage"runat="server"CssClass="form-control"DbValue='<%# Eval("RecevingPercentage") %>' EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" EnableTheming="True" MinValue="0" MaxValue="100" Type="Percent" RenderMode="Auto" AutoPostBack="True" OnTextChanged="txt_receving_percentage_TextChanged"><br><NegativeStyleResize="None"></NegativeStyle><br><br><NumberFormatZeroPattern="n"DecimalDigits="2"GroupSeparator=""></NumberFormat><br><br><EmptyMessageStyleResize="None"></EmptyMessageStyle><br><br><ReadOnlyStyleResize="None"></ReadOnlyStyle><br><br><FocusedStyleResize="None"></FocusedStyle><br><br><DisabledStyleResize="None"></DisabledStyle><br><br><InvalidStyleResize="None"></InvalidStyle><br><br><HoveredStyleResize="None"></HoveredStyle><br><br><EnabledStyleResize="None"></EnabledStyle><br> </telerik:RadNumericTextBox><br> </ItemTemplate><br> </telerik:GridTemplateColumn><br> </Columns><br> </MasterTableView><br> <ClientSettingsAllowExpandCollapse="True"><br> <SelectingAllowRowSelect="True"/><br> <ScrollingAllowScroll="True" ScrollHeight=""/><br> </ClientSettings><br> </telerik:RadGrid><br> </div><br> <telerik:RadNotificationID="notify"runat="server"Animation="Fade"EnableRoundedCorners="True"EnableShadow="True"Position="Center"VisibleTitlebar="False"></telerik:RadNotification><br></asp:Content>Rendered HTML
For checkbox with jquery toggle applied
<td><br> <inputid="ctl00_ContentPlaceHolder1_grv_countries_ctl00_ctl04_chk_sending"type="checkbox"name="ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_sending"onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_sending\',\'\')', 0)"class="js-switch"data-switchery="true"style="display: none;"><spanclass="switchery switchery-default"style="box-shadow: rgb(100, 189, 99) 0px 0px 0px 16px inset; border-color: rgb(100, 189, 99); transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; -webkit-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; background-color: rgb(100, 189, 99);"><smallstyle="left: 20px; transition: background-color 0.4s, left 0.2s; -webkit-transition: background-color 0.4s, left 0.2s; background-color: rgb(255, 255, 255);"></small></span><br> </td>
Normal CheckBox Without Jquery Applied (Autopostback Works Fine)
<td><br> <inputid="ctl00_ContentPlaceHolder1_grv_countries_ctl00_ctl04_chk_receving"type="checkbox"name="ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_receving"checked="checked"onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_receving\',\'\')', 0)"><br> </td>Server Side For Appyling Class
protectedvoidgrv_countries_ItemCreated(objectsender, GridItemEventArgs e)<br> {<br> if(e.Item isGridDataItem)<br> {<br> CheckBox chk_sending = (CheckBox)e.Item.FindControl("chk_sending");<br> chk_sending.InputAttributes["class"] = "js-switch";<br> }<br> }please help to enable autopostback on the jquery styled button
thanks