Click here to Skip to main content
13,252,815 members (49,723 online)
Click here to Skip to main content
Add your own
alternative version

Stats

16.6K views
622 downloads
7 bookmarked
Posted 28 Sep 2012

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)
United States United States
For over 25 years I have worked in the Information Systems field as both a full-time employee and an independent contractor for a variety of companies.

I have extensive professional experience with numerous programming languages and technologies including C#, JavaScript, SQL, VB.NET, and ASP.NET as well as a working knowledge of a great variety of others. I also have an advanced understanding of the concepts behind these technologies including Object-Oriented Programming, Relational Data, Functional Programming, MVC and MVVM.

Some of my more recent work has been designing and building web applications primarily with JavaScript in conjunction with many of the JavaScript libraries/frameworks including jQuery, KnockoutJS and Bootstrap and consuming both JSON and REST services.

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. More recently I have managed a team of software developers at a local mid-size company.

You may also be interested in...

Pro

Comments and Discussions

 
QuestionIs it Editable? Pin
TheCopacabanaMan28-Dec-13 5:59
memberTheCopacabanaMan28-Dec-13 5:59 
GeneralNice code, but not working in FireFox 15.0 Pin
Eric Conway2-Oct-12 8:36
memberEric Conway2-Oct-12 8:36 
Grid appears but no data.

It is working in IE 8.
QuestionNice but how do I download the entire code sample (.zip file) Pin
Jeff O'Connell30-Sep-12 5:57
memberJeff O'Connell30-Sep-12 5:57 
AnswerRe: Nice but how do I download the entire code sample (.zip file) Pin
Shawn Lawsure30-Sep-12 7:29
memberShawn Lawsure30-Sep-12 7:29 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 3 Oct 2012
Article Copyright 2012 by Shawn Lawsure
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid