This project is read-only.

How to use

Controller
public ActionResult ListWithGrid()
{
    var people = _someService.GetPersonList();
    return View("List", this.Gridify(people, 25, "~/Views/Item/_List.cshtml")); //You can use T4MVC for path to partial view
}

View
@model IEnumerable<YourApp.Models.Person>
@{ 
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Person list</h2>
@Html.Partial("_List", Model)

Partial view
@model IEnumerable<YourApp.Models.Person>
<table class="gridify">
	<thead>
		<tr>
			<th>
				Id
			</th>
			<th data-column-name="Firstname">
				Firstname
			</th>
			<th data-column-name="Lastname">
				Lastname
			</th>
			<th data-column-name="Email">
				Email
			</th>
			<th data-column-name="Phone">
				Phone
			</th>
		</tr>
	</thead>
    <tbody>
    	@foreach (var person in Model) {
        <tr>
        	<td>
        		@person.Id
        	</td>
        	<td>
        		@person.Firstname
        	</td>
        	<td>
        		@person.Lastname
        	</td>
        	<td>
        		@person.Email
        	</td>
        	<td>
        		@person.Phone
        	</td>
        </tr>
        }
    </tbody>
</table>


You can use different ViewModel inside main View, but you are constrained to take IEnumerable<YourItem> as a model inside partial view

If you are using complex ViewModel in your main view then code would look like that:

public ActionResult ListWithGrid()
{
    var viewModel = new ListWithGridViewModel
                    { 
                         People = this.Gridify(_someService.GetPersonList(), 25, "~/Views/Item/_List.cshtml"),
                         Title = "Hello",
                         CurrentTime = DateTime.Now
                    }; 
    return View("List", viewModel);
}


If you want filtering to work, then you have to mark your headers (<th/> in my case) with data-column-name attribute, specifying name of the property on a model class for that column.
It is already done in the above Partial view example, so you can look up there.

How to install

There are two ways of setting up Gridify right now:
  1. Adding Gridify project to your solution
  2. Adding reference to Gridify assembly

First way is more preferable, because you always can tweak markup, styling or javascript to your needs.

So lets break it down into few simple steps.
  1. Add Gridify project to your solution or reference Gridify assembly
  2. Open your master page
    1. Add @using.Gridify if you are using Razor or <%@ Import Namespace="Gridify" %> if you are still on WebForms
    2. Add @Html.GridifierStyles() / <%: Html.GridifierStyles() %> to your <head> section
    3. Add @Html.GridifierScripts() in the bottom of page, after you included jQuery
  3. Ok, configuration is finished, now return to "How to use" section.

How it works

Basically, when you call Gridify it adds some additional stuff to ViewData. Then, when Html.GridifierScripts() gets called it checks if this stuff is in ViewData. If it's there, then it includes javascript code for rendering grid-stuff on top of your table. Remember, that for Gridify to find your table, you should mark it with the gridify class.

After that it's just javascript magic, you can look there, it's not that complicated.

Known issues

  • Remember to register controller in your IoC if you are using one. For example if you use Castle Windsor you need following line in your registration code:

windsorContainer.Register(Component.For<GridifyController>().ImplementedBy(typeof (GridifyController)).LifeStyle.PerWebRequest);

Last edited Nov 30, 2010 at 8:00 PM by ionoy, version 17

Comments

No comments yet.