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

Grid / Client-Side Row Selection

8 Answers 159 Views

Grid

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

John asked on 04 Aug 2011, 06:26 AM

I'm trying to reproduce the behavior in one of the demos but am having trouble with one part of it. The demo is:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx , specifically, Grid2 (i.e., Grid with ClientSideSelectColumn).

In the Demo:
- select the header checkbox that "selects all" of the rows (it selects all the rows)
- uncheck the checkbox of one or more rows (it unchecks the header checkbox)
- re-check those checkboxes that were unchecked (it re-checks the header checkbox since all rows are checked again)

In my application:
- select the header checkbox that "selects all" of the rows (it selects all the rows...no problem)
- uncheck the checkbox of one or more rows (it does NOT uncheck the header checkbox as it should)
- click the Post Back button (it does uncheck the header checkbox)
- re-check those checkboxes that were unchecked (it does NOT re-check the header checkbox as it should)
- click the Post Back button (it does re-check the header checkbox)

I'm not sure why my application requires a post-back to check or uncheck the header checkbox when in the Demo it does it all client-side.

My code is as follows:

Order2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Order2.aspx.cs" Inherits="Test.Order2" %>

<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox3">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox4">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<br />

<h3 class="qsfSubtitle">

Grid with ClientSideSelectColumn</h3>

<telerik:RadGrid ID="RadGrid2" AllowMultiRowSelection="true"

runat="server" AllowSorting="True" GridLines="None">

<MasterTableView>

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

</ClientSettings>

</telerik:RadGrid>

<br />

<asp:Button CssClass="button" Text="PostBack" runat="server" ID="Button1" Style="margin: 10px 22px 10px 0px">

</asp:Button>

Click PostBack to see the state of the grids is preserved.

</div>

</form>

</body>

</html>

Order2.aspx.cs

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

namespace Test

{

public partial class Order2 : System.Web.UI.Page

{

protected void Page_Load(object sender, System.EventArgs e)

{

if (!this.IsPostBack)

{

DataTable dt = this.CreateDataTable();

this.AddRowsToDataTable(dt);

this.RadGrid2.DataSource = dt;

this.RadGrid2.DataBind();

}

protected DataTable CreateDataTable()

{

DataTable dt = new DataTable();

DataColumn dc;

dc = new DataColumn("Column 1");

dt.Columns.Add(dc);

dc = new DataColumn("Column 2");

dt.Columns.Add(dc);

dc = new DataColumn("Column 3");

dt.Columns.Add(dc);

dc = new DataColumn("Column 4");

dt.Columns.Add(dc);

dc = new DataColumn("Column 5");

dt.Columns.Add(dc);

return dt;

}

protected void AddRowsToDataTable(DataTable dt)

{

for (int i = 0; i < 5; i++)

{

DataRow dr = dt.NewRow();

dr[0] = i.ToString();

dr[1] = (i * 2).ToString();

dr[2] = (i * 3).ToString();

dr[3] = (i * 4).ToString();

dr[4] = (i * 5).ToString();

dt.Rows.Add(dr);

}

Order2.aspx.designer.cs

//------------------------------------------------------------------------------

// <auto-generated>

// This code was generated by a tool.

// Runtime Version:2.0.50727.3623

//

// Changes to this file may cause incorrect behavior and will be lost if

// the code is regenerated.

// </auto-generated>

//------------------------------------------------------------------------------

namespace Test {

public partial class Order2 {

/// <summary>

/// form1 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::System.Web.UI.HtmlControls.HtmlForm form1;

/// <summary>

/// RadScriptManager1 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::Telerik.Web.UI.RadScriptManager RadScriptManager1;

/// <summary>

/// RadAjaxManager1 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::Telerik.Web.UI.RadAjaxManager RadAjaxManager1;

/// <summary>

/// RadAjaxLoadingPanel1 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::Telerik.Web.UI.RadAjaxLoadingPanel RadAjaxLoadingPanel1;

/// <summary>

/// RadGrid2 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::Telerik.Web.UI.RadGrid RadGrid2;

/// <summary>

/// Button1 control.

/// </summary>

/// <remarks>

/// Auto-generated field.

/// To modify move field declaration from designer file to code-behind file.

/// </remarks>

protected global::System.Web.UI.WebControls.Button Button1;

}

8 Answers, 1 is accepted

answered on 09 Aug 2011, 04:48 PM

Hi John,

The code you provided seems fine and it does not appear to be any different than what's already demonstrated in the demo you are referring to. Are you getting any javascript errors on the page preventing your javascript from running properly? You need to make sure your page does not throw any javascript errors. Also, consider removing any unnecessary markup from your page (I see the RadAjaxManager is not needed if this is all you have in your page). Let me know if it makes any difference.

Greetings,
Veli
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 09 Aug 2011, 06:38 PM

I removed the unecessary code.....it says that it still requires a script manager....and it runs with no javascript errors. Can you run my actual code to see if it is something configured on my machine differently? Here is the new code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Order2.aspx.cs" Inherits="Test.Order2" %>

<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<div>

<br />

<h3 class="qsfSubtitle">

Grid with ClientSideSelectColumn</h3>

<telerik:RadGrid ID="RadGrid2" AllowMultiRowSelection="true"

runat="server" AllowSorting="True" GridLines="None">

<MasterTableView>

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

</ClientSettings>

</telerik:RadGrid>

<br />

<asp:Button CssClass="button" Text="PostBack" runat="server" ID="Button1" Style="margin: 10px 22px 10px 0px">

</asp:Button>

Click PostBack to see the state of the grids is preserved.

</div>

</form>

</body>

</html>

answered on 10 Aug 2011, 01:07 PM

testpage.zip

Hello John,

The code you provided seems fine. Attaching the test page I used it in. RadGrid's select column works as expected and the state is preserved on postback.

Veli
the Telerik team