Click here to Skip to main content
12,621,302 members (32,105 online)
Click here to Skip to main content
Add your own
alternative version

Stats

15.3K views
708 downloads
12 bookmarked
Posted

GridView-like JavaScript control for displaying JSON data

, 23 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
small, customizable control for displaying JSON data similar to a GridView

Introduction

In a previous article I was exploring a way to push JSON data from an SQL DataTable  to a browser. There are of course many other ways to generate tabular JSON data, including Entity Framework collections. When it comes to the display and client side processing of this data, however I didn't find plenty of available controls and the ones that I found were quite heavy.

So I decided to play around with Javascript and try to come up with something that I hope may be of some use to someone. 

Background

This first attempt at developing a small GridView like control doesn't rely heavily on jQuery and is not a plugin. It is a simple Javascrpit object that uses some jQuery functions here and there. I realize that this presents a limitation when it comes to nesting of multiple controls, so sometimes in the future I will probably play around with a jQuery plugin that implements the same functionality.

Using the code 

The server side code is the same as in the previous article: Simple Way of Using SQL DataTables to JSON in MVC  and it's purpose is to generate some JSON formatted data from a hardcoded sample DataTable and to send it to the browser. 

The server side control looks like this: 

        public JsonResult GetJsonPersons()
{
    ViewModels.DataAccessLayer oDAL = new ViewModels.DataAccessLayer();

    DataTable dtPersons = oDAL.GetTable();
    List<Dictionary<string, object>> lstPersons = oDAL.GetTableRows(dtPersons);

    return Json(lstPersons, JsonRequestBehavior.AllowGet);
} 

The client side includes some Javascript include objects: 

  • jquery-1.10.2.min.js - the jQuery Library 
  • gridview.js - the Javascript object, described here
  • bpopup.js - a small jQuery plugin for modal pop-ups developed by Bjoern Klinggaard, that is used by a callback function in case you want to use HyperLinks in a GridView column, more about that below. 

The HTML body includes only two div elements that are the root elements used by the  GridView and the modal pop-up.: 

<body > 

    <div id="Grid1_"></div>
    <div id="Grid1_PopUp"></div>

</body > 

The GridView object works by using a root element, passed to it, generates and adds the elements of an HTML table as childElements to it. It generates and populates a header row either with the field names of the JSON object, or it would use a configuration JSON object if one is provided. It populates the cell elements with the data from the the JSON object and generates a navigation set of links, depending on the selected page number.

The initialization of a GridView object is done with the following code:

function getPersons() {
  try {
    $.getJSON("/CPArticle1/GetJsonPersons", null, function (data) {
      try {
        var dtPersons = eval(data);
        window.oGridView = new GridView("Grid1_");      .
        oGridView.jsonConfig = Grid1_Layout;
        oGridView.dataTable = dtPersons;
        oGridView.displayPage();
      }
      catch (ex1) {
        alert(ex1);
      }
    });
  }
  catch (ex) {
      alert(ex);
  }
}

window.oGridView = new GridView("Grid1_"); - initializes the GridView object by passing the id of the root div element Grid1_, that is placed in the HTML body. 

oGridView.jsonConfig = Grid1_Layout; - assigns a JSON configuration object, that will be described below. If you comment out this line, GrIdView will parse and display all of the JSON data colums and will populate the header with the names of the data fields as they are in the JSON data object dtPersons. 

oGridView.dataTable = dtPersons;  - assigns the JSON data object to be displayed. 

oGridView.displayPage(); - starts the display.

The optional grid layout JSON object allows customization of the GridView colums:  

var Grid1_Layout = [{
    "DataField": "UserID",
    "HeaderText": "User ID",
    "Width": "100px",
    "HyperLinkField": showPopUp
},
{
    "DataField": "FirstName",
    "HeaderText": "First Name",
    "Width": "150px"
},
{
    "DataField": "LastName",
    "HeaderText": "Last Name",
    "Width": "150px"
},
{
    "DataField": "DateJoined",
    "HeaderText": "Date Joined",
    "Width": "150px"
}
]
  • "DataField": "UserID", - specifies the data field name of column 1, as it is in the data object dtPersons. The field name has to exist in the JSON data object.  
  • "HeaderText": "User ID", - appears in the Header of the first column
  • "Width": "100px", - column with, please note that it is text with px at the end and not a number. 
  • "HyperLinkField": showPopUp - optional field. if you wish to link a GridView column with a callback function, you can specify it here. GridView will add a link to this column, the click event of this link will be wired to the specified function (showPopUp) and the function will receive as parameter the whole JSON data record from the clicked row.  

In this example the function will display a modal pop up with the row data, passed to it: 

function showPopUp(dataRow) {
    var oPopUp = new popUp("Grid1_PopUp");
    oPopUp.jsonConfig = Grid1_Layout;
    oPopUp.jsonData = dataRow;
    oPopUp.Show();
}

It is important to notice the dataRow parameter that you have to specify in the external callback function. It will receive the row data from the JSON data object.  

The appearance of the GridView object can be customized entirely through CSS classes: 

.Grid1_Table {
  border: 1px solid black; border-spacing: 0px;
}

/* Header Properties */
.Grid1_HeaderRow {
  border: 1px solid black;
  font-weight: bold; font-size: 15px; color: #FFFFFF;
  height: 35px; background-color: #777777;
}

.Grid1_HeaderCell {
  border: 1px solid black; padding: 3px;
  text-overflow: ellipsis; overflow: hidden;
  white-space: nowrap; text-align: center;
}

/* Table Body Properties - Row and Cell elements*/
.Grid1_Row {
  height: 35px;
}

.Grid1_Row:nth-child(odd) {
  background-color: #DDDDDD;
}

.Grid1_Cell {
  border: 1px solid #777777; padding: 5px; text-align: center;
}

/* Footer Properties */
.Grid1_FooterRow {
  height: 40px;
}

/*  Navigation Properties */
.Grid1_NavigationLink {
  display: inline-block; text-decoration: none; text-align: center; width: 18px;
  padding: 5px; font-size: 16px; color: #444444;
}

.Grid1_NavigationLink:hover {
  background-color: #888888; color: #FFFFFF; border-radius: 4px;
}

.Grid1_NavigationCurrentPage {
  display: inline-block;
  width: 18px; padding: 5px;
  font-size: 16px; text-decoration: none; text-align: center;
  background-color: #444444; color: #FFFFFF; border-radius: 4px;
}

.Grid1_CellLink {
  color: black;
  padding: 5px;
}
        
.Grid1_CellLink:hover {
  background-color: #888888; color: #FFFFFF; border-radius: 4px;
}
        
#Grid1_Error {
  position: absolute; top: 10px; left: 50px; background-color: Red; padding: 3px; color: white; display: none;
}

As you can see, the convention is to take the ID of the root element and to add some additional text to it. If you pass to the GridView a root  element with the ID "AnotherRootElement_", the classes you specify have to look like this: .AnotherRootElement_HeaderRow or .AnotherRootElement_NavigationLink 

  • .Grid1_HeaderRow or rootElementIDHeaderRow is setting the properties of the table header row
  • .Grid1_HeaderCell - the properties of the header columns
  • .Grid1_Row and .Grid1_Row:nth-child(odd) - allows you to specify the properties of the grid rows
  • .Grid1_CellLink - specifies the properties of a link column if you specified one in the JSON  configuration object. 

 

Points of Interest  

The GridView - like object described here is only 300 lines of code, and that with generous formatting. It is quite lightweight and was tested with real data tables with the size of several thousand rows and about a hundred columns. It performed lightning fast during the tests. 

It was tested with the latest versions of IE, Chrome and FF. Not sure how oled browsers will handle it though. There will be another version with heavy usage of jQuery that will be made as plugin.

License

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

Share

About the Author

Bad Hombre
Software Developer (Senior) GL
Canada Canada
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.161128.1 | Last Updated 23 Dec 2013
Article Copyright 2013 by Bad Hombre
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid