radbutton toggle state using javascript

[Padmanaban]

  <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 

[Danail Vasilev]

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