Example T506160
Visible to All Users

Grid View for ASP.NET Web Forms - How to access and modify a template control in batch edit mode

This example demonstrates how to create a templated column, add content to the template, and use client-side GetCellTextContainer and GetControlsByPredicate methods to access and modify the template content in batch edit mode.

Access and modify template control in batch mode

Overview

Specify a column's DataItemTemplate property and populate the template with content. To access the templated cell's container in batch edit mode, call the grid's client-side BatchEditApi.GetCellTextContainer method. To get any client objects within the specified container, call the client-side GetControlsByPredicate method.

JavaScript
function GetControl(visibleIndex, column) { return ASPx.GetControlCollection().GetControlsByPredicate(function (c) { var parent = grid.batchEditApi.GetCellTextContainer(visibleIndex, column); return ASPx.GetIsParent(parent, c.GetMainElement()); })[0]; }

Files to Review

Documentation

Example Code

AppClientCode.js
JavaScript
var rateColumnIndex = 0, templateColumnIndex = 1, barColumnIndex = 3; function gridInit(s, e) { var batchApi = grid.batchEditApi; var visibleIndices = batchApi.GetRowVisibleIndices(); for (var i = 0; i < visibleIndices.length; i++) { var visibleIndex = visibleIndices[i]; var rateColumn = grid.GetColumn(rateColumnIndex); var barColumn = grid.GetColumn(barColumnIndex); var barRowValue = batchApi.GetCellValue(visibleIndex, barColumn); var rowValue = batchApi.GetCellValue(visibleIndex, rateColumn); SetColValue(visibleIndex, rateColumn, rowValue); SetBarColValue(visibleIndex, barColumn, barRowValue); } } function batchEndEdit(s, e) { var visibleIndex = e.visibleIndex; var rowValues = e.rowValues; var rateColumn = grid.GetColumn(rateColumnIndex); var barColumn = grid.GetColumn(barColumnIndex); var templateColumn = grid.GetColumn(templateColumnIndex); SetColValue(visibleIndex, rateColumn, rowValues[rateColumnIndex].value); SetBarColValue(visibleIndex, barColumn, rowValues[barColumnIndex].value); SetHtmlTemplateColumnValue(visibleIndex, templateColumn, rowValues[templateColumnIndex]); } function onBatchEditChangesCanceling(s, e) { var updValues = e.updatedValues; for (var rowIndex in updValues) { for (var columnIndex in updValues[rowIndex]) { var visibleIndex = parseInt(rowIndex); var columnId = parseInt(columnIndex); var initialVal = grid.batchEditApi.GetCellValue(visibleIndex, columnId, true); var rateColumn, barColumn, templateColumn; if (columnId == rateColumnIndex) { rateColumn = grid.GetColumn(rateColumnIndex); SetColValue(visibleIndex, rateColumn, initialVal); } else if (columnId == barColumnIndex) { barColumn = grid.GetColumn(barColumnIndex); SetBarColValue(visibleIndex, barColumn, initialVal); } else if (columnId == templateColumnIndex) { templateColumn = grid.GetColumn(templateColumnIndex); SetHtmlTemplateColumnValue(visibleIndex, templateColumn, initialVal); } } } } function GetControl(visibleIndex, column) { return ASPx.GetControlCollection().GetControlsByPredicate(function (c) { var parent = grid.batchEditApi.GetCellTextContainer(visibleIndex, column); return ASPx.GetIsParent(parent, c.GetMainElement()); })[0]; } function SetColValue(visibleIndex, column, rowValue) { var columnControl = GetControl(visibleIndex, column); columnControl && columnControl.SetValue(rowValue); } function SetBarColValue(visibleIndex, column, rowValue) { var columnControl = GetControl(visibleIndex, column); columnControl && columnControl.SetPosition(rowValue); } function SetHtmlTemplateColumnValue(visibleIndex, column, rowValue) { if (ASPx.IsExists(rowValue)) { var templateCell = grid.batchEditApi.GetCellTextContainer(visibleIndex, column); if (rowValue.value) templateCell.firstElementChild.innerHTML = rowValue.value; else templateCell.firstElementChild.innerHTML = rowValue; } }
Default.aspx
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.17.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head runat="server"> <title>Sample</title> <script src="AppClientCode.js"></script> </head> <body> <form id="form1" runat="server"> <div> <dx:ASPxCheckBox ID="supportDataItemTemplate" runat="server" AutoPostBack="true" Text="Support data item template" Checked="true" /> <dx:ASPxGridView ID="gridView" runat="server" KeyFieldName="ID" AutoGenerateColumns="False" ClientInstanceName="grid"> <Columns> <dx:GridViewDataColumn Name="rate1" FieldName="rate" Width="100px"></dx:GridViewDataColumn> <dx:GridViewDataColumn Name="num" FieldName="num"> <DataItemTemplate> <div style="background-color: aquamarine; color:darkgreen; min-width: 50px; text-align: center; height: 100%" id="tmpl<%# Container.VisibleIndex %>"><%# Eval("num")%> </div> </DataItemTemplate> </dx:GridViewDataColumn> <dx:GridViewDataColumn Name="num2" FieldName="num" /> <dx:GridViewDataColumn Name="progress" FieldName="progress" Width="100px"></dx:GridViewDataColumn> <dx:GridViewCommandColumn ShowEditButton="true" /> </Columns> <SettingsEditing Mode="Batch" /> <ClientSideEvents BatchEditEndEditing="batchEndEdit" Init="gridInit" BatchEditChangesCanceling="onBatchEditChangesCanceling" /> </dx:ASPxGridView> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [ProductID], [ProductName], [SupplierID], [CategoryID], [UnitPrice], [UnitsInStock], [UnitsOnOrder] FROM [Products]"></asp:AccessDataSource> </div> </form> </body> </html>
Default.aspx.cs(vb)
C#
using DevExpress.Data.Filtering; using DevExpress.Export; using DevExpress.Web; using DevExpress.XtraPrinting; using DevExpress.XtraPrintingLinks; using DevExpress.XtraRichEdit; using DevExpress.XtraRichEdit.API.Native; using System; using System.Collections; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Diagnostics; using System.IO; using System.Linq; using System.Text.RegularExpressions; using System.Threading; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { gridView.CellEditorInitialize += (s, ea) => { ea.Editor.ReadOnly = false; }; gridView.SettingsEditing.BatchEditSettings.AllowRegularDataItemTemplate = supportDataItemTemplate.Checked; } protected void Page_Init(object sender, EventArgs e) { var data = Enumerable.Range(1, 6).Select(i => new { ID = i, rate = i, num = i, progress = i*10 }).ToList(); gridView.DataSource = data; gridView.DataBind(); gridView.DataColumns["rate1"].DataItemTemplate = new RatingControlTemplate(); gridView.DataColumns["progress"].DataItemTemplate = new ProgressControlTemplate(); } private class RatingControlTemplate : ITemplate { public void InstantiateIn(Control container) { GridViewDataItemTemplateContainer gridContainer = container as GridViewDataItemTemplateContainer; if (gridContainer != null) { GridViewDataColumn column = gridContainer.Column; System.Web.UI.HtmlControls.HtmlGenericControl divContainer = new System.Web.UI.HtmlControls.HtmlGenericControl(); gridContainer.Controls.Add(divContainer); ASPxRatingControl rating = new ASPxRatingControl(); divContainer.Controls.Add(rating); rating.ItemCount = 10; rating.ReadOnly = true; divContainer.Attributes.Add("onclick", String.Format("grid.batchEditApi.StartEdit({0}, 0)", gridContainer.VisibleIndex)); } } } private class ProgressControlTemplate : ITemplate { public void InstantiateIn(Control container) { GridViewDataItemTemplateContainer gridContainer = container as GridViewDataItemTemplateContainer; if (gridContainer != null) { GridViewDataColumn column = gridContainer.Column; ASPxProgressBar bar = new ASPxProgressBar(); bar.BackColor = System.Drawing.Color.Azure; bar.Maximum = 100; bar.Width = 100; bar.ReadOnly = true; gridContainer.Controls.Add(bar); } } } }

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.