.Net, Programming

MVC Grid With jQuery and Bootstrap

mvc grid

The grid, always useful to show information and if you found something interesting then you should use it. The Grid.Mvc is the component that is easy to use in MVC and uses jQuery for filter data and bootstrap for responsive CSS.

Installation
– Install Grid.Mvc using NuGet package
– using package manager console (View-Other windows – package manager console) type the following command:

install-package Grid.Mvc

How to use?
modal class:

 public class Foo
        {
            public string Title
            {
                get;
                set;
            }
            public string Description
            {
                get;
                set;
            }
        }

A controller action which retrieves a strongly-typed collection of Model property and passes it to the View:

public ActionResult Index()
{
var items = fooRepository.GetAll();
return View(items);
}

View:

@using GridMvc.Html
@Html.Grid(Model).Columns(columns =>
{
 columns.Add(foo => foo.Title).Titled(
 "Custom column title").SetWidth(110);
 columns.Add(foo => foo.Description).Sortable(true);
}).WithPaging(20)

Add namespace GridMvc.Html and use of helper method Grid() you can generate the grid. You need to add reference in _layout.cshtml

<a href="http://@Url.Content(">http://@Url.Content(</a>
<a href="http://@Url.Content(">http://@Url.Content(</a>

You can use data annotation to define the grid in the model as below:

[GridTable(PagingEnabled = true, PageSize = 20)]
        public class Foo
        {
            [GridColumn(Title = "Name title", SortEnabled = true,
            FilterEnabled = true)]
            public string Name
            {
                get;
                set;
            }
            [GridColumn(Title = "Active Foo?")]
            public bool Enabled
            {
                get;
                set;
            }
            [GridColumn(Title = "Date", Format = "{0:dd/MM/yyyy}")]
            public DateTime FooDate
            {
                get;
                set;
            }
            [NotMappedColumn]
            public byte[] Data
            {
                get;
                set;
            }
        }

Filtering
You can use the filterable method to apply the filter based on data:

Columns.Add(o => o.Customers.CompanyName)
 .Titled("Company Name")
 .Filterable(true)
 .Width(220);

There are different types of widgets for filters

TextFitlerWidget – provides filter interface for text columns (System.String). This means that if your column has text data – Grid.Mvc renders specific filter interface:
string filter

NumberFilterWidget – provides filter interface for number columns (System.Int32, System.Decimal etc.)
number filter

BooleanFilterWidget – provides filter interface for boolean columns (System.Boolean):
boolean filter

DateTimeFilterWidget – provides filter interface for datetime columns (System.DateTime). To render DatePicker control you need setup Grid.Mvc datepicker on the page.

Other Links:
Live demo
Documentation and more detail

Tagged

1 thought on “MVC Grid With jQuery and Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *