Create Ext.NET GridPanel in codebehind

by plykkegaard 13. maj 2012 12:16

Quite a few requests in the Ext.NET community forums is on how to use the framework in codebehind

I have thrown together a small example based on the example GridPanel -> DataSource Controls -> SqlDataSource using the employee table in the Microsoft Northwind example database to feed the content

The c# code is taken almost directly from the markup coding in the example above

(NB! the code is tested using Ext.NET 2.0 Beta 1)

default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="default.aspx.cs" 
    Inherits="dk.looksharp.dbview._default" %>
<%@ 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 id="head" runat="server">
    <title>GridPanel</title>

    <style type="text/css">
    <style type="text/css">
        .x-grid-cell-fullName .x-grid-cell-inner {
            font-family : tahoma, verdana;
            display     : block;
            font-weight : normal;
            font-style  : normal;
            color       : #385F95;
            white-space : normal;
        }
        
        .x-grid-rowbody div {
            margin : 2px 5px 20px 5px !important;
            width  : 99%;
            color  : Gray;
        }
        
        .x-grid-row-expanded td.x-grid-cell{
            border-bottom-width:0px;
        }
    </style>

</head>
<body>
    <form id="form" runat="server">
        <ext:ResourceManager id="resourceManager" runat="server" Theme="Gray" />
    </form>
</body>
</html>

 

default.aspx.cs

using System;
using System.Web.UI.WebControls;
using System.Configuration;

using ext = Ext.Net;

namespace dk.looksharp.dbview
{
    public partial class _default : System.Web.UI.Page
    {

        string _dataSourceId = "SqlDataSource";
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            this.form.Controls.Add(BuildDataSource());
            this.form.Controls.Add(BuildGridPanel());
        }

        private SqlDataSource BuildDataSource()
        {
            string _selectStatement = 
                "SELECT " +
                    "[EmployeeID],  " +
                    "[LastName],  " +
                    "[FirstName],  " +
                    "[Title],  " +
                    "[TitleOfCourtesy],  " +
                    "[BirthDate],  " +
                    "[HireDate],  " +
                    "[Address],  " +
                    "[City],  " +
                    "[Region],  " +
                    "[PostalCode],  " +
                    "[Country],  " +
                    "[HomePhone],  " +
                    "[Extension],  " +
                    "[Notes]  " +   
                "FROM [Employees]";

            return new SqlDataSource
            {
                ID = _dataSourceId,
                ConnectionString = ConfigurationManager.ConnectionStrings["Northwind"].ToString(),
                SelectCommand = _selectStatement

            };
        }

        private ext.GridPanel BuildGridPanel()
        {
            return new ext.GridPanel
            {
                Border = true,
                Store =  
                {
                    this.BuildStore()
                },
                SelectionModel = 
                { 
                    new ext.RowSelectionModel() { Mode = ext.SelectionMode.Single }
                },
                ColumnModel =
                {
                    Columns =
                    {
                        new ext.Column 
                        {
                            ID="fullName", 
                            Text="Full Name",
                            Width=150,
                            DataIndex="LastName"
                            // <Renderer Fn="fullName
                        },

                        new ext.Column 
                        {
                            DataIndex="Title",
                            Text="Title",
                            Width=150
                        },
                        new ext.Column 
                        {
                            DataIndex="TitleOfCourtesy",
                            Text="Title Of Courtesy",
                            Width=150
                        },
                        new ext.Column 
                        {
                            DataIndex="BirthDate",
                            Text="BirthDate",
                            Width=110
                        },
                        new ext.Column 
                        {
                            DataIndex="HireDate",
                            Text="HireDate",
                            Width=110
                        },
                        new ext.Column 
                        {
                            DataIndex="Address",
                            Text="Address",
                            Width=150
                        },
                        new ext.Column 
                        {
                            DataIndex="City",
                            Text="City",
                            Width=100
                        },
                        new ext.Column 
                        {
                            DataIndex="Region",
                            Text="Region",
                            Width=100
                        },
                        new ext.Column 
                        {
                            DataIndex="PostalCode",
                            Text="PostalCode",
                            Width=100
                        },
                        new ext.Column 
                        {
                            DataIndex="Country",
                            Text="Country",
                            Width=100
                        },
                        new ext.Column 
                        {
                            DataIndex="HomePhone",
                            Text="HomePhone",
                            Width=150
                        },
                        new ext.Column 
                        {
                            DataIndex="Extension",
                            Text="Extension",
                            Width=100
                        }
                    }
                },
                View =
                {
                   new ext.GridView()
                   {
                        StripeRows = true,
                        TrackOver = true 
                   }
                }
            };
        }

        private ext.Store BuildStore()
        {
            ext.Store store = new ext.Store
            {
                ID = "store", // <-- ID is Required
                Model = 
                { 
                    new ext.Model 
                    {
                        Fields = 
                        {
                            new ext.ModelField("FirstName"),
                            new ext.ModelField("LastName"),
                            new ext.ModelField("Title"),
                            new ext.ModelField("TitleOfCourtesy"),
                            new ext.ModelField("BirthDate", ext.ModelFieldType.Date, "M/d hh:mmtt"),
                            new ext.ModelField("HireDate", ext.ModelFieldType.Date, "M/d hh:mmtt"),
                            new ext.ModelField("Address"),
                            new ext.ModelField("City"),
                            new ext.ModelField("Region"),
                            new ext.ModelField("PostalCode"),
                            new ext.ModelField("Country"),
                            new ext.ModelField("HomePhone"),
                            new ext.ModelField("Extension"),
                            new ext.ModelField("Notes"),
                            new ext.ModelField("company")
                        }
                    }
                }
            };

            store.DataSourceID = this._dataSourceId;
            //store.DataBind();

            return store;
        }
    }
}

Tags: , , ,

ASP.NET | Ext.NET

Comments are closed

License

All work downloaded from this site are licensed under the GNU AGPLv3 License

Calendar

<<  juni 2017  >>
mationtofr
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

View posts in large calendar

About me

I am yet another .NET developer (C#), experienced in various integration projects
  • Datacollection in the warehouse using pick by voice (VoCollect) or rf scanners (Psion Teklogix)
  • Electronic data exchange using Biztalk 2006 R2
Other cool stuff I have worked with in the past and present and will be working with in future

RecentPosts

RecentComments

None

Tracking