Getting It Working

For ones who've just started



Case

You have heard about Reinforced.Lattice somewhere. Or your colleague told you about that, and you decided to try. Or your boss has directed you to embed it in the project because he has heard somewhere that it is fresh and handy to use. However, you are here and want to start with Reinforced.Lattice.
Do not be afraid of the complex manual - it will be significantly simpler in future! Initial setup is the most complex part.
Also, If you are too lazy to read - you can download this case study source code using buttons above. Code comments hold almost same information.
Read carefully, follow the steps and here we go.

Solution

Step 1 - Download and install

Let's assume that you already have ASP.NET MVC5 project and also you have some DB connected to it. It must be behind ORM supporting LINQ and IQueryables. If you do not have a database - you can use any other data source supplying IQueryable of some entities you want to display.
I will provide examples using User class as my source entity stored in database and ORM that I want to display and also UserRow class acting like POCO ViewModel (show). If you do not have ViewModel - create it just as you regulary create ViewModels for MVC forms. Of course, you can do it later.
Go to your NuGet Package Manager Console and type there:

    PM > Install-Package Reinforced.Lattice.Bundle.Mvc5    

Or you can use Visual Studio NuGet's Ui if you like it.
Reinforced.Lattice bundle package will bring several important things:

  • Reinforced.Lattice core library itself
  • Client script to be used on your pages
  • Huge templates page containing default datagrid template for Twitter Bootstrap
  • Reinforced.Lattice.Mvc5 library that contains extensions for its requests handling via Mvc5
  • Reinforced.Lattice.Mvc5.Razor library with some handy extensions for Razor templating

Remember all these components - we will use them later

Step 2 - Connect scrpt

Now go to your master page (usually, _Layout.cshtml) and paste following lines to your <head> tag:

Compare with my one if you're not sure. We will need this "scripts" section later. It is critically important for it to follow after Reinforced.Lattice script connection.

Step 3 - Prepare your ViewModel

  1. Go to your page's ViewModel
  2. Add using to Reinforced.Lattice.Configuration namespace
  3. Put a property of type Configurator<User,UserRow> called Table to your ViewModel (verify with my one if you aren't sure)
  4. Create somewhere a static class - we will use it to store our table's configuration
  5. Navigate to static class created at previous step and create there static method consuming configurator as this-parameter and returning itself. Put some code using configurator into it. See how I do that.

Configurator<,> is key class exposing Reinforced.Lattice functionality. It is being used to produce a piece of JSON code for client side as well as for maintaining future requests to the server side. And we have to keep it in the same (well, almost same) state both in our controller and in our ViewModel. That's why we use extension method for configuration.

Step 4 - Prepare your page

  1. Go to your page that you want to put table to
  2. Pick a <div> or another tag you wish to display table in and assign id="table" to it
  3. Go to the bottom of the page and set up following code around your scripts section:

Basically that's how we use configurator to pass necessary data to our client script. Check full page + ViewModel configuration.

Step 5 - Prepare your controller

Now you have to make table crunch your IQueryable<TSource> and produce results. To do that you have to implement so-called "handle method" within your controller. Also add necessary initializations of your ViewModel with empty configurator, calling configuration method on it that you've created before.
Please refer to controller class explained with comments as it is too senseless to reveal it to step-by-step process.

And we are done here

After changing controller code you can press F5 or Run button in your Visual Studio, or run local IIS and navigate to /Home/Index page.
Also you can launch live demo on all documentation pages using green "Live Demo" button.

Reinforced.Lattice ViewModels are of course are little bit different than regular MVC forms ViewModels. E.g. you do not have to put arrays of SelectListItems to it. Also, complex nested types are not allowed there. Optimal way is to keep you ViewModel for Lattice as flat and as plain-est as possible. Try to put actually all the fields that you are displaying to there. Of course, Lattice works with nested types, but it may reduce performance.

NB! Configurator<,> type parameters. Learn them clearly.
  • TSource - first one. It is type of data from your ORM. Putting entities from DataContext/DbContext here is safe. Also may be referred as "first", "left", "source", "from".
  • TRow - second one. Is actually type of your ViewModel for single row in table. Also may be referred as "second", "right", "target", "to"

Do not mess them - there 2 types are your best friends. It is important to understand what is applicable to TSource and what is applicable to TRow

In Reinforced.Lattice table configurations are maintained as C# extension methods implementing fluent interface configuration. So you can chain your configurations methods and therefore combine configurations obtaining new configurations.
No XML configuration, no JSON configuration, no assigning properties, even no creating separate web project to enable grids! Just clear, precise, chainable and maintainable fluent configuration.
Unfortunately you cannot chain configurations for cells templating, but you can do lot more other fun with them.