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 837 Views

Button

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

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

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.