Create Ext.NET CRUD in code behind

Please note: This code sample was created and tested using Ext.NET 2.0 Beta 1.

A slightly more comples example with command button to insert, edit and delete rows, taken from Gridpanel -> Saving Variations -> Httphandler

The NorthwindDataContext and other needed classes can be fetched from the download section at Ext.NET: http://www.ext.net/download/
Add a new project (Ext.Net.Examples) to your solution and add the classes you need to the project. Northwind and SerializableEntity can be found in the Code folder

I have created some functions to illustrate how the code can be organized when working in code behind. Columns and type of editor to use should be stored in configuration files or a tables but for this example everything is fixed/hardcoded values

Problem with generic handler

There is a minor problem with generic handler: SuppliersSave
Find this code

// --
StoreResponseData sr = new StoreResponseData()

And replace with this

// --
// We need to intialize the StoreResponseData otherwise an exception is thrown
StoreResponseData sr = new StoreResponseData()
{
    Data = JSON.Serialize(string.Empty),
    Message = string.Empty,
    Success = true,
    Total = 0
};

NorthwindDataContext

Also please note that the notwinddatacontext classes has joins between tables and as a consequence a lot of tables is loaded when quering the suppliers table from linq
I deleted the joins in order to test the code below but a less drastic approach is proabably the better 

Code

default.aspx

<!-- -->
<%@ Page Language="C#" 
    AutoEventWireup="true" 
    CodeBehind="default.aspx.cs" 
    Inherits="dk.looksharp.crud._default" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html />

<html>
<head id="head" runat="server">
    <title>The CRUD Example</title>
    <link href="/resources/css/site.css" rel="stylesheet" type="text/css" />    
</head>
<body>
    <ext:ResourceManager runat="server" />
    
</body>
</html>

default.aspx.cs

 

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

using ext = Ext.Net;

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

        protected ext.Column BuildColumn(string dataIndex, string columnLabel)
        {
            return BuildColumn(dataIndex, columnLabel, 0);
        }

        protected ext.Column BuildColumn(string dataIndex, string columnLabel, int flex)
        {
            return new ext.Column
            {
                ID = string.Format("col{0}", dataIndex),
                DataIndex = dataIndex,
                Text = columnLabel,
                Flex = flex,
                Editor =
                {
                    new ext.TextField()
                    {
                        ID = string.Format("txt{0}", dataIndex),
                    }
                }
            };
        }

        protected ext.Model BuildModel()
        {
            return new ext.Model()
            {
                ID = "model",
                IDProperty = "SupplierID",
                Fields = 
                {
                    new ext.ModelField("SupplierID"),
                    new ext.ModelField("CompanyName"),
                    new ext.ModelField("ContactName"),
                    new ext.ModelField("ContactTitle"),
                    new ext.ModelField("Address"),
                    new ext.ModelField("City"),
                    new ext.ModelField("Region"),
                    new ext.ModelField("PostalCode"),
                    new ext.ModelField("Country"),
                    new ext.ModelField("Phone"),
                    new ext.ModelField("Fax")
                }
            };
        }

        protected ext.Store BuildStore()
        {
            return new ext.Store()
            {
                ID = "store",
                Proxy =
                {
                    new  ext.AjaxProxy()
                    {
                        Url = "SuppliersSave.ashx",
                        Reader = {
                            new ext.JsonReader()
                            {
                                Root="data",
                                SuccessProperty = "success", 
                                MessageProperty = "message"
                            }
                        },
                        Writer = 
                        {
                            new ext.JsonWriter()
                            {
                                Encode = true, 
                                Root="data"
                            }
                        }
                    }
                },         
                SyncParameters = 
                {
                    new ext.StoreParameter()
                    {
                        Name = "action" ,
                        Value = "operation.action",
                        Mode = ext.ParameterMode.Raw
                    }
                },
                Model =
                {
                    BuildModel()
                },
                Sorters =
                {
                    new ext.DataSorter()
                    {
                        Property = "CompanyName",
                        Direction = ext.SortDirection.ASC
                    }
                },
                Listeners =
                {
                    Write =
                    {
                        Handler = "Ext.Msg.alert('Success', 'The suppliers have been saved');"
                    }
                }
            };
        }

        protected ext.Panel BuildTopPanel()
        {
            return new ext.Panel()
            {

                ID = "panel", 
                Region = ext.Region.North,
                Border = false,
                Height = 120,
                BodyPadding = 6,
                        
                Html = "<h1>CRUD Grid Example</h1>" +
                    "<p>Demonstrates how to get data from HttpHandler and save using HttpHandler.</p>"
            };
        }

        protected ext.GridPanel BuildCrudPanel()
        {
            return new ext.GridPanel()
            {
                ID = "gridPanel",
                Region = ext.Region.Center,
                Title = "Suppliers",
                Icon = ext.Icon.Lorry,
                Frame = true,
                Store =  
                {
                    this.BuildStore()
                },
                ColumnModel =
                {
                    Columns = 
                    {
                        BuildColumn("CompanyName", "Company Name", 1), 
                        BuildColumn("ContactName", "Contact Name"),
                        BuildColumn("ContactTitle", "Contact Title"),
                        BuildColumn("Address", "Address"),
                        BuildColumn("City", "City"),
                        BuildColumn("Region", "Region"),
                        BuildColumn("PostalCode", "Postal Code"),
                        BuildColumn("Country", "Country"),
                        BuildColumn("Phone", "Phone"),
                        BuildColumn("Fax", "Fax")
                    }
                },
                SelectionModel = 
                {
                    new ext.RowSelectionModel()
                    {
                        ID = "rowSelectionModel", 
                        Mode = ext.SelectionMode.Multi,
                        Listeners = 
                        {
                            Select = 
                            {
                                Handler = "#{btnDelete}.enable();"
                            },
                            Deselect =
                            {   
                                Handler = "if (!#{gridPanel}.selModel.hasSelection()) {#{btnDelete}.disable();}"
                            }
                        }
                    }
                },
                Plugins =
                {
                    new ext.CellEditing()
                    {
                        ID = "cellEditing" 
                    }
                },
                Buttons = 
                {
                    new ext.Button()
                    {
                        ID = "btnAdd",
                        Text = "Insert",
                        Icon = ext.Icon.Add,
                        Listeners =
                        {
                            Click =
                            {
                                Handler = "#{store}.insert(0, {}); #{gridPanel}.editingPlugin.startEditByPosition({row:0, column:0});"
                            }
                        }
                    },
                    new ext.Button()
                    {
                        ID = "btnDelete",
                        Text = "Delete",
                        Icon = ext.Icon.Delete,
                        Disabled = true,
                        Listeners =
                        {
                            Click = 
                            {
                                Handler="#{gridPanel}.deleteSelected();if (!#{gridPanel}.hasSelection()) {#{btnDelete}.disable();}"
                            }
                        }
                    },
                    new ext.Button()
                    {
                        ID = "btnSave", 
                        Text = "Save",
                        Icon = ext.Icon.Disk,
                        Listeners =
                        {
                            Click =
                            {
                                Handler = "#{store}.sync();"
                            }
                        }
                    },
                    new ext.Button()
                    {
                        ID ="btnCancel",
                        Text = "Clear",
                        Icon = ext.Icon.Cancel,
                        Listeners = 
                        {
                            Click = 
                            {
                                Handler = "#{gridPanel}.getSelectionModel().deselectAll();;if (!#{gridPanel}.hasSelection()) {#{btnDelete}.disable();}"
                            }
                        }
                    },
                    new ext.Button()
                    {
                        ID = "btnRefresh",
                        Text = "Refresh",
                        Icon = ext.Icon.ArrowRefresh,
                        Listeners =
                        {
                            Click = 
                            {
                                Handler="#{store}.load();"
                            }
                        }
                    }
                }
            };
        }


        protected void Page_Load(object sender, EventArgs e)
        {

            this.Page.Controls.Add
            (
                new ext.Viewport()
                {
                    Layout = "BorderLayout",
                    Items = 
                    {
                        BuildTopPanel(),
                        BuildCrudPanel()
                    }
                }
            );
        }
    }
}
 

Create Ext.NET GridPanel in codebehind

Please note: This code sample was created and tested using Ext.NET 2.0 Beta 1.

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