radbutton toggle state using javascript

2 posts, 0 answers
  1. Padmanaban
    Padmanaban avatar
    19 posts
    Member since:
    Sep 2011

    Posted 03 Jul 2013 Link to this post

      <telerik:RadGrid ID="RadMyTrainee" EnableViewState="false" runat="server" AllowPaging="true"
                                            AllowSorting="True" GridLines="None" AllowFilteringByColumn="false">
                                            <ItemStyle Wrap="false"></ItemStyle>
                                            <MasterTableView AllowMultiColumnSorting="true" TableLayout="Fixed">
                                                <Columns>
                                                    <telerik:GridNumericColumn DataField="Id" HeaderText="Id" HeaderStyle-Width="100px"
                                                        Visible="false" FilterControlWidth="50px">
                                                    </telerik:GridNumericColumn>
                                                    <telerik:GridTemplateColumn HeaderText="Name">
                                                    <HeaderTemplate>
                                                      <telerik:RadButton ID="RadButton1" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"    OnClientCheckedChanged="oncheckedchange"
                   AutoPostBack="false">
                   <ToggleStates>
                        <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" >
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox">
                        </telerik:RadButtonToggleState>
                   </ToggleStates>
              </telerik:RadButton>
                                                   <%--    <asp:CheckBox ID="CheckBox1" runat="server"   onchange="Checked(this);"  />--%>
                                                    </HeaderTemplate>
                                                        <ItemTemplate>
                                                         <telerik:RadButton ID="RadButton2" runat="server" ToggleType="CheckBox" ButtonType="StandardButton"   AutoPostBack="false">
                   <ToggleStates>
                        <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked">
                        </telerik:RadButtonToggleState>
                        <telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox">
                        </telerik:RadButtonToggleState>
                   </ToggleStates>
              </telerik:RadButton>
                                                            <%--<asp:CheckBox ID="CheckBox2" runat="server" />--%>
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridTemplateColumn DataField="Name" HeaderText="Name">
                                                        <ItemTemplate>
                                                            <telerik:RadTextBox ID="Name" runat="server" Width="80px" ReadOnly="true">
                                                            </telerik:RadTextBox>
                                                        </ItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridBoundColumn DataField="UserName" HeaderText="UserName">
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Email" HeaderText="Email">
                                                    </telerik:GridBoundColumn>
                                                </Columns>
                                            </MasterTableView>
                                            <PagerStyle AlwaysVisible="true" Mode="NumericPages"></PagerStyle>
                                            <ClientSettings>
                                                <ClientEvents OnRowClick="onRowClick" OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound">
                                                </ClientEvents>
                                            </ClientSettings>
                                        </telerik:RadGrid>
                                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
                                        </telerik:RadAjaxLoadingPanel>
                                        <asp:Panel ID="Panel1" ScrollBars="Vertical" Height="0px" runat="server">
                                        </asp:Panel>



    hi,

    could you possible check all in header radbuttontoggle using javascript ?

    Please help.......
     using  javascript 
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 04 Jul 2013 Link to this post

    Hello Padmanaban,

    You can use the following JavaScript code, in order to located the RadButtons in the RadGrid's MasterTableView and MasterTableViewHeaser and change their ToggleState:
    <script type="text/javascript">
        function changeRadButtonToggleStates() {
            //Find RadGrid
            var grid = $find("<%= RadMyTrainee.ClientID %>");
            //Find MasterTableView
            var masterTable = grid.get_masterTableView();
            var items = masterTable.get_dataItems();
     
            //Change RadButtons' ToggleState in the RadGrid's MasterTableView
            for (var i = 0; i < items.length; i++) {
                //Find RadButton
                var radButton = $telerik.findControl(items[i].get_cell("myColumn"), "RadButton2");
                //Change ToggleState
                radButton.set_selectedToggleStateIndex(0);
            }
            //Change RadButton's ToggleState in the RadGrid's MasterTableViewHeader
            var header = grid.get_element();
            //Find RadButton
            var headerbutton = $telerik.findControl(header, "RadButton1");
            //Change ToggleState
            headerbutton.set_selectedToggleStateIndex(0);
        }
    </script>

    I have also attached the modified version of your VS sample with this approach.


    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top