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

GridTemplateColumn issue

1 Answer 68 Views

Grid

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

Matias asked on 18 Oct 2012, 06:10 PM

Hi everybody and thanks for your help! Im facing this problem: Ive a Radgrid which has a GridTemplateColumn which has a CheckBox inside. In the page load 1 row is inserted in the radgrid and displayed properly. Then, there is a RadButton (which only Works in the client side). When pressed it binds the radgrid to a new datasource with 2 rows. The problem is that the first row is displayed correctly while the second row is missing the checkbox. I did not use Eval since the radgrid must be bind in the client side (then, Ive used gridRowBound and gridRowCreated). Ive prepared an example code to show exactly this problem: you just need to créate a Web Application “WebApplicationRadGridCheckBox” and modify the Default.aspx code with the code below.

Thank you very much! Matias

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplicationRadGridCheckBox._Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="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></title>

</head>

<body>

<telerik:RadScriptBlock ID="RadScriptBlockTipoDocumentoDetails" runat="server">

<script type="text/javascript">

function Add(sender, eventArgs) {

var grid = $find("<%=RadGridTest.ClientID %>");

var mt = grid.get_masterTableView();

var items = mt.get_dataItems();

var source = new Array();

var item = { Field1: false, Field2: "new item 1!!!" };

source[source.length] = item;

var item2 = { Field1: false, Field2: "new item 2!!!" };

source[source.length] = item2;

mt.set_dataSource(source);

mt.dataBind();

}

function gridRowBound (sender, args) {

var checkbox = args.get_item().findElement("Field1");

if (checkbox && checkbox != null) {

checkbox.checked = args.get_dataItem().Field1 == "True";

}

function gridRowCreated (sender, args) {

var checkbox = args.get_item().findElement("Field1");

if (checkbox && checkbox != null) {

checkbox.checked = args._gridDataItem.getDataKeyValue("Field1") == "True";

}

</script>

</telerik:RadScriptBlock>

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

<asp:ScriptManager runat="server" ID="ScriptManager1"/>

<div>

<telerik:RadButton ID="RadButton1" runat="server" Text="Add" OnClientClicked="Add" UseSubmitBehavior="false" AutoPostBack="false"/>

<telerik:RadGrid ID="RadGridTest" runat="server" AutoGenerateColumns="false" AllowMultiRowSelection="true" Height="200px">

<MasterTableView Caption="" ClientDataKeyNames="Field1,Field2" DataKeyNames="Field1,Field2">

<Columns>

<telerik:GridTemplateColumn>

<ItemTemplate>

<asp:CheckBox ID="Field1" runat="server"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="Field2" DataField="Field2"/>

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true" >

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="True" SaveScrollPosition="True"/>

<ClientEvents OnRowDataBound="gridRowBound"

OnRowCreated="gridRowCreated"/>

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Default.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace WebApplicationRadGridCheckBox

{

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

{

protected void Page_Load(object sender, EventArgs e)

{

List<TestClass> lista = new List<TestClass>() { new TestClass() { Field1 = true, Field2 = "JOJO" } };

RadGridTest.DataSource = lista;

RadGridTest.DataBind();

}

public class TestClass

{

public Boolean Field1 { get; set; }

public String Field2 { get; set; }

}

1 Answer, 1 is accepted

answered on 23 Oct 2012, 08:20 AM

Hi Matias,

The described behavior is expected. When a template column is used in client side data binding scenarios the controls into the template column needs to be added manually. More information you could find here:
http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding-specifics.html (Generate title and href attributes for hyperlinks on the client section) and here:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/livedata/defaultcs.aspx

Please give it try and let me know if it helps you.

Greetings,
Radoslav
the Telerik team

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 their blog feed now.