How To Check Checkbox Selected At Least One Item in RadGrid Control With Client Side

3 posts, 0 answers
  1. Jyosana
    Jyosana avatar
    12 posts
    Member since:
    Aug 2013

    Posted 03 Dec 2013 Link to this post

    Hello, Telerik Team 

    I was using telerik:RadGrid control and grid ItemTemplate bind radbutton with toggletype set to checkbox and buttontype as standard button,
     this is bind properly well and displayed data is good, but when I am check if at least  one selected checkbox in grid on click on save data, I was only client side checking and using JavaScript currently I find your telerik forum code but they are not working ,Please help to me

    Thanks
    Jyosana
    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/PMMain.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ArchonixXJailProgramManagement.ProgramManagement.WebForm1" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="AdminContentPlaceHolder" runat="server">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Width="100%">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
            <script type="text/javascript">
     
                function ValidateCheckBox(sender, eventArgs) {
                    var TargetBaseControl = document.getElementById('<%= grdScheduler.ClientID%>');
                    var TargetChildControl = "btnToggle";
                    var Inputs = TargetBaseControl.getElementsByTagName("input");
                    var postback = false;
                    for (var n = 0; n < Inputs.length; ++n) {
                        if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) {
                            if (Inputs[n].checked) {
                                postback = true;
                                break;
                            }
                        }
                    }
                    sender.set_autoPostBack(postback);
                    if (!postback) {
                        alert('Please select atleast one checkbox record!');
                    }
                }
            </script>
        </telerik:RadCodeBlock>
         <telerik:RadAjaxPanel ID="radSSNSearch" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <div class="program_container">          
                <fieldset>
                    <legend>Scheduler Class </legend>
                    <table id="Table2" align="center" runat="server" cellspacing="0" cellpadding="4"
                        style="width: 98%; height: 100%; vertical-align: top">
                        <tr>
                            <td colspan="2">
                                <telerik:RadGrid ID="grdScheduler" runat="server" AllowPaging="True" AllowSorting="True"
                                    AutoGenerateColumns="False" AllowAutomaticDeletes="false" AllowAutomaticUpdates="false"
                                    OnNeedDataSource="grdScheduler_NeedDataSource" OnItemDataBound="grdScheduler_ItemDataBound">
                                    <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                                    <MasterTableView Width="100%" CommandItemDisplay="None" ClientDataKeyNames="SchedulePK">
                                        <CommandItemSettings ShowAddNewRecordButton="false" />
                                        <Columns>
                                            <telerik:GridTemplateColumn HeaderText="Enroll">
                                                <ItemTemplate>
                                                    <telerik:RadButton ID="btnToggle" runat="server" Width="17px" ToggleType="CheckBox"
                                                        Checked='<%# Convert.ToBoolean(Eval("Enroll")) %>' ButtonType="StandardButton"
                                                        CommandArgument='<%# Eval("ScheduleClassPK") %>' AutoPostBack="false">
                                                        <ToggleStates>
                                                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                                                            <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                                                        </ToggleStates>
                                                    </telerik:RadButton>                                            
                                                </ItemTemplate>
                                            </telerik:GridTemplateColumn>                                      
                                            <telerik:GridBoundColumn HeaderText="Class Name" SortExpression="ClassName" UniqueName="ClassName"
                                                DataField="ClassName">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderText="Description" SortExpression="Description" UniqueName="Description"
                                                DataField="Description">
                                            </telerik:GridBoundColumn>
                                            <telerik:GridBoundColumn HeaderText="Location" SortExpression="LocationCode" UniqueName="LocationCode"
                                                DataField="LocationCode">
                                            </telerik:GridBoundColumn>                                    
                                        </Columns>
                                        <ItemStyle HorizontalAlign="Left" />
                                        <AlternatingItemStyle HorizontalAlign="Left" />
                                    </MasterTableView>
                                </telerik:RadGrid>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <telerik:RadButton ID="btnSave" runat="server" OnClick="btnSave_Click" AutoPostBack="false" OnClientClicked="ValidateCheckBox"
                                    Text="Save">
                                </telerik:RadButton>
                            </td>
                        </tr>
                    </table>
                </fieldset>
            </div>      
        </telerik:RadAjaxPanel>
    </asp:Content>
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 06 Dec 2013 Link to this post

    Hi Jyosana,

    In order to find a RadButton in the RadGrid' MasterTableView you must initially get a reference to the RadGrids'  MasterTableView ->DataItems->Cell for the particular column. After that you can use the findControl() method to find the desired RadControl.

    Please use the following JavaScript, in order to find a the RadButton inside the MasterTableView of the RadGrid and change its change status:
    JavaScript:
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
        <script type="text/javascript">
            function ValidateCheckBox(sender, eventArg) {
                //Find RadGrid
                var grid = $find("<%= grdScheduler.ClientID %>");
                //Find MasterTableView
                var masterTable = grid.get_masterTableView();
                var items = masterTable.get_dataItems();
     
                //Change RadButtons' Checked status in the RadGrid's MasterTableView
                for (var i = 0; i < items.length; i++) {
                    //Find RadButton
                    var radButton = $telerik.findControl(items[i].get_cell("Enroll"), "btnToggle");
                    //Change checked
                    var isChecked = radButton.get_checked();
                    radButton.set_checked(!isChecked);
                }
            }
        </script>
    </telerik:RadCodeBlock>
    ASPX:
    <telerik:RadAjaxPanel ID="radSSNSearch" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
                <div class="program_container">
                    <fieldset>
                        <legend>Scheduler Class </legend>
                        <table id="Table2" align="center" runat="server" cellspacing="0" cellpadding="4"
                            style="width: 98%; height: 100%; vertical-align: top">
                            <tr>
                                <td colspan="2">
                                    <telerik:RadGrid ID="grdScheduler" runat="server" AllowPaging="True" AllowSorting="True"
                                        AutoGenerateColumns="False" AllowAutomaticDeletes="false" AllowAutomaticUpdates="false">
                                        <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
                                        <MasterTableView Width="100%" CommandItemDisplay="None" ClientDataKeyNames="SchedulePK">
                                            <CommandItemSettings ShowAddNewRecordButton="false" />
                                            <Columns>
                                                <telerik:GridTemplateColumn HeaderText="Enroll" UniqueName="Enroll">
                                                    <ItemTemplate>
                                                        <telerik:RadButton ID="btnToggle" runat="server" Width="17px" ToggleType="CheckBox"
                                                            Checked='<%# Convert.ToBoolean(Eval("Enroll")) %>' ButtonType="StandardButton"
                                                            CommandArgument='<%# Eval("ScheduleClassPK") %>' AutoPostBack="false">
                                                            <ToggleStates>
                                                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                                                                <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                                                            </ToggleStates>
                                                        </telerik:RadButton>
                                                    </ItemTemplate>
                                                </telerik:GridTemplateColumn>
                                                <telerik:GridBoundColumn HeaderText="Class Name" SortExpression="ClassName" UniqueName="ClassName"
                                                    DataField="ClassName">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn HeaderText="Description" SortExpression="Description" UniqueName="Description"
                                                    DataField="Description">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridBoundColumn HeaderText="Location" SortExpression="LocationCode" UniqueName="LocationCode"
                                                    DataField="LocationCode">
                                                </telerik:GridBoundColumn>
                                            </Columns>
                                            <ItemStyle HorizontalAlign="Left" />
                                            <AlternatingItemStyle HorizontalAlign="Left" />
                                        </MasterTableView>
                                    </telerik:RadGrid>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <telerik:RadButton ID="btnSave" runat="server" __OnClick="btnSave_Click" AutoPostBack="false" OnClientClicked="ValidateCheckBox"
                                        Text="Save">
                                    </telerik:RadButton>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </div>
            </telerik:RadAjaxPanel>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        grdScheduler.DataSource = GetData();
        grdScheduler.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("SchedulePK");
        dt.Columns.Add("Enroll");
        dt.Columns.Add("ScheduleClassPK");
     
        dt.Rows.Add(1,false, "CommandArgument1");
        dt.Rows.Add(2,true, "CommandArgument2");
        dt.Rows.Add(3,true, "CommandArgument3");
     
        return dt;
    }


    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
  4. Jyosana
    Jyosana avatar
    12 posts
    Member since:
    Aug 2013

    Posted 09 Dec 2013 Link to this post

    Thanks For Your Replay
    Our Issue is Working Now
Back to Top