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.
Download Files: DynamicExtGrid.zip

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

PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs