Grid View for ASP.NET Web Forms - How to create a master-detail grid at runtime

This example demonstrates how to create and configure a master-detail ASPxGridView at runtime. The grid displays data of Categories and Products tables from the Northwind demo database on a local MS SQL Server / SQL Express and allows users to edit it.

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

MasterDetailGrids/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MasterDetailGrids._Default" %>

<%@ Register Assembly="DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dxe" %>

<%@ Register Assembly="DevExpress.Web.v24.2, Version=24.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dxwgv" %>

<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

MasterDetailGrids/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.Web;
using System.Data.SqlClient;

namespace MasterDetailGrids {
    public partial class _Default : System.Web.UI.Page {
        ASPxGridView masterGrid;
        protected void Page_Init(object sender, EventArgs e) {
            Session["CategoryID"] = 4;
            CreateMasterGrid();
        }

        protected void Page_Load(object sender, EventArgs e) {
            masterGrid.DataBind();
        }

        private void CreateMasterGrid() {
            masterGrid = new ASPxGridView();
            masterGrid.ID = "masterGrid";
            masterGrid.AutoGenerateColumns = false;
            form1.Controls.Add(masterGrid);

            CreateMasterColumns(masterGrid);
            masterGrid.SettingsDetail.ShowDetailRow = true;
            masterGrid.KeyFieldName = "CategoryID";
            masterGrid.DataSource = GetMasterDataSource();

            masterGrid.Templates.DetailRow = new DetailGridTemplate();
            masterGrid.RowUpdating += new DevExpress.Web.Data.ASPxDataUpdatingEventHandler(masterGrid_RowUpdating);
        }

        private DataTable GetMasterDataSource() {
            DataTable table = new DataTable("Categories");
            string query = "SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(table);
            return table;
        }
        void masterGrid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
            string query = "UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description] = @Description WHERE [CategoryID] = @CategoryID";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            cmd.Parameters.Add("@CategoryName", SqlDbType.NVarChar).Value = e.NewValues["CategoryName"];
            cmd.Parameters.Add("@Description", SqlDbType.NVarChar).Value = e.NewValues["Description"];
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = e.NewValues["CategoryID"];
            cmd.Connection.Open();
            cmd.ExecuteNonQuery();
            e.Cancel = true;
            masterGrid.CancelEdit();
            masterGrid.DataSource = GetMasterDataSource();
            masterGrid.DataBind();
        }

        private void CreateMasterColumns(ASPxGridView masterGrid) {
            GridViewCommandColumn colCmd = new GridViewCommandColumn();
            colCmd.ShowEditButton = true;
            masterGrid.Columns.Add(colCmd);
            masterGrid.Columns.Add(new GridViewDataColumn("CategoryID"));
            masterGrid.Columns.Add(new GridViewDataColumn("CategoryName"));
            masterGrid.Columns.Add(new GridViewDataColumn("Description"));
        }
    }

    internal static class DataHelper {
        public static SqlConnection GetConnection() {
            string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection conn = new SqlConnection(connStr);
            return conn;
        }
    }
    public class DetailGridTemplate : ITemplate {
        Control parent;
        object masterKey;
        ASPxGridView detailGrid;

        public void InstantiateIn(Control container) {
            parent = container;
            masterKey = ((GridViewDetailRowTemplateContainer)parent).KeyValue;
            CreateDetailGrid();
        }

        private void CreateDetailGrid() {
            detailGrid = new ASPxGridView();
            detailGrid.ID = "detailGrid";
            detailGrid.AutoGenerateColumns = false;
            parent.Controls.Add(detailGrid);

            CreateDetailColumns(detailGrid);
            detailGrid.KeyFieldName = "ProductID";
            detailGrid.DataSource = GetDetailDataSource();
            detailGrid.DataBind();
            detailGrid.RowInserting += new DevExpress.Web.Data.ASPxDataInsertingEventHandler(detailGrid_RowInserting);
            detailGrid.RowUpdating += new DevExpress.Web.Data.ASPxDataUpdatingEventHandler(detailGrid_RowUpdating);
            detailGrid.RowDeleting += new DevExpress.Web.Data.ASPxDataDeletingEventHandler(detailGrid_RowDeleting);
        }

        void detailGrid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
            ASPxGridView senderGridView = (ASPxGridView)sender;
            Random randomizer = new Random();
            string query = "INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [UnitPrice], [Discontinued]) VALUES (@ProductName, @SupplierID, @CategoryID, @UnitPrice, @Discontinued)";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            cmd.Parameters.Add("@ProductName", SqlDbType.NVarChar).Value = e.NewValues["ProductName"];
            cmd.Parameters.Add("@SupplierID", SqlDbType.Int).Value = randomizer.Next(1, 29);
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = senderGridView.GetMasterRowKeyValue();
            cmd.Parameters.Add("@UnitPrice", SqlDbType.Decimal).Value = e.NewValues["UnitPrice"];
            cmd.Parameters.Add("@Discontinued", SqlDbType.Bit).Value = e.NewValues["Discontinued"];
            cmd.Connection.Open();
            cmd.ExecuteNonQuery();

            e.Cancel = true;
            senderGridView.CancelEdit();
            senderGridView.DataSource = GetDetailDataSource();
        }

        void detailGrid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
            ASPxGridView senderGridView = (ASPxGridView)sender;
            string query = "UPDATE [Products] SET [ProductName] = @ProductName, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            cmd.Parameters.Add("@ProductName", SqlDbType.NVarChar).Value = e.NewValues["ProductName"];
            cmd.Parameters.Add("@UnitPrice", SqlDbType.Decimal).Value = e.NewValues["UnitPrice"];
            cmd.Parameters.Add("@Discontinued", SqlDbType.Bit).Value = e.NewValues["Discontinued"];
            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = e.Keys[0];
            cmd.Connection.Open();
            cmd.ExecuteNonQuery();

            e.Cancel = true;
            senderGridView.CancelEdit();
            senderGridView.DataSource = GetDetailDataSource();
        }

        void detailGrid_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
            ASPxGridView senderGridView = (ASPxGridView)sender;
            string query = "DELETE FROM [Products] WHERE [ProductID] = @ProductID";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = e.Keys[0];
            cmd.Connection.Open();
            cmd.ExecuteNonQuery();

            e.Cancel = true;
            senderGridView.CancelEdit();
            senderGridView.DataSource = GetDetailDataSource();
        }

        private DataTable GetDetailDataSource() {
            DataTable table = new DataTable("Products");
            string query = "SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)";
            SqlCommand cmd = new SqlCommand(query, DataHelper.GetConnection());
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = masterKey;
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(table);
            return table;
        }

        private void CreateDetailColumns(ASPxGridView detailGrid) {
            GridViewCommandColumn colCmd = new GridViewCommandColumn();
            colCmd.ShowEditButton = true;
            colCmd.ShowNewButton = true;
            colCmd.ShowDeleteButton = true;
            detailGrid.Columns.Add(colCmd);

            GridViewDataColumn colProductID = new GridViewDataColumn();
            colProductID.FieldName = "ProductID";
            colProductID.EditFormSettings.Visible = DevExpress.Utils.DefaultBoolean.False;
            detailGrid.Columns.Add(colProductID);
            
            detailGrid.Columns.Add(new GridViewDataColumn("ProductName"));

            GridViewDataTextColumn colCategoryID = new GridViewDataTextColumn();
            colCategoryID.FieldName = "CategoryID";
            colCategoryID.EditFormSettings.Visible = DevExpress.Utils.DefaultBoolean.False;
            detailGrid.Columns.Add(colCategoryID);
            
            detailGrid.Columns.Add(new GridViewDataColumn("UnitPrice"));

            GridViewDataCheckColumn colDiscontinued = new GridViewDataCheckColumn();
            colDiscontinued.FieldName = "Discontinued";
            detailGrid.Columns.Add(colDiscontinued);
        }
    }
}

Visual Basic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports DevExpress.Web
Imports System.Data.SqlClient

Namespace MasterDetailGrids
    Partial Public Class _Default
        Inherits System.Web.UI.Page

        Private masterGrid As ASPxGridView
        Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
            Session("CategoryID") = 4
            CreateMasterGrid()
        End Sub

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            masterGrid.DataBind()
        End Sub

        Private Sub CreateMasterGrid()
            masterGrid = New ASPxGridView()
            masterGrid.ID = "masterGrid"
            masterGrid.AutoGenerateColumns = False
            form1.Controls.Add(masterGrid)

            CreateMasterColumns(masterGrid)
            masterGrid.SettingsDetail.ShowDetailRow = True
            masterGrid.KeyFieldName = "CategoryID"
            masterGrid.DataSource = GetMasterDataSource()

            masterGrid.Templates.DetailRow = New DetailGridTemplate()
            AddHandler masterGrid.RowUpdating, AddressOf masterGrid_RowUpdating
        End Sub

        Private Function GetMasterDataSource() As DataTable
            Dim table As New DataTable("Categories")
            Dim query As String = "SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            Dim da As New SqlDataAdapter(cmd)
            da.Fill(table)
            Return table
        End Function
        Private Sub masterGrid_RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
            Dim query As String = "UPDATE [Categories] SET [CategoryName] = @CategoryName, [Description] = @Description WHERE [CategoryID] = @CategoryID"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            cmd.Parameters.Add("@CategoryName", SqlDbType.NVarChar).Value = e.NewValues("CategoryName")
            cmd.Parameters.Add("@Description", SqlDbType.NVarChar).Value = e.NewValues("Description")
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = e.NewValues("CategoryID")
            cmd.Connection.Open()
            cmd.ExecuteNonQuery()
            e.Cancel = True
            masterGrid.CancelEdit()
            masterGrid.DataSource = GetMasterDataSource()
            masterGrid.DataBind()
        End Sub

        Private Sub CreateMasterColumns(ByVal masterGrid As ASPxGridView)
            Dim colCmd As New GridViewCommandColumn()
            colCmd.ShowEditButton = True
            masterGrid.Columns.Add(colCmd)
            masterGrid.Columns.Add(New GridViewDataColumn("CategoryID"))
            masterGrid.Columns.Add(New GridViewDataColumn("CategoryName"))
            masterGrid.Columns.Add(New GridViewDataColumn("Description"))
        End Sub
    End Class

    Friend Module DataHelper
        Public Function GetConnection() As SqlConnection
            Dim connStr As String = System.Configuration.ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
            Dim conn As New SqlConnection(connStr)
            Return conn
        End Function
    End Module
    Public Class DetailGridTemplate
        Implements ITemplate

        Private parent As Control
        Private masterKey As Object
        Private detailGrid As ASPxGridView

        Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn
            parent = container
            masterKey = CType(parent, GridViewDetailRowTemplateContainer).KeyValue
            CreateDetailGrid()
        End Sub

        Private Sub CreateDetailGrid()
            detailGrid = New ASPxGridView()
            detailGrid.ID = "detailGrid"
            detailGrid.AutoGenerateColumns = False
            parent.Controls.Add(detailGrid)

            CreateDetailColumns(detailGrid)
            detailGrid.KeyFieldName = "ProductID"
            detailGrid.DataSource = GetDetailDataSource()
            detailGrid.DataBind()
            AddHandler detailGrid.RowInserting, AddressOf detailGrid_RowInserting
            AddHandler detailGrid.RowUpdating, AddressOf detailGrid_RowUpdating
            AddHandler detailGrid.RowDeleting, AddressOf detailGrid_RowDeleting
        End Sub

        Private Sub detailGrid_RowInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
            Dim senderGridView As ASPxGridView = DirectCast(sender, ASPxGridView)
            Dim randomizer As New Random()
            Dim query As String = "INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID], [UnitPrice], [Discontinued]) VALUES (@ProductName, @SupplierID, @CategoryID, @UnitPrice, @Discontinued)"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            cmd.Parameters.Add("@ProductName", SqlDbType.NVarChar).Value = e.NewValues("ProductName")
            cmd.Parameters.Add("@SupplierID", SqlDbType.Int).Value = randomizer.Next(1, 29)
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = senderGridView.GetMasterRowKeyValue()
            cmd.Parameters.Add("@UnitPrice", SqlDbType.Decimal).Value = e.NewValues("UnitPrice")
            cmd.Parameters.Add("@Discontinued", SqlDbType.Bit).Value = e.NewValues("Discontinued")
            cmd.Connection.Open()
            cmd.ExecuteNonQuery()

            e.Cancel = True
            senderGridView.CancelEdit()
            senderGridView.DataSource = GetDetailDataSource()
        End Sub

        Private Sub detailGrid_RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
            Dim senderGridView As ASPxGridView = DirectCast(sender, ASPxGridView)
            Dim query As String = "UPDATE [Products] SET [ProductName] = @ProductName, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            cmd.Parameters.Add("@ProductName", SqlDbType.NVarChar).Value = e.NewValues("ProductName")
            cmd.Parameters.Add("@UnitPrice", SqlDbType.Decimal).Value = e.NewValues("UnitPrice")
            cmd.Parameters.Add("@Discontinued", SqlDbType.Bit).Value = e.NewValues("Discontinued")
            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = e.Keys(0)
            cmd.Connection.Open()
            cmd.ExecuteNonQuery()

            e.Cancel = True
            senderGridView.CancelEdit()
            senderGridView.DataSource = GetDetailDataSource()
        End Sub

        Private Sub detailGrid_RowDeleting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
            Dim senderGridView As ASPxGridView = DirectCast(sender, ASPxGridView)
            Dim query As String = "DELETE FROM [Products] WHERE [ProductID] = @ProductID"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            cmd.Parameters.Add("@ProductID", SqlDbType.Int).Value = e.Keys(0)
            cmd.Connection.Open()
            cmd.ExecuteNonQuery()

            e.Cancel = True
            senderGridView.CancelEdit()
            senderGridView.DataSource = GetDetailDataSource()
        End Sub

        Private Function GetDetailDataSource() As DataTable
            Dim table As New DataTable("Products")
            Dim query As String = "SELECT [ProductID], [ProductName], [CategoryID], [UnitPrice], [Discontinued] FROM [Products] WHERE ([CategoryID] = @CategoryID)"
            Dim cmd As New SqlCommand(query, DataHelper.GetConnection())
            cmd.Parameters.Add("@CategoryID", SqlDbType.Int).Value = masterKey
            Dim da As New SqlDataAdapter(cmd)
            da.Fill(table)
            Return table
        End Function

        Private Sub CreateDetailColumns(ByVal detailGrid As ASPxGridView)
            Dim colCmd As New GridViewCommandColumn()
            colCmd.ShowEditButton = True
            colCmd.ShowNewButton = True
            colCmd.ShowDeleteButton = True
            detailGrid.Columns.Add(colCmd)

            Dim colProductID As New GridViewDataColumn()
            colProductID.FieldName = "ProductID"
            colProductID.EditFormSettings.Visible = DevExpress.Utils.DefaultBoolean.False
            detailGrid.Columns.Add(colProductID)

            detailGrid.Columns.Add(New GridViewDataColumn("ProductName"))

            Dim colCategoryID As New GridViewDataTextColumn()
            colCategoryID.FieldName = "CategoryID"
            colCategoryID.EditFormSettings.Visible = DevExpress.Utils.DefaultBoolean.False
            detailGrid.Columns.Add(colCategoryID)

            detailGrid.Columns.Add(New GridViewDataColumn("UnitPrice"))

            Dim colDiscontinued As New GridViewDataCheckColumn()
            colDiscontinued.FieldName = "Discontinued"
            detailGrid.Columns.Add(colDiscontinued)
        End Sub
    End Class
End Namespace

DevExpress Support Team

last modified a year ago

Modified: October 21, 2023 6:18 PM

Platform: ASP.NET Web Forms

Product: ASPxGridView

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.

Grid View for ASP.NET Web Forms - How to create a master-detail grid at runtime

Files to Review

More Examples

Does this example address your development requirements/objectives?

Example Code

Recently viewed tickets