Getting Started - MVCGrid.Net

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

1. Add a reference to MVCGrid.dll
2. Create a file called MVCGridConfig.cs under the App_Start folder
3. 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
   }
   }
   

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

   MVCGridConfig.RegisterGrids();
   

5. 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>
   

6. 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>
   

7. Add your grid definitions to the method above. See below for example.
8. 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.

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>();
})
);

See Demos Page for more examples.