Click here to Skip to main content
12,700,823 members (30,443 online)
Click here to Skip to main content

Tagged as


7 bookmarked

Client-side Grid Control in JavaScript

, 2 Oct 2012 CPOL
A feature-rich, reusable client-side grid control written entirely in JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">

    <link href="Grid.css" rel="stylesheet" type="text/css" />

    <!-- jQuery is only used for this test.  It is not required for the Grid class. -->
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Grid.js" type="text/javascript"></script>

    <script type="text/javascript">

        // Global variable to hold a reference to the Grid object
        var myGrid;

        $(document).ready(function ()
            // This commented out code is an example of getting a JSON object from a REST service and passing that in as the data source for the Grid.
            /* = true;
            $.getJSON("http://localhost/TestService/TestService/Cars", {}, function (data)
            myGrid = new Grid('myGrid', data);

            // Use the following JSON object as the data source.
            var testData = [
                { "Id": 22, "make": "Honda", "model": "CR-V", "year": "1998" },
                { "Id": 23, "make": "Toyota", "model": "Sienna", "year": "2005" },
                { "Id": 24, "make": "Nissan", "model": "Sentra", "year": "2001" },
                { "Id": 25, "make": "Toyota", "model": "Corolla", "year": "2011" },
                { "Id": 26, "make": "Ford", "model": "Focus", "year": "2008" },
                { "Id": 27, "make": "Dodge", "model": "Charger", "year": "2004" },
                { "Id": 28, "make": "Ford", "model": "Fiesta", "year": "2013" },
                { "Id": 29, "make": "Toyota", "model": "Camry", "year": "2008" },
                { "Id": 30, "make": "Dodge", "model": "Durango", "year": "2004"}];

            // Call the constructor.
            myGrid = new Grid('myGrid', testData);

            // Now, set the rest of the public properties on the Grid object as necessary before
            // calling the Build function.

            myGrid.bindFields =
                    { "FieldName": "make", "Header": "Make", "Width": 150 },
                    { "FieldName": "model", "Header": "Model", "Width": 150 },
                    { "FieldName": "year", "Header": "Year", "Width": 50 }
            myGrid.dataKeyName = 'Id';
            myGrid.IsSelectable = true;
            myGrid.IsSortable = true;
            myGrid.altRowClassName = "alt";

            //myGrid.ScrollBars = true;
            //myGrid.MaximumHeight = 150;

            myGrid.groupedByKeyName = 'make';
            //myGrid.groupRowClassName = "row";
            myGrid.groupExpandImage = true;
            groupRowHighlight = 'groupHighlight';


    <table id="myGrid" border="0" cellpadding="0" cellspacing="0" class="gridJS"></table>
    <input type="button" value="Get Key" onclick="alert(myGrid.selectedKey());" />

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.


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


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.

.NET including WPF, WCF, WWF, and C#.

You may also be interested in...

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