Sunday, February 6, 2011

Second part: MVC.net & jqGrid

Let’s start by explaining how to include jqGrid (http://www.trirand.com/blog/) in your views. First you need to download and unzip jqGrid and jQueryUI (http://jqueryui.com/). I placed them in the root folder (jquery-ui-1.8.7.custom, jquery.jqGrid-3.8.2) of my project. Afterwards you need to reference them in the header of your web page.

<%--css for UI--%>
<link rel="stylesheet" type="text/css" media="screen" href="<%:Url.Content("~/jquery-ui-1.8.7.custom/css/ui-lightness/jquery-ui-1.8.7.custom.css") %>" />
<%--css for grid--%>
<link rel="stylesheet" type="text/css" media="screen" href="<%:Url.Content("~/jquery.jqGrid-3.8.2/css/ui.jqgrid.css") %>" />
<%-- jquery scripts --%>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/jquery-1.4.2.min.js") %>" type="text/javascript"></script>
<%-- ui scripts --%>
<script src="<%:Url.Content("~/jquery-ui-1.8.7.custom/js/jquery-ui-1.8.7.custom.min.js") %>" type="text/javascript"></script>
<%-- grid scripts --%>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js") %>" type="text/javascript"></script>
<script src="<%:Url.Content("~/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js") %>" type="text/javascript"></script>

Including following code should render the jqGrid on your page.

<table id="grid">
</table>
<div id="pager">
</div>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#grid").jqGrid({
            url: "/JqGrid/GridData",
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Start Time', 'End Time', 'Date', 'Description', 'Notes'],
            colModel: [
            { name: 'FromTime', sortable: true, editable: true, edittype: 'text', width: 80 },
            { name: 'ToTime', sortable: true, editable: true, edittype: 'text', width: 80 },
            { name: 'Date', search: true, editable: true, edittype: 'text', width: 80 },
            { name: 'Description', search: true, editable: true, edittype: 'text', width: 200 },
            { name: 'Notes', sortable: true, editable: true, edittype: 'text', width: 150}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50, 100, 200, 500, 1000],
            sortname: 'Date',
            sortorder: "desc",
            height: "100%",
            viewrecords: true,
            scrollOffset: 0,
            caption: 'Sample'
        });

        jQuery("#grid").jqGrid('navGrid', '#pager',
            { edit: true, add: true, del: true, search: true },
            { url: "/JqGrid/Edit", width: 'auto', closeAfterEdit: true, beforeShowForm: function (formid) { $("#Date").datepicker({ dateFormat: 'dd.mm.yy', showButtonPanel: true }); } },
            { url: "/JqGrid/Create", width: 'auto', closeAfterAdd: true, beforeShowForm: function (formid) { $("#Date").datepicker({ dateFormat: 'dd.mm.yy', showButtonPanel: true }); } },
              { url: "/JqGrid/Delete" },
            { closeAfterSearch: true, closeOnEscape: true, multipleSearch: true });
    });
</script>

Let’s explain now some parts:

url: "/JqGrid/GridData" -> tells where the grid should retrieve the data
colNames: ['Start Time', 'End Time',..] '-> column names
colModel: [{ name: 'FromTime' ...}] –> describes the data

To be more precise data is formatted as json. For example:
"cell":["00:00","02:00","06.02.2011","Element0",""]
where the element 1 (ex. 00:00) of cell items corresponds to the item 1 of the colNames and colModel items. 

Finally, we are going to investigate how data is retried from a controller. This part is quite simple you just need to have the data in a list object. At that moment you will have an extension method which encapsulate sorting, filtering and paging functionality. It is just enough to call JqGridDataModelConvert and to specify which properties of the objects contained in the list corresponds to the colModel. Moreover the property has to be wrapped by an object of GridCell, which encapsulate compare and string serialization and deserialization logic. Most of the time you will use BasicGridCell<T>, but it is also possible to extend the wrapper with custom code.

Example:

public virtual ActionResult GridData(GridSettings jqGridSettings)
{
    JqGridDataModel data = Data.JqGridDataModelConvert(columns =>
    {
        columns.Add("FromTime", ev => new BasicGridCell<string>(ev.FromTime));
        columns.Add("ToTime", ev => new BasicGridCell<string>(ev.ToTime));
        columns.Add("Date", ev => new DateTimeGridCell(ev.Date) { Format = "dd.MM.yyyy" });
        columns.Add("Description", ev => new BasicGridCell<string>(ev.Description));
        columns.Add("Notes", ev => new BasicGridCell<string>(ev.Notes));
    }, ev => new BasicGridCell<int>(ev.ID), jqGridSettings);
    return Json(data);
}

Programming is fun!!

Saturday, February 5, 2011

First part: MVC.net & jqGrid

This is the first part of a series of posts in which I am going to explain my solution for a fully functional data table with sorting, searching, filtering and paging functionalities. For reaching my goal I am using ASP.NET MVC 2.0 with jQuery (http://jquery.com/)and the jqGrid (http://www.trirand.com/blog/)plugin. I was browsing the internet looking for a solution, but I was not able to find a complete working solution. To be more precise I found some solution, but they were always buggy with common errors for example using simple string sorting for all data types. Basically, this examples were using string comparison, which for example is not evaluating  correctly on dates or on integers. A concrete example: Given numbers from 1 to 15 the sorted result would be 1,10,11,12,13,14,15,2,3,4,5,6,7,8,9.

Today I would like only to publish the sample project, to explain how to set up and to show how to use it. In the near future I will also explain more in detail some tricky parts of my solution. Today I would like only to publish the sample project, to explain how to set up and to show how to use it. In the near future I will also explain more in detail some tricky parts of my solution.

The project can be downloaded by the following url:
http://cid-a8f4afb63c503b89.office.live.com/self.aspx/.Public/MvcJqGrid.zip
It is enough to unzip and to start the solution.

Have fun to investigate about my approach!