Using Euro/EUR (€) Symbol with Ext.Net

This Blog moved to http://webapps-in-action.com/

UPDATE:

EuroMoney format is now included with Ext.Net Revision #3327

---

Today, I needed the currency Euro/EUR (€) within some Grids. So I search the Forums, and Tada! Found this nice example from Ext.Net Support Member Daniil. I just did some more tests and made some minor code style changes.

ASPX (Codebehind):

protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        Store store = this.GPanel.GetStore();
        store.DataSource = new object[] { 
                        new object[] {200000.12, 200000.12},
                        new object[] {-1123.42, -1123.42},
                        new object[] {3.42, 3.42},
                        new object[] {-0.42, -0.42},
                        new object[] {-42.456, -42.456},
                        new object[] {10000042.456, 10000042.456},
                        new object[] {-99000042.456, -99000042.456},
                        new object[] {99000042.451, 99000042.451},
                        new object[] {32.429, 32.429},                           
                        new object[] {15300.99, 15300.99},
                        new object[] {-15300.99, -15300.99},
                        new object[] {-5199.98, -5199.98},
                        new object[] {5199.98, 5199.98}
                        };
        store.DataBind();
    }
}

ASPX:

<!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="Head1" runat="server">
    <title>EURO Currency Renderer</title>
</head>
<body>
    <ext:ResourceManager ID="resManager" runat="server" Theme="Gray" RemoveViewState="true" />
    <form runat="server" id="app">
    <ext:GridPanel ID="GPanel" runat="server" AutoHeight="true">
        <Store>
            <ext:Store ID="Store" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="EUR" />
                            <ext:RecordField Name="USD" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="EUR" DataIndex="EUR">
                    <Renderer Handler="return EuroMoney(value);" />
                </ext:Column>
                <ext:Column Header="USD" DataIndex="USD">
                    <Renderer Format="UsMoney" />
                </ext:Column>
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
    <ext:XScript runat="server" ID="scripts">
        <script type="text/javascript">
            // EURO Currency Renderer
            var EuroMoney = function (v) {
                v = (Math.round((v - 0) * 100)) / 100;
                v = (v == Math.floor(v)) ? v + ".00" : ((v * 10 == Math.floor(v * 10)) ? v + "0" : v);
                v = String(v);
                var m = v.split('.');
                var whole = m[0];
                var sub = m[1] ? ',' + m[1] : ',00';
                var r = /(\d+)(\d{3})/;
                while (r.test(whole)) {
                    whole = whole.replace(r, '$1' + '.' + '$2');
                }
                v = whole + sub;
                return v + " &euro;";
            }
        </script>
    </ext:XScript>
    </form>
</body>
</html>

Ext.NET GridPanel: Paging against large tables using Linq-To-SQL with Stored Procedures

This Blog moved to http://webapps-in-action.com/

This is just a rought entry and addressed to advanced Ext.Net developers.

In this example I want to show you one possiblity of the ajax paging from the GridPanel against large tables using the performance of MS SQL Servers stored procedures, but still having the Linq-to-SQL DataContext features for OR Mapping.

So, first we need a Linq-to-SQL DataContext for our entities. Let's call it Demo_DC.
Now we need to created the entity, we want to use for binding to the Grid.

In my case, i drop a table called "MAKT" onto the designer in VS2010 (Demo_DC.dbml).

Now it's time for a suitable paging stored procedure. I name it "sp_paging".

ALTER PROCEDURE dbo.sp_paging
@PageStart INT, 
@PageLimit INT, 
@TotalCount INT OUTPUT
AS
BEGIN

-- get record count
WITH AllRecords AS ( 
SELECT * FROM MAKT WHERE SPRAS = 'D'
) SELECT @TotalCount = Count(*) From AllRecords;

-- now get the records
WITH AllRecords AS ( 
SELECT ROW_NUMBER() OVER (ORDER BY MATNR) 
AS Row, *
FROM MAKT WHERE SPRAS = 'D'
) SELECT * FROM AllRecords 
WHERE Row between @PageStart and @PageStart + @PageLimit;

END

You can also extent this with an additional string for dyamic searches, or
even dyamic generated SQL where conditions. But for these you need to put
the select into a string an exec it within the stored procedure. I might add a sample later.

After saving on the MSSQL, do a little refresh in the VS2010 Server Explorer
and drag it also to the Linq-to-Sql Designer. Looks then like this

select the dragged stored procedure and choose the entity "MAKT" as return type.

Right. Now, its time to extent our DataContext to return multiple Results.
We create a partial class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data.Linq;
using System.Data.Linq.Mapping;
using System.Reflection;

namespace LinqDataContext
{
    public partial class Demo_DC
    {
        [Function(Name = "sp_paging")]
        [ResultType(typeof(int))]
        [ResultType(typeof(MAKT))]
        public IMultipleResults sp_paging(
        [Parameter(Name = "@PageStart", DbType = "int")] int PageStart,
        [Parameter(Name = "@PageLimit", DbType = "int")] int PageLimit,
        [Parameter(Name = "@TotalCount", DbType = "int")] int TotalCount
        )
        {
            IExecuteResult result = this.ExecuteMethodCall(this,
            ((MethodInfo)(MethodInfo.GetCurrentMethod())), PageStart, PageLimit, TotalCount);
            return (IMultipleResults)result.ReturnValue;
        }
    }
}

We almost there. The only thing missing is the GridPanel DataBinding, or better binding the Store of the Grid.
Therefore we use the default DirectEvent Refesh Method of a store, like this:

protected void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
    int pagestart = e.Start;
    int pagelimit = e.Limit;
    int totalCount = 0;

    IMultipleResults results = this.dataContext.sp_paging(pagestart, pagelimit, totalCount);
    ISingleResult<MAKT> data = (ISingleResult<MAKT>)results.GetResult<MAKT>();

    e.Total = (int)results.ReturnValue;

    Store.DataSource = data;
    Store.DataBind();
}

Thats it. We receive now only the a page of our total resultset from
the database within nice clean entity objects and also know the total recordcount, without extra query from our web application.

Northwind Traders - Sample web application using Ext.NET and ASP.NET MVC

This Blog moved to http://webapps-in-action.com/

Sure, we all love ASP.NET. But, we love even more the new ASP.NET MVC Framework because of it's powerful structure and capabilities for SEO and AJAX usage.

So, matter of fact the Ext.Net Team created an ASP.NET MVC sample project using
their Ext.Net WebControls to show the combination of these capabilities.

Check out these Links:

Online Demo of the Example: http://mvc.ext.net/
or http://examples.ext.net/#/ASP.NET_MVC/Applications/Northwind/

The Source Code: http://code.google.com/p/coolite-mvc/

Ext.Net 1.0 released!

This Blog moved to http://webapps-in-action.com/

Today, after long months of work, the Ext.Net Team finally
released their first major version 1.0 of Ext.Net.

The Name Coolite just passed away. Now everything is called Ext.Net.

I'm really happy to work with this great framework at my current workplace,
so expect the usual and common daily development problems on this blog.

You'll find me and my posts also on the Community Forums with
the Nickname csharpdev (http://forums.ext.net)

So now lets check out the new Examples (like Calendar from ExtJS 3.3) and download the the sources under their brand new Website http://ext.net

Thanks again, to the mighty Ext.Net Team.

My first blog post

This Blog moved to http://webapps-in-action.com/

Hi,
this is my new blog about my work with Ext.Net. In the last weeks i've been working a lot with the ASP.NET Web Controls from Coolite and I have to admit. It rocks! I've never be able to build so easy cross browser rich GUIs without usage of plugins like Abobe Air/Flash, Java or Silverlight.

ExtJS is a very powerful Javascript Framework, but covers only the GUI Part. Ext.Net breaks these boundaries and enables ASP.NET Developer a seemless integration.
Binding lots of data via AJAX is as easy as set a varaiable, but more samples on this will follow in the upcoming posts.

C# Code Highlighting Sample:

// Comment
public class Test {
public Testing() {
}
 
public void Method() {
/* Another Comment
on multiple lines */
int counter = 0;
}
}

ASPX Code Highlighting Sample:

Ext.Net