Griddly

MVC/AJAX hybrid grid

Created by and

Griddly is an extremely configurable MVC/AJAX grid that separates render and data logic. Data is returned from an action method, settings are done in the view.

First render is done server side during the containing page render. Subsequent paging/filtering requests are done via AJAX to the same MVC action method using a hybrid approach.

First, install NuGet, then get Griddly from NuGet:

PM> Install-Package Griddly

Getting started

  1. Install the Griddly NuGet. This will set up the Javascript, CSS, and views.
  2. Add references to griddly.css and griddly.js in your _Layout.

You can also manually install by adding all the dependencies in the correct places. Until we get a manual install guide written, the best way is to look at this example project.

Hello World

This will use a simplified version of your standard order/person schema, with random data populated using FFaker.Net.

Domain

            public class SimplePerson
            {
                public int Id { get; set; }
                public string FirstName { get; set; }
                public string LastName { get; set; }
            }

            public class SimpleOrder
            {
                public int Id { get; set; }
                public string Item { get; set; }
                public int Quantity { get; set; }
                public decimal Total { get; set; }
                public SimplePerson Person { get; set; }
            }
        

Sample Data

            static readonly IQueryable<SimpleOrder> _indexTestData = BuildIndexTestData().AsQueryable();

            static IEnumerable<SimpleOrder> BuildIndexTestData()
            {
                List<SimpleOrder> items = new List<SimpleOrder>();
                Random r = new Random();
                int count = r.Next(10000);
                for (int i = 0; i < count; i++)
                {
                    yield return new SimpleOrder()
                    {
                        Id = i,
                        Item = Lorem.GetWord(),
                        Quantity = 1 + r.Next(10),
                        Total = 1 + (decimal)(r.NextDouble() * 10000),
                        IsApproved = r.Next(10) > 3,
                        Person = new SimplePerson()
                        {
                            Id = r.Next(10000),
                            FirstName = Name.GetFirstName(),
                            LastName = Name.GetLastName(),
                        }
                    };
                }
            }
        

Grid view

Here, we'll set up the columns and filters that make up the grid. This is done by passing a GriddlySettings<T> to the Html.Griddly extension method responsible for setting up and rendering the Griddly. My convention is to call the grid view <Parent View Name>Grid, so this will be IndexGrid.cshtml.

I'll add the filters and a couple of QOL tweaks like setting column names and display formats. I'll drop in a total aggregate for good measure.

            @{
                Layout = null;    
            }
            @Html.Griddly(new GriddlySettings<SimpleOrder>()
                {
                    ClassName = "index-grid"
                }
                .Column(x => x.Item,
                    filter: x => x.FilterBox(FilterDataType.String))
                .Column(x => x.Quantity,
                    filter: x => x.FilterRange(FilterDataType.Integer))
                .Column(x => x.Total, format: "c", defaultSort: SortDirection.Descending,
                    filter: x => x.FilterRange(FilterDataType.Currency))
                .Column(x => x.Person.FirstName, "First Name",
                    filter: x => x.FilterBox(FilterDataType.String))
                .Column(x => x.Person.LastName, "Last Name",
                    filter: x => x.FilterBox(FilterDataType.String))
            )
        

Action Method

This is where the rubber meets the road. We won't do anything fancy here, just grab the data source and implement the filters we set up in the view. We'll also default to only showing approved orders. This example uses parameters on the action method for simplicity, but it could just as easily be using a model.

            public ActionResult IndexGrid(string item, int? quantityStart, int? quantityEnd, decimal? totalStart, decimal? totalEnd, string firstName, string lastName, bool? isApproved)
            {
                this.SetGriddlyDefault(ref isApproved, "isApproved", true);

                IQueryable<SimpleOrder> query = _indexTestData;

                if (!string.IsNullOrWhiteSpace(item))
                    query = query.Where(x => x.Item.ToLower().Contains(item.ToLower()));

                if (quantityStart != null && quantityEnd != null)
                    query = query.Where(x => x.Quantity >= quantityStart && x.Quantity <= quantityEnd);
                if (quantityStart != null)
                    query = query.Where(x => x.Quantity >= quantityStart);
                if (quantityEnd != null)
                    query = query.Where(x => x.Quantity <= quantityEnd);

                if (totalStart != null && totalEnd != null)
                    query = query.Where(x => x.Total >= totalStart && x.Total <= totalEnd);
                if (totalStart != null)
                    query = query.Where(x => x.Total >= totalStart);
                if (totalEnd != null)
                    query = query.Where(x => x.Total <= totalEnd);

                if (!string.IsNullOrWhiteSpace(firstName))
                    query = query.Where(x => x.Person.FirstName.ToLower().Contains(firstName.ToLower()));
                if (!string.IsNullOrWhiteSpace(lastName))
                    query = query.Where(x => x.Person.LastName.ToLower().Contains(lastName.ToLower()));

                if (isApproved != null)
                    query = query.Where(x => x.IsApproved == isApproved);

                return new GriddlyResult<SimpleOrder>(query);
            }
        

Render grid

Now that the grid is all set up, we've just got to render it in the parent view, also done using the Html.Griddly extension method, but here we pass route parameters rather than the GriddlySettings<T> we used in the grid view.

            @Html.Griddly("IndexGrid")
        

Live Demo

And here's what it looks like after that's all set up.

Item  Quantity  Total  First Name  Last Name  Approved? 
id 8 $9,999.08 Naomi Berge True
quod 1 $9,991.08 Amani Oberbrunner True
cumque 7 $9,988.70 Shyanne Shanahan True
veniam 6 $9,981.05 Dawson Pacocha True
accusamus 3 $9,980.01 Erling Sauer True
suscipit 10 $9,978.17 Ottilie Lindgren True
consequatur 2 $9,966.34 Jada Schiller True
blanditiis 1 $9,965.05 Ulises Simonis True
molestias 7 $9,960.34 Mack Torp True
non 1 $9,960.02 Rosalyn Wisoky True
quasi 9 $9,959.09 Piper Mayer True
maxime 6 $9,956.38 Laney Collier True
tempore 9 $9,943.95 Garnett Kshlerin True
ipsa 5 $9,939.38 Fernando Murazik True
expedita 2 $9,936.51 Trever Abshire True
corporis 3 $9,927.70 Brigitte Braun True
ex 7 $9,924.27 Stephon Kunde True
quia 8 $9,921.83 Willie Luettgen True
laudantium 3 $9,918.32 Bernie Feeney True
dolore 3 $9,915.71 Abby Funk True
Total 12326 $11,071,312.16