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

GridTemplateColumn not working properly

1 Answer 398 Views

Grid

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

Matias asked on 18 Oct 2012, 05:57 PM

Hi! First of all, thanks for reading this post and try to help me. My problem is this: I have a RadGrid which has a GridTemplateColumn. Inside that column there is an asp:CheckBox. What I want to do is to press a button to add some rows in the radgrid and display the checkbox properly. The problem I facing is that if quantity of new rows are more quantity of rows before the addition, the checkboxes of the new rows are not showing. Ive prepared a small example of the problem (to emulate it you just need to create a Web Application called: "WebApplicationRadGridCheckBox" and paste the code below in the Default.aspx file -also, you need the telerik dll´s-). Then, just press the button "Add" and watch the result (remember that Ive used gridRowBound and gridRowCreated because you can´t use Eval in the client side).

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:26 AM

Hi Matias,

I noticed that you have opened a duplicate post on the same matter. To avoid duplicate posts, I suggest you continue the communication there. Additionally I am pasting the response here:

The described behavior is expected. When the template column is used in client side data binding scenarios the controls into the template column needs to 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

Kind regards,
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.