Click here to Skip to main content
Click here to Skip to main content
Go to top

Client-side Grid Control in JavaScript

, 2 Oct 2012
Rate this:
Please Sign up or sign in to vote.
A feature-rich, reusable client-side grid control written entirely in JavaScript

Introduction

As web development moves towards pure client-side processing (HTML and JavaScript), it will be important to have a readily available set of reusable controls built entirely for the client. This article and associated code features a Grid control written this way. It supports the following functionality:

  • Use JSON object as the data source
  • Row selection
  • Row identifier (i.e., data key name)
  • Sorting by clicking on the column header (not applicable when grouping)
  • Alternate row display
  • Scroll bars
  • Group/display by a given group field (see below)

Future potential enhancements:

  • Paging
  • Fixed-header when scrolling

Background

The ASP.NET GridView control is a server-side control that this control is meant to replace. The GridView has a number of missing features and developers end up customizing the server-side control only to find it's cumbersome due to the postback model (the custom code usually ends up being client-side code anyway).

Using the Code

The Grid control is wrapped in a JavaScript class and is quite easy to use. Currently, the only type of data source it supports is a JSON object (what else would you want anyway). This allows you, for example, to call a REST service and assign the returned data directly to the grid.

In your HTML, declare a <table> element with an id (and, optionally, a CSS class for your own styling). This is where the grid will be displayed.

To use, first call the only constructor on the Grid class like this:

// The first argument is the id of the HTML table created above and the 
// second is the JSON object data source.
var myGrid = new Grid('myGrid', testData);

Then set any (public) properties on the created object depending on what functionality is desired. The only other required property is the bindFields property. An example of how to set the bindFields property is as follows:

myGrid.bindFields =[{ "FieldName": "make", "Header": "Make", 
   "Width": 150 },{ "FieldName": "model", "Header": "Model", "Width": 150 }, 
   { "FieldName": "year", "Header": "Year", "Width": 50 }];

See the comments inside the class for a description of all public properties and methods.

Finally, call the Build public method to generate the grid:

myGrid.Build();

See the documentation at the top of the grid.js file for a complete code example with test data. Also, a test HTML file along with a CSS file has been uploaded with the .js file as an example of how to use and style the control.

Points of Interest

No JavaScript frameworks, e.g., jQuery or Dojo, are used.

History

  • Revision 1 - Fix for IE7, Chrome, and Firefox - 09/28/2012 - Uploaded new source code
  • Revision 2 - Added download link (below)
  • Revision 3 - Fix for better column alignment on grouping, new support for a expand/collapse image, and now including jquery file

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shawn Lawsure
Software Developer (Senior) Diversified Business Communications
United States United States
For over 20 years I have worked in the Information Systems field as a full-time employee for a variety of local companies. Throughout this time I have had the privilege to work with many different technologies and languages from COBOL on IBM mainframes to C# in Silverlight. My most recent work has been developed using the entire .NET Framework stack including Windows Presentation Foundation, Windows Workflow Foundation, and Windows Communication Foundation. Prior to this I spent many years upgrading a COM and ASP-based application written in VB6 to .NET. In nearly all of the work I have been involved with in the past ten years I have played a lead role in the design as well as the development of the work.
 
Specialties
.NET including WPF, WCF, WWF, and C#.

Comments and Discussions

 
QuestionIs it Editable? PinmemberTheCopacabanaMan28-Dec-13 4:59 
GeneralNice code, but not working in FireFox 15.0 PinmemberEric Conway2-Oct-12 7:36 
QuestionNice but how do I download the entire code sample (.zip file) PinmemberJeff O'Connell30-Sep-12 4:57 
AnswerRe: Nice but how do I download the entire code sample (.zip file) PinmemberShawn Lawsure30-Sep-12 6:29 
Sorry about that. I'm new to this. I just submitted a new version of the tip with a download link at the bottom. You should be able to use that to download all the files as soon as it's approved.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 3 Oct 2012
Article Copyright 2012 by Shawn Lawsure
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid