Create Ext.NET GridPanel in codebehind

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

Create Ext.NET objects in codebehind

For the last couple of years I have been using Ext.NET for intranet applications used by our team. The oldest application is a tableeditor in which we can quickly edit customization parameters for our integration solution based on Biztalk 2006 R2

In this article I will present a small example on how to work with Ext.NET in codebehind and this will also be the foundation for future articles where I will end up with a full blown table editor

I will use Visual Studio 2010, .NET Framework 4.x and Ext.NET 2.0 Beta. Data/content is stored on SQL Server 2005 

Use nuget in VS to download Ext.NET and related components, You also need to install MVC even if you do not intend to use it as Ext.NET uses some of the classes from MVC (no known workaround)

The code below is a tranformed version taken from the demo pages at Ext.NET
Direct link: http://examples.ext.net/#/Portal/Basic/Simple/

Documentation from an older version of Ext.NET can be found here: http://docs.ext.net/ 

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

In case you need a C# to VB conversions please use eg
http://www.developerfusion.com/tools/convert/csharp-to-vb/  

the page with markup (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>Portal</title>
</head>
<body>
    <form id="form" runat="server">
        <ext:ResourceManager id="resourceManager" runat="server" Theme="Gray" />
    </form>
</body>
</html>

 

Codebehind (default.aspx.cs)

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

using ext = Ext.Net;
using ux = Ext.Net.Utilities;

namespace dk.looksharp.dbview
{
    public partial class _default : System.Web.UI.Page
    {
        private int _portletId = 1;

        protected override void OnInit(EventArgs e)
        {
            // Viewport
            ext.Viewport _viewport = new ext.Viewport
            {
                Layout = "BorderLayout",
                StyleSpec = "backgroundColor: transparent;",
                Items = 
                { 
                    CreateAccordion(),
                    CreateTabPanel()
                }
            };
            this.form.Controls.Add(_viewport);
            base.OnInit(e);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!ext.X.IsAjaxRequest)
            {
                // Load portlet content
string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna."; this.resourceManager.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text)); foreach (ext.Portlet portlet in ux.ControlUtils.FindControls<ext.Portlet>(this.Page)) { portlet.Html = "={text}"; portlet.BodyPadding = 5; portlet.CloseAction = ext.CloseAction.Hide; } } } private ext.Panel CreateAccordion() { // Accordion / West Region ext.Panel _accordion = new ext.Panel { Region = ext.Region.West, Title = "West", Width = Unit.Pixel(200), Layout = ext.LayoutType.Accordion.ToString(), MinWidth = 175, MaxWidth = 400, Split = true, Margins = new ext.Margins(5, 0, 5, 5).ToString(), Collapsible = true, Items = { new ext.Panel { Title = "Navigation", BodyBorder = 0, BodyStyle = "padding:6px;", Icon = ext.Icon.FolderGo, Html = "={text}" }, new ext.Panel { Title = "Settings", BodyBorder = 0, BodyStyle = "padding:6px;", Icon = ext.Icon.FolderWrench, Html = "={text}" } } }; return _accordion; } private ext.TabPanel CreateTabPanel() { ext.TabPanel _panel = new ext.TabPanel { Title = "Tab Panel", ActiveTabIndex = 0, Region = ext.Region.Center, Margins = new ext.Margins(5, 2, 5, 0).ToString(), Items = { CreatePortalPanel("Tab 1"), CreatePortalPanel("Tab 2") } }; return _panel; } private ext.Panel CreatePortalPanel(string title) { ext.Portal _portal = new ext.Portal { Border = false }; ext.PortalColumn _column = null; for (int i = 0; i < 3; i++) { _portletId++; ext.Portlet _portlet = new ext.Portlet { ID = string.Format("Portlet{0}", _portletId), Title = string.Format("Panel {0}", _portletId), Icon = ext.Icon.Accept }; _column = new ext.PortalColumn { CellCls = "x-column-padding", Items = { _portlet } }; _portal.Items.Add(_column); } ext.Panel _panel = new ext.Panel { Title = title, Layout = ext.LayoutType.Fit.ToString(), Items = { _portal } }; return _panel; } } }

Certificate blues

Overview

Currently I am trying to figure out how we can implement the OIOSI/RASP Framework (OIO Service oriented Infrastructure/Reliable Asynchronous Secure Profile)

The framework supports reliable, secure E-Business using open standards. Including components for web service calls, non-repudiation, UDDI-registries and a standardized subset of the UBL 2.0 business document profile. Supported for .Net and java.

Among other things I need to install various certificates for use with services such as eg IIS to handle encrypted messages and this have given me some headaches as I haven't used them much until now
Obviously the documentation is takes the wrong path and not very well written, haven't we seen that one before once or twice

Googling around gave me some pieces of advice but not the full picture, by pure luck I found a topic at stackoverflow.com and some comments by Željko Tanovic and I managed to solve but also understand the problem

The problem

I had two errors "key does not exist" because IIS couldn't find the private key file and "invalid handle" caused by missing user privileges

First mistake being misled by the documentation was to install in the personal store and move the certificate to the localmachine store, the private key was installed in the current user folder and inaccessible by the IIS service accounts
Second was missing user privileges and straight forward to fix as soon as the first problem was solved

While troubleshooting you can use FindPrivateKey to get current location of the private key file. FindPrivateKey is part of the Windows Communication Foundation (WCF) and Windows Workflow Foundation (WF) Samples for .NET Framework 4

You can add root LocalMachine -t "db e0 d9 a8 1f 2c a2 ed 05 c7 55 81 64 68 a6 72 fb 44 e4 0a" to the debug project property tab and the console in the debugger to the path you need
Please note, the documentation gives you also an extra -c at the end, but this additional parameter causes an if statement to fail and nothing is found

Folder for private keys when the ceritificate is imported in the personal store
C:\Documents and Settings\<user>\Application Data\Microsoft\Crypto\RSA

Folder for private keys when the ceritificate is imported to localmachine store
C:\Documents and Settings\All Users\Application Data\Microsoft\Crypto\RSA\MachineKeys

Solution: Import certificates

Steps when importing certificates which is used by services such as eg IIS

  • Import certificate to the localmachine store (root / Trusted Root Certificate Authorities)
  • Check that the private key file is stored in the MachineKeys folder by using the FindPrivateKey tool
  • Set apprioprate user privileges for your service accounts, eg ASPNET and user account running the Application Pool

Problem solved - Well at least I can see my webservice page in IE Cool

Update! Instead of all the hazzle setting the access rights manually you can also use the Windows HTTP Services Certificate Configuration Tool (WinHttpCertCfg.exe)
http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=19801

Command line:

C:\Program Files (x86)\Windows Resource Kits\Tools>winhttpcertcfg 
             -g -c LOCAL_MACHINE\My -s MyWebSite -a DefaultAppPool

VMware Player - Virtual Network Editor

The Virtual Network Editor (vmnetcfg.exe) is not extracted during the installation and it is really needed if you want to mess around with the virtual network settings on the host OS.
It is a problem if you have different network adapters installed, like eg Bluetooth, WiFi, Hamachi etc

Extract cab files

You can extract all files from the installation by using the option /e and a destination folder is supplied

C:\Download\vmware>VMware-player-3.1.3-324285.exe /e .\extract

Change to the subfolder and find the file network.cab, open it in eg Izarch and extract vmnetcfg.exe to the vmware player installation folder. You can also create a shortcut in your list of program files if needed

Expand your vmware disks

I have used VMware Workstation and - Viewer for testing, development, deployment and maintenance during quite a few years. Great product for this.

From time to time I have been in need of expanding the disks on the virtual machine as they have been almost out of free space. With VMware it's quite easy to do using the free standalone Converter.

With VMware vCenter Converter you can take copies of your virtual machine and change the disksize during the process.

There's a few steps where you need to pay attention otherwise the process is straight forward

  • Select source
  • Let the converter read the configuration
  • Choose destination
  • And alter the options a little ...

The converter suggest "Copy all disks and maintain layout", change this to "Select volumes to copy" and you can set new disksize for each disk.

Type the new disksize in GB and watch while the converter does the all the hard work or go and grab a cop of coffee while you're waiting