Getting Started

Prerequisites

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.

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

See Demos Page for more examples.