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

Autopostback Not Working RadGrid ItemTemplate Checkbox

1 Answer 164 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Vineet
Top achievements
Rank 1
Vineet asked on 23 May 2015, 11:58 AM

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

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 May 2015, 05:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Vineet
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or