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

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

2 Answers 357 Views
Button
This is a migrated thread and some comments may be shown as answers.
Jyosana
Top achievements
Rank 1
Jyosana asked on 03 Dec 2013, 06:10 AM
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 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 06 Dec 2013, 06:54 AM
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.
0
Jyosana
Top achievements
Rank 1
answered on 09 Dec 2013, 10:28 AM
Thanks For Your Replay
Our Issue is Working Now
Tags
Button
Asked by
Jyosana
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Jyosana
Top achievements
Rank 1
Share this question
or