Dynamic Ext.NET Gridview

By Gohil Jayendrasinh Jan 11, 2012
In this blog you can learn how to create Dynamic Gridview in Ext.NET Control. Hear i also provide information Cell click and Gridview Command Event.

In my previous blog Gridview of Ext.NET you can see how to create Gridview using Ext.NET.

In this blog I create Dynamic  Gridview  using Ext.NET.

Step 1: Your .aspx page like

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicExtGrid.aspx.cs" Inherits="GridView_DynamicExtGrid" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!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">




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

    <ext:ResourceManager ID="ResourceManager1" runat="server">



        <ext:GridPanel ID="GridPanel1" runat="server" Height="300" Title="Title" EnableViewState="true">

            <ColumnModel ID="ColumnModel1" runat="server">


                    <ext:CommandColumn ButtonAlign="Center">


                            <ext:GridCommand Icon="ApplicationAdd" CommandName="ApplicationAdd">                               







                <ext:Store ID="Store1" runat="server" EnableViewState="true">




                <ext:CellSelectionModel ID="CellSelectionModel1" runat="server">


                        <CellSelect OnEvent="Cell_Click" />





                <Command OnEvent="ApplicationAdd">


                        <ext:Parameter Name="command" Value="command" Mode="Raw" />

                        <ext:Parameter Name="rowIndex" Value="rowIndex" Mode="Raw"></ext:Parameter>                                                                   





        <div style="width: 590px; border: 1px solid gray; padding: 5px;">

            <ext:Label ID="Label1" runat="server" EnableViewState="true" />







Step2: Your .cs file.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Ext.Net;

using System.Text;


public partial class GridView_DynamicExtGrid : System.Web.UI.Page


    string connection = System.Configuration.ConfigurationManager.ConnectionStrings["testDatabaseConnectionString"].ToString();

    protected void Page_Load(object sender, EventArgs e)



        if (!X.IsAjaxRequest)







    private void BindData()


        //Create column name.

        ColumnModel columnmodel = new ColumnModel();

        string[] columnarray = { "ID""Name""City" };

        JsonReader jsonreader = new JsonReader();


        //Create Dynamic Column Name.

        for (int i = 0; i < columnarray.Length; i++)


            Ext.Net.Column column = new Column();


            /*If you wan't to hide the column.*/

            if (columnarray[i].ToString() == "City")


                column.Hidden = true;


            column.Header = columnarray[i].ToString();

            column.DataIndex = columnarray[i].ToString();


            RecordField recoredfield = new RecordField();

            recoredfield.Name = columnarray[i].ToString();




        this.Store1.EnableViewState = true;

        this.Store1 = this.GridPanel1.GetStore();

        using (ExtNetDataDataContext db = new ExtNetDataDataContext(connection))


            var info = (from a in db.Emp_Msts

                        select new


                            ID = a.id,

                            Name = a.emp_name + " " + a.emp_lname,

                            City = a.city



            if (info != null)


                if (info.Count() > 0)


                    this.Store1.DataSource = info.ToArray();










        if (!this.IsPostBack)


            CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel;

            sm.SelectedCell.ColIndex = 1;

            sm.SelectedCell.RowIndex = 1;






    /*Grid View Cell Event*/

    protected void Cell_Click(object sender, DirectEventArgs e)



        CellSelectionModel sm = this.GridPanel1.SelectionModel.Primary as CellSelectionModel;

        this.Label1.Html = string.Format("RecordID: {0}<br />Name: {1}<br />Value: {2}<br />Row: {3}<br />Column: {4}", sm.SelectedCell.RecordID, sm.SelectedCell.Name, sm.SelectedCell.Value, sm.SelectedCell.RowIndex.ToString(), sm.SelectedCell.ColIndex.ToString());



    /*Grid View Command Event.*/

    protected void ApplicationAdd(object sender, DirectEventArgs e)


        string command = e.ExtraParams["command"].ToString();

        string RowIndex = e.ExtraParams["rowIndex"].ToString();

        this.Label1.Html = "Command Name::" + command + " RowIndex:" + RowIndex;                            





For fire the Gridview Command event you must be add   <DirectEvents> in your 
.aspx page.



Gohil Jayendrasinh
Gohil Jayendrasinh

  6 + years’ experience in the Field of .NET. MCTS in ASP.NET 3.5MS Dynamic NAV Web Services, ASP.NET,Windows Form Application,WCF,Web Services,SQL SERVER 2005/2008 ,SSRS ,AJAX,javaScript,jQuery

Infragistics jQuery Controls

Latest Blogs