Getting Started

Prerequisites

• MVC 3 or greater
• jQuery
• Bootstrap 3 (Or you can create your own custom style.)

Installation

Using NuGet Package

1. Install the NuGet Package

PM> Install-Package MVCGrid.Net

2. Add the javascript reference to your _Layout page after jquery is referenced:

<!-- Be sure this is after jquery reference --> <script src="~/MVCGridHandler.axd/script.js"></script>

3. Add your grid definitions to the RegisterGrids method in the MVCGridConfig file under the App_Start folder. See below for example.
4. Use the grids in your view by adding the using @using MVCGrid.Web and then the html helper @Html.MVCGrid("YourGridName")

Manually Installing

Add a reference to MVCGrid.dll Create a file called MVCGridConfig.cs under the App_Start folder Add the following contents to the new file inside the namespace section:

using MVCGrid.Web; public class MVCGridConfig { public static void RegisterGrids() { // add your Grid definitions here, using the MVCGridDefinitionTable.Add method } }

Add the following line to Global.asax in the Application_Start() method

MVCGridConfig.RegisterGrids();

Add the following to your web.config:

<system.webServer> <handlers> <add name="MVCGridHandler" verb="*" path="MVCGridHandler.axd" type="MVCGrid.Web.MVCGridHandler, MVCGrid" /> </handlers> </system.webServer>

Add the javascript reference to your _Layout page after jquery is referenced:

<script src="~/MVCGridHandler.axd/script.js"></script>

Add your grid definitions to the method above. See below for example. Use the grids in your view by adding the using @using MVCGrid.Web and then the html helper @Html.MVCGrid("YourGridName")

Creating Grid Definitions

Below is a basic example of how to configure a grid. See the documenation or demos for additional properties.

Inside MVCGridConfig.cs

MVCGridDefinitionTable.Add("UsageExample", new MVCGridBuilder<YourModelItem>() .WithAuthorizationType(AuthorizationType.AllowAnonymous) .AddColumns(cols => { // Add your columns here cols.Add("UniqueColumnName").WithHeaderText("Any Header") .WithValueExpression(i => i.YourProperty); // use the Value Expression to return the cell text for this column cols.Add().WithColumnName("UrlExample") .WithHeaderText("Edit") .WithValueExpression((i, c) => c.UrlHelper.Action("detail", "demo", new { id = i.YourProperty })); }) .WithRetrieveDataMethod((context) => { // Query your data here. Obey Ordering, paging and filtering paramters given in the context.QueryOptions. // Use Entity Framwork, a module from your IoC Container, or any other method. // Return QueryResult object containing IEnumerable<YouModelItem> return new QueryResult<YourModelItem>() { Items = new List<YourModelItem>(), TotalRecords = 0 // if paging is enabled, return the total number of records of all pages }; }) );

Non-Fluent Example

You can also confugre the grids using the non-fluent method if you prefer.

GridDefinition<YourModelItem> def = new GridDefinition<YourModelItem>();

GridColumn<YourModelItem> column = new GridColumn<YourModelItem>(); column.ColumnName = "UniqueColumnName"; column.HeaderText = "Any Header"; column.ValueExpression = (i, c) => i.YourProperty; def.AddColumn(column);

def.RetrieveData = (options) => { return new QueryResult<YourModelItem>() { Items = new List<YourModelItem>(), TotalRecords = 0 }; };

MVCGridDefinitionTable.Add("NonFluentUsageExample", def);

Setting Defaults

To set defaults for multiple grids, create a GridDefaults object and set the desired properties. Then pass that GridDefaults object into the GridBuilder or GridDefinition when creating it.

GridDefaults defaultSet1 = new GridDefaults() { Paging = true, ItemsPerPage = 20, Sorting = true, NoResultsMessage = "Sorry, no results were found" };

MVCGridDefinitionTable.Add("UsageExample", new MVCGridBuilder<YourModelItem>(defaultSet1) // pass in defaults object to ctor .AddColumns(cols => { // add columns }) .WithRetrieveDataMethod((context) => { //get data return new QueryResult<YourModelItem>(); }) );