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">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<div>
<ext:GridPanel ID="GridPanel1" runat="server" Height="300" Title="Title" EnableViewState="true">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:CommandColumn ButtonAlign="Center">
<Commands>
<ext:GridCommand Icon="ApplicationAdd" CommandName="ApplicationAdd">
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<Store>
<ext:Store ID="Store1" runat="server" EnableViewState="true">
</ext:Store>
</Store>
<SelectionModel>
<ext:CellSelectionModel ID="CellSelectionModel1" runat="server">
<DirectEvents>
<CellSelect OnEvent="Cell_Click" />
</DirectEvents>
</ext:CellSelectionModel>
</SelectionModel>
<DirectEvents>
<Command OnEvent="ApplicationAdd">
<ExtraParams>
<ext:Parameter Name="command" Value="command" Mode="Raw" />
<ext:Parameter Name="rowIndex" Value="rowIndex" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Command>
</DirectEvents>
</ext:GridPanel>
<div style="width: 590px; border: 1px solid gray; padding: 5px;">
<ext:Label ID="Label1" runat="server" EnableViewState="true" />
</div>
</div>
</form>
</body>
</html>
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)
{
this.BindData();
}
}
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();
this.GridPanel1.ColumnModel.Columns.Add(column);
RecordField recoredfield = new RecordField();
recoredfield.Name = columnarray[i].ToString();
jsonreader.Fields.Add(recoredfield);
}
this.Store1.Reader.Add(jsonreader);
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();
this.Store1.DataBind();
}
}
}
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.
v