Javascript DataGrid using MVC pattern

Javascript DataGrid using the MVC pattern (CodeProject)
This grid supports resizing, draging, and sorting the columns. It was implemented using the MVC pattern.
Download demo project - 19.6 KB

Introduction

The MVC pattern is the way of breaking an application or GUI control into three parts: the controller, the model, and the view. The MVC pattern was designed to deal with input, data processing, and rendering the data into the GUI realm. The user input, data processing and rendering the data are separated and handled by the view, model, and controller objects.

Grid features

This grid supports dragging columns, resizing columns, and sorting columns. The double click on the column header will cause sorting the grid by the clicked header column. In order to resize columns, you need to move the header separator, holding the mouse button. It will cause junking the text labels in resizing column if they are too long to be in the cell. To drag a column you need to move the mouse on the header, holding the mouse button.The grid also has two kind of menus: the selected row menu and the grid menu. Right-clicking on row will cause an appearance of the selected row menu and right-clicking anywhere out of rows will cause an appearance of the grid menu.

The grid has two events "onRowUpdated" and "onRowAdded". These events fire on "Add","Update" button click and return the obj that contains new values for grid row.