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

Get Text From ItemTemplate of Selected Cell

1 Answer 189 Views

Grid

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

Steve asked on 12 Dec 2013, 03:34 PM

Hi

I started off with a problem of getting a grid setup to allow the user to select the cells and to total the values of the cells in the footer. I found a very good example which I implemented and all seem well.

Then I needed to get the text from the selected cells and here is where I have got my problem. I have followed various examples for using the FindControl method to find the label control within the item template but it's never finds it. This could be because I am using my own classes for the item template i'm not sure.

What I am looking for is help as to how to get to the underlying text in the cell from the server side code in the following example project.

This is in VB.NET using the latest Q3 2013 release of Telerik 2013.3.1114.40.

I have an empty web application which I then create the following two classes:

Public Class clTemplateColumn

Implements ITemplate

Protected _label1 As Label

Private _colName As String

Public Sub New(ByVal colName As String)

_colName = colName

End Sub

Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn

_label1 = New Label

_label1.ID = _colName + "Label"

AddHandler _label1.DataBinding, AddressOf Label1_DataBinding

container.Controls.Add(_label1)

End Sub

Private Sub Label1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)

Dim _label As Label = DirectCast(sender, Label)

Dim _container As Telerik.Web.UI.GridDataItem = DirectCast(_label.NamingContainer, Telerik.Web.UI.GridDataItem)

_label.Text = DirectCast(_container.DataItem, DataRowView)(_colName).ToString

End Sub

End Class

And

Public Class clTemplateColumnFooter

Implements ITemplate

Protected _label1 As Label

Private _footerID As String

Public Sub New(ByVal footerID As String)

_footerID = footerID

End Sub

Public Sub InstantiateIn(container As Control) Implements ITemplate.InstantiateIn

_label1 = New Label

_label1.ID = _footerID

container.Controls.Add(_label1)

End Sub

End Class

The webform html is as follows:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestPage1.aspx.vb" Inherits="GridRowColTotals.TestPage1" %>

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

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

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

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

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<div>

<telerik:RadButton ID="btnGenerateData" runat="server" Text="GenerateData"></telerik:RadButton>

<br />

<telerik:RadGrid ID="rgResults" runat="server" CellSpacing="0" GridLines="Both" ShowFooter="True" AutoGenerateColumns="false">

<ClientSettings EnablePostBackOnRowClick="false">

<Scrolling AllowScroll="true" />

<ClientEvents OnCellSelecting="OnCellSelecting" OnCellSelected="OnCellSelected" OnCellDeselected="OnCellDeselected" />

</ClientSettings>

</telerik:RadGrid>

<br />

<telerik:RadButton ID="btnCheckSelectedItems" runat="server" Text="Selected Values"></telerik:RadButton>

<script type="text/javascript" language="javascript">

// When selecting the cells from the results grid, if any of the cells belong to the column MainHeader then cancel the select.

function OnCellSelecting(sender, args) {

if (args.get_column().get_uniqueName() == "MainHeader") {

args.set_cancel(true);

}

function OnCellSelected(sender, args) {

// Find the grid master table to get the footer element

var _masterTable = $find("<%=rgResults.ClientID%>").get_masterTableView();

var _masterTableViewFooter = _masterTable.get_element().getElementsByTagName("TFOOT")[0];

// Get the index of the column

var _cellIndex = _masterTable.getColumnByUniqueName(args.get_column().get_uniqueName()).get_element().cellIndex + 1;

// Get the value from the current selected cell, check the length and set to 0 if nothing in it.

var _cellValue = args.get_gridDataItem().get_cell(args.get_column().get_uniqueName()).innerText;

if (_cellValue.length == 0) {

_cellValue = "0";

}

// Get the current total value for the column the selected cell is in, check the length and set to 0 if nothing in it.

var _currentTotal = _masterTableViewFooter.rows[0].cells[_cellIndex].innerText;

if (_currentTotal.length == 0) {

_currentTotal = "0";

}

// Work out the new total, and set the footer value.

var _newTotal = parseInt(_currentTotal) + parseInt(_cellValue);

_masterTableViewFooter.rows[0].cells[_cellIndex].innerText = _newTotal.toString();

}

function OnCellDeselected(sender, args) {

// Find the grid master table to get the footer element

var _masterTable = $find("<%=rgResults.ClientID%>").get_masterTableView();

var _masterTableViewFooter = _masterTable.get_element().getElementsByTagName("TFOOT")[0];

// Get the index of the column

var _cellIndex = _masterTable.getColumnByUniqueName(args.get_column().get_uniqueName()).get_element().cellIndex + 1;

// Get the value from the current selected cell, check the length and set to 0 if nothing in it.

var _cellValue = args.get_gridDataItem().get_cell(args.get_column().get_uniqueName()).innerText;

if (_cellValue.length == 0) {

_cellValue = "0";

}

// Get the current total value for the column the selected cell is in, check the length and set to 0 if nothing in it.

var _currentTotal = _masterTableViewFooter.rows[0].cells[_cellIndex].innerText;

if (_currentTotal.length == 0) {

_currentTotal = "0";

}

// Work out the new total, and set the footer value.

var _newTotal = parseInt(_currentTotal) - parseInt(_cellValue);

_masterTableViewFooter.rows[0].cells[_cellIndex].innerText = _newTotal.toString();

}

</script>

</div>

</form>

</body>

</html>

The code behind is:

Public Class TestPage1

Inherits System.Web.UI.Page

Dim _resultsDataSource As New DataTable("resultsData")

Private Sub btnGenerateData_Click(sender As Object, e As EventArgs) Handles btnGenerateData.Click

GenerateData()

End Sub

Private Sub GenerateData()

BuildDataTable(_resultsDataSource)

AddColumnsToGrid(_resultsDataSource)

rgResults.DataSource = _resultsDataSource

rgResults.DataBind()

End Sub

Private Sub BuildDataTable(ByRef pivotData As DataTable)

pivotData.Rows.Clear()

pivotData.Columns.Clear()

pivotData.Clear()

Dim _pivotRow As DataRow

' Add the KEY column

pivotData.Columns.Add(AddNewPivotColumn("Key", "Key", "System.String"))

' Add the Main Header column

pivotData.Columns.Add(AddNewPivotColumn("MainHeader", "", "System.String"))

' Add the Blank/Male/Female Column

pivotData.Columns.Add(AddNewPivotColumn("Blank", "Blank", "System.Decimal"))

pivotData.Columns.Add(AddNewPivotColumn("_33", "Male", "System.Decimal"))

pivotData.Columns.Add(AddNewPivotColumn("_34", "Female", "System.Decimal"))

' Add the data

_pivotRow = AddNewPivotRow(pivotData)

_pivotRow(0) = "Blank" ' Key

_pivotRow(1) = "Blank" ' Main Header

_pivotRow(2) = "5" ' 5 people in blank

pivotData.Rows.Add(_pivotRow)

_pivotRow = AddNewPivotRow(pivotData)

_pivotRow(0) = "1" ' Key

_pivotRow(1) = "20-29" ' Main Header

_pivotRow(3) = "15" ' 15 people in Male

_pivotRow(4) = "7" ' 7 people in Female

pivotData.Rows.Add(_pivotRow)

_pivotRow = AddNewPivotRow(pivotData)

_pivotRow(0) = "2" ' Key

_pivotRow(1) = "30-39" ' Main Header

_pivotRow(3) = "2" ' 2 people in Male

_pivotRow(4) = "33" ' 33 people in Female

pivotData.Rows.Add(_pivotRow)

_pivotRow = AddNewPivotRow(pivotData)

_pivotRow(0) = "3" ' Key

_pivotRow(1) = "40-49" ' Main Header

_pivotRow(3) = "12" ' 12 people in Male

_pivotRow(4) = "17" ' 17 people in Female

pivotData.Rows.Add(_pivotRow)

End Sub

Private Function AddNewPivotColumn(ByVal columnName As String, ByVal caption As String, ByVal dataType As String) As DataColumn

Dim _newCol As DataColumn = New DataColumn(columnName, Type.GetType(dataType))

_newCol.Caption = caption

Return _newCol

End Function

Private Function AddNewPivotRow(ByVal pivotData As DataTable) As DataRow

Dim _newRow As DataRow = pivotData.NewRow()

For Each _pivotColumn As DataColumn In pivotData.Columns

_newRow(_pivotColumn) = DBNull.Value

Next

Return _newRow

End Function

Private Sub AddColumnsToGrid(ByVal pivotData As DataTable)

' Clear out the existing columns and group columns

rgResults.MasterTableView.ColumnGroups.Clear()

rgResults.MasterTableView.Columns.Clear()

' Create the column group header

Dim _groupColumn As New Telerik.Web.UI.GridColumnGroup

rgResults.MasterTableView.ColumnGroups.Add(_groupColumn)

_groupColumn.HeaderText = "Gender"

_groupColumn.Name = "GroupColumnHeader"

_groupColumn.HeaderStyle.HorizontalAlign = HorizontalAlign.Center

Dim _boundColumn As New Telerik.Web.UI.GridBoundColumn

rgResults.MasterTableView.Columns.Add(_boundColumn)

_boundColumn.DataField = pivotData.Columns(1).ColumnName

_boundColumn.HeaderText = pivotData.Columns(1).Caption

_boundColumn.UniqueName = pivotData.Columns(1).ColumnName.Replace(" ", "")

_boundColumn.FooterStyle.Font.Bold = True

_boundColumn.HeaderText = "Age"

For _ii As Integer = 2 To pivotData.Columns.Count - 1 Step 1

Dim _templateColumn As New Telerik.Web.UI.GridTemplateColumn

rgResults.MasterTableView.Columns.Add(_templateColumn)

_templateColumn.ItemTemplate = New clTemplateColumn(pivotData.Columns(_ii).ColumnName.Replace(" ", ""))

_templateColumn.HeaderText = pivotData.Columns(_ii).Caption

_templateColumn.UniqueName = pivotData.Columns(_ii).ColumnName.Replace(" ", "")

_templateColumn.ColumnGroupName = "GroupColumnHeader"

_templateColumn.FooterTemplate = New clTemplateColumnFooter(pivotData.Columns(_ii).ColumnName.Replace(" ", "") + "Footer")

Next

rgResults.ClientSettings.Selecting.CellSelectionMode = Telerik.Web.UI.GridCellSelectionMode.MultiColumn

End Sub

Private Sub btnCheckSelectedItems_Click(sender As Object, e As EventArgs) Handles btnCheckSelectedItems.Click

For Each _cell As Telerik.Web.UI.GridTableCell In rgResults.SelectedCells

Dim _gridItem As Telerik.Web.UI.GridDataItem = DirectCast(_cell.NamingContainer, Telerik.Web.UI.GridDataItem)

Dim _label As Label = DirectCast(_gridItem.FindControl(_cell.Column.UniqueName + "Label"), Label)

Dim _label2 As Label = DirectCast(_gridItem.Cells(_cell.Column.OrderIndex).FindControl(_cell.Column.UniqueName + "Label"), Label)

Dim _cellText As String = _label.Text

Next

End Sub

End Class

As you can see from the code, it's very simple in that it creates a data table and loads in some data, then adds the columns to the grid. When you press the Generate Data button.

If you then select a cell of data the totals add up and all is good, so from the javascript I am getting the values fine, but if you click the Selected Values button here is where I am having problems getting the value selected. You can see in the event I have tried a couple of ways to get the label from the griddataitem but i'm always getting a null reference.

Any help would be appreciated.

Thanks

1 Answer, 1 is accepted

answered on 17 Dec 2013, 03:21 PM

Hi Dale,

When creating template columns programmatically the whole grid must be generated in the code-behind in Page_Init event first. After this you should create the template columns and set each column's ItemTemplate property. Finally the columns should be added to the RadGrid's Columns collection.

Take a look at the following article that illustrates how this could be achieved :
Creating TemplateColumns Programmatically

Regards,
Viktor Tachev
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.