WorkplaceX.org

Boost your Business App

From Database to Data Grid

This example shows how to bring an sql table or view directly to the browser including filtering, sorting, paging and Excel export.

/assets/db-to-data-grid.png

Create SQL Table

First let's create a new database table.

CREATE TABLE HelloWorld
(
    Id INT PRIMARY KEY IDENTITY,
    Text NVARCHAR(256),
    Number FLOAT
)

Generate C# Code

Next we need C# code for this table. Run command line:

wpx generate

This generates the following code for us:

// File: Application.Database/Database/Database.cs

namespace Database.dbo
{
    using Framework.DataAccessLayer;
    using System;

    [SqlTable("dbo", "HelloWorld")]
    public class HelloWorld : Row
    {
        [SqlField("Id", true, FrameworkTypeEnum.Int)]
        public int Id { get; set; }

        [SqlField("Text", FrameworkTypeEnum.Nvarcahr)]
        public string Text { get; set; }

        [SqlField("Number", FrameworkTypeEnum.Float)]
        public double? Number { get; set; }
    }
}

Show Data in Web App

In order to load the data grid write:

// File: Application/App/AppMain.cs

namespace Application.Doc
{
    using Database.dbo;
    using Framework.DataAccessLayer;
    using Framework.Json;
    using System.Linq;
    using System.Threading.Tasks;

    public class AppMain : AppJson
    {
        public override async Task InitAsync()
        {
            await new GridHelloWorld(this).LoadAsync();
        }
    }

    public class GridHelloWorld : Grid<HelloWorld>
    {
        public GridHelloWorld(ComponentJson owner) 
            : base(owner)
        {

        }

        protected override void Query(QueryArgs args, QueryResult result)
        {
            result.Query = Data.Query<HelloWorld>().OrderBy(item => item.Text);
        }
    }
}

Start the program. It looks like this, sorting and filtering already included and working:

/assets/data-grid.png

Feedback

Provide feedback to this page if you have any question regarding content or something should get updated.


ABOUT

WorkplaceX is an initiative to simplify and standardize the development of business applications. It is based on ASP.NET Core, Angular, Bootstrap, Bulma and SQL Server.

Copyright © 2022 All Rights Reserved by WorkplaceX.org
v1.11 (Framework v3.52.22 ♥ 11:08:37)