Autopostback Not Working RadGrid ItemTemplate Checkbox

[Vineet]

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:Content ID="Content1" ContentPlaceHolderID="head" runat="server"><br>    <link href="content/css/switchery.css" rel="stylesheet" /><br>    <script src="content/js/switchery.js"></script><br>        <script type="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:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><br>    <div><h4 class="heading-inline">Country Manager</h4></div><br>    <div class="row-spacer"></div><br>     <div class="row"><br>         <telerik:RadGrid ID="grv_countries" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" GroupPanelPosition="Top" OnNeedDataSource="grv_countries_NeedDataSource" OnItemCreated="grv_countries_ItemCreated"><br>                <MasterTableView NoMasterRecordsText="No Country Found" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage" DataKeyNames="CountryID"><br>                    <CommandItemSettings  ShowAddNewRecordButton="False" /><br>                    <Columns><br>                        <telerik:GridBoundColumn DataField="CountryID" FilterControlAltText="Filter SystemLogID column" HeaderText="Country ID" UniqueName="CountryID" FilterControlWidth="50px" AutoPostBackOnFilter="True"><br>                        </telerik:GridBoundColumn><br>                        <telerik:GridImageColumn FilterControlAltText="Filter CountryFlagPicture column" ImageHeight="20px" ImageWidth="30px"  UniqueName="CountryFlagPicture"  HeaderText="Flag" AllowFiltering="false" DataImageUrlFields="CountryFlagPicture" ><br>                        </telerik:GridImageColumn><br>                        <telerik:GridBoundColumn DataField="CountryName" FilterControlAltText="Filter CountryName column" HeaderText="Name" UniqueName="CountryName" AutoPostBackOnFilter="True"><br>                            <ItemStyle Wrap="false"></ItemStyle><br>                        </telerik:GridBoundColumn><br>                        <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="AllowedSending" FilterControlAltText="Filter AllowedSending column" FilterControlWidth="50px" HeaderText="Allowed Sending" UniqueName="AllowedSending"><br>                            <ItemTemplate><br>                                <asp:CheckBox ID="chk_sending" runat="server" Checked='<%# Eval("AllowedSending") %>' AutoPostBack="True" OnCheckedChanged="chk_sending_CheckedChanged" /><br>                            </ItemTemplate><br>                        </telerik:GridTemplateColumn><br>                        <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="AllowedReceving" FilterControlAltText="Filter AllowedReceving column" FilterControlWidth="50px" HeaderText="Allowed Receving" UniqueName="AllowedReceving"><br>                            <ItemTemplate><br>                                <asp:CheckBox ID="chk_receving" runat="server" Checked='<%# Eval("AllowedReceving") %>' AutoPostBack="True" OnCheckedChanged="chk_receive_CheckedChanged" /><br>                            </ItemTemplate><br>                        </telerik:GridTemplateColumn><br>                        <telerik:GridBoundColumn FilterControlAltText="Filter CurrencyCode column" UniqueName="CurrencyCode" HeaderText="Currency" DataField="CurrencyCode" AutoPostBackOnFilter="True"><br>                             <ItemStyle Wrap="false"></ItemStyle><br>                        </telerik:GridBoundColumn><br>                         <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="MinTransferLimit" FilterControlAltText="Filter MinTransferLimit column" HeaderText="Min Transfer Limit" UniqueName="MinTransferLimit"><br>                             <ItemTemplate><br>                                 <telerik:RadNumericTextBox ID="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><NegativeStyle Resize="None"></NegativeStyle><br><br><NumberFormat ZeroPattern="n" DecimalDigits="2" GroupSeparator=","></NumberFormat><br><br><EmptyMessageStyle Resize="None"></EmptyMessageStyle><br><br><ReadOnlyStyle Resize="None"></ReadOnlyStyle><br><br><FocusedStyle Resize="None"></FocusedStyle><br><br><DisabledStyle Resize="None"></DisabledStyle><br><br><InvalidStyle Resize="None"></InvalidStyle><br><br><HoveredStyle Resize="None"></HoveredStyle><br><br><EnabledStyle Resize="None"></EnabledStyle><br>                 </telerik:RadNumericTextBox><br>                             </ItemTemplate><br>                        </telerik:GridTemplateColumn><br>                        <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="MaxTransferLimit" FilterControlAltText="Filter MaxTransferLimit column" HeaderText="Max Transfer Limit" UniqueName="MaxTransferLimit"><br>                            <ItemTemplate><br>                                <telerik:RadNumericTextBox ID="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><NegativeStyle Resize="None"></NegativeStyle><br><br><NumberFormat ZeroPattern="n" DecimalDigits="2" GroupSeparator=","></NumberFormat><br><br><EmptyMessageStyle Resize="None"></EmptyMessageStyle><br><br><ReadOnlyStyle Resize="None"></ReadOnlyStyle><br><br><FocusedStyle Resize="None"></FocusedStyle><br><br><DisabledStyle Resize="None"></DisabledStyle><br><br><InvalidStyle Resize="None"></InvalidStyle><br><br><HoveredStyle Resize="None"></HoveredStyle><br><br><EnabledStyle Resize="None"></EnabledStyle><br>                 </telerik:RadNumericTextBox><br>                            </ItemTemplate><br>                        </telerik:GridTemplateColumn><br>                        <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="RecevingPercentage" FilterControlAltText="Filter RecevingPercentage column" HeaderText="Receving Percentage" UniqueName="RecevingPercentage"><br>                             <ItemTemplate><br>                                 <telerik:RadNumericTextBox ID="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><NegativeStyle Resize="None"></NegativeStyle><br><br><NumberFormat ZeroPattern="n" DecimalDigits="2" GroupSeparator=""></NumberFormat><br><br><EmptyMessageStyle Resize="None"></EmptyMessageStyle><br><br><ReadOnlyStyle Resize="None"></ReadOnlyStyle><br><br><FocusedStyle Resize="None"></FocusedStyle><br><br><DisabledStyle Resize="None"></DisabledStyle><br><br><InvalidStyle Resize="None"></InvalidStyle><br><br><HoveredStyle Resize="None"></HoveredStyle><br><br><EnabledStyle Resize="None"></EnabledStyle><br>                 </telerik:RadNumericTextBox><br>                            </ItemTemplate><br>                        </telerik:GridTemplateColumn><br>                    </Columns><br>                </MasterTableView><br>                <ClientSettings AllowExpandCollapse="True"><br>                    <Selecting AllowRowSelect="True" /><br>                    <Scrolling AllowScroll="True"  ScrollHeight="" /><br>                </ClientSettings><br>            </telerik:RadGrid><br>      </div><br>     <telerik:RadNotification ID="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>                                <input id="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;"><span class="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);"><small style="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>                                <input id="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​

protected void grv_countries_ItemCreated(object sender, GridItemEventArgs e)<br>        {<br>            if (e.Item is GridDataItem)<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

[Viktor Tachev]

Hi Vineet,

Based on your description it seems that the behavior is specific for the switchery component. I am afraid that it is a third party control and we do not have control over its behavior.

I would recommend checking the documentation of switchery for information on how to make the component trigger postback.

Alternatively you can handle the client-side click event of the rendered input and fire a custom command. You can use the fireCommand() method for that.

Regards,
Viktor Tachev
Telerik