由于Bootstrap切换按钮，RadGrid ItemTemplate内的复选框没有更改Autopostback [英] No Autopostback on checkbox changed inside RadGrid ItemTemplate because of Bootstrap Toggle Button

问题描述

Please see the markup below

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <div><h4 class="heading-inline">Country Manager</h4></div>
        <div class="row-spacer"></div>
        <div class="row-spacer"></div>
         <div class="row">
             <telerik:RadGrid ID="grv_countries" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" GroupPanelPosition="Top" OnNeedDataSource="grv_countries_NeedDataSource" OnItemDataBound="grv_countries_ItemDataBound">
                    <MasterTableView NoMasterRecordsText="No Country Found" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage" DataKeyNames="CountryID">
                        <CommandItemSettings  ShowAddNewRecordButton="False" />
                        <Columns>
                            <telerik:GridBoundColumn DataField="CountryID" FilterControlAltText="Filter SystemLogID column" HeaderText="Country ID" UniqueName="CountryID" FilterControlWidth="50px" AutoPostBackOnFilter="True" ItemStyle-Width="30px">
    <ItemStyle Width="30px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridImageColumn FilterControlAltText="Filter CountryFlagPicture column" ImageHeight="20px" ImageWidth="30px"  UniqueName="CountryFlagPicture"  HeaderText="Flag" AllowFiltering="false" DataImageUrlFields="CountryFlagPicture" >
                            </telerik:GridImageColumn>
                            <telerik:GridBoundColumn DataField="CountryName" FilterControlAltText="Filter CountryName column" HeaderText="Name" UniqueName="CountryName" AutoPostBackOnFilter="True">
                                <ItemStyle Wrap="false"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="AllowedSending" FilterControlAltText="Filter AllowedSending column" FilterControlWidth="50px" HeaderText="Allowed Sending" UniqueName="AllowedSending">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk_sending" runat="server" Checked='<%# Eval("AllowedSending") %>' AutoPostBack="True" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="AllowedReceving" FilterControlAltText="Filter AllowedReceving column" FilterControlWidth="50px" HeaderText="Allowed Receving" UniqueName="AllowedReceving">
                                <ItemTemplate>
                                    <asp:CheckBox ID="chk_receving" runat="server" Checked='<%# Eval("AllowedReceving") %>' AutoPostBack="True" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn FilterControlAltText="Filter CurrencyCode column" UniqueName="CurrencyCode" HeaderText="Currency" DataField="CurrencyCode" AutoPostBackOnFilter="True">
                                 <ItemStyle Wrap="false"></ItemStyle>
                            </telerik:GridBoundColumn>
                             <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="MinTransferLimit" FilterControlAltText="Filter MinTransferLimit column" HeaderText="Min Transfer Limit" UniqueName="MinTransferLimit">
                                 <EditItemTemplate>
                                     <asp:TextBox ID="MinTransferLimitTextBox" runat="server" Text='<%# Bind("MinTransferLimit") %>'></asp:TextBox>
                                 </EditItemTemplate>
                                 <ItemTemplate>
                                     <asp:Label ID="MinTransferLimitLabel" runat="server" Text='<%# Eval("MinTransferLimit") %>'></asp:Label>
                                 </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="MaxTransferLimit" FilterControlAltText="Filter MaxTransferLimit column" HeaderText="Max Transfer Limit" UniqueName="MaxTransferLimit">
                                <EditItemTemplate>
                                    <asp:TextBox ID="MaxTransferLimitTextBox" runat="server" Text='<%# Bind("MaxTransferLimit") %>'></asp:TextBox>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="MaxTransferLimitLabel" runat="server" Text='<%# Eval("MaxTransferLimit") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn AutoPostBackOnFilter="True" DataField="RecevingPercentage" FilterControlAltText="Filter RecevingPercentage column" HeaderText="Receving Percentage" UniqueName="RecevingPercentage">
                                <EditItemTemplate>
                                    <asp:TextBox ID="RecevingPercentageTextBox" runat="server" Text='<%# Bind("RecevingPercentage") %>'></asp:TextBox>
                                </EditItemTemplate>
                                <ItemTemplate>
                                    <asp:Label ID="RecevingPercentageLabel" runat="server" Text='<%# Eval("RecevingPercentage") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings AllowExpandCollapse="True">
                        <Selecting AllowRowSelect="True" />
                        <Scrolling AllowScroll="True"  ScrollHeight="" />
                    </ClientSettings>
                </telerik:RadGrid>
          </div>
    </asp:Content>

If i do not use the toggle button the autopostback works fine but after enabling the toggle it changes the html render by asp.net checkbox

see below

    <div class="toggle btn btn-primary" data-toggle="toggle" style="width: 59px; height: 34px;"><input id="ctl00_ContentPlaceHolder1_grv_countries_ctl00_ctl04_chk_sending" type="checkbox" name="ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_sending" checked="checked" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$grv_countries$ctl00$ctl04$chk_sending\',\'\')', 0)" data-toggle="toggle"><div class="toggle-group"><label class="btn btn-primary toggle-on">On</label><label class="btn btn-default active toggle-off">Off</label><span class="toggle-handle btn btn-default"></span></div></div>

so the postback do not work.

Is there any work around for this.

thanks

推荐答案

ContentPlaceHolder1

ContentPlaceHolder1

grv_countries

grv_countries

ctl00

这篇关于由于Bootstrap切换按钮，RadGrid ItemTemplate内的复选框没有更改Autopostback的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！