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.
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.
JavaScriptfunction 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
- AppClientCode.js (VB: AppClientCode.js)
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
Example Code
JavaScriptvar 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;
}
}
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>
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);
}
}
}
}