Table of Contents

Introduction

Dojo Toolkit is an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites and provides some really powerful user interface features (Dojo Toolkit). One of the most powerful Dojo tools is DataGrid (DataGrid demo).

In Dojo DataGrid article, I showed you how to use Dojo DataGrid in an MVC project and there, I said that "we need a full article to talk about sorting and paging". Here you are.

This article walks-through the process of creating an EnhancedGrid supporting Paging and Sorting. For making this kind of grid, we will use Dojo EnhancedGrid, Entity Framework, SQL Server and ASP.NET MVC Web API.

Creating Blog Model

This demo uses an ASP.NET Web API Project.

This project uses Entity Framework Database First approach. But this isn't the point, you could also use Entity Framework Code First or Model First. Here, you could find an introduction to Database First development using Entity Framework. Database First allows you to reverse engineer a model from an existing database. You could use the article until you've got your model, your classes and your database in place, nothing more. We will make our controllers and views. Your Model and Database should be something like this:

Home/Index View

Home/Index View should contain all the codes below:

Dojo Data Grid

You could see a complete article about the code below in here and here or here. This view will define our EnhancedGrid.

BlogController

As Dojo sends and receives JSON data to perform CRUD operations on the entities, so we need RESTful service within an ASP.NET MVC. We use API controller to make our RESTful service. Because we need Json as output, we must add the following codes to "App_Start/WebApiConfig.cs" to force API controller to return Json as output:

Dojo EnhancedGrid? for paging sends Range: items=0-9 in header. So we use HttpContext.Current.Request.Headers["Range"] for getting the Range, and the code above, set the start of range in a and set the end of range in b.

Finally, we need to respond to DojoEnhanced request, the range that our Blog ApiController will return and the amount of all records in Response Header in something like "Content-Range:items 0-9/50000" and the records that were in the range. The following three lines will do these:

Hi,
Not only Dojo DataGrid but also, most of the javascript base grids are not SEO friendly. But they are perfect for Web Applications and site Control Panels. But you can use them in public site and make some links that allow search engines crawl the whole grid data and users benefit, this type of grid.