Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Get Text From ItemTemplate of Selected Cell

1 Answer 145 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
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>
 
<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 />
            <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 />
            <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

Sort by
0
Viktor Tachev
Telerik team
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.
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or