Object Instantiation

ZingGrid supports component based data instantiation (in HTML) and object based data instantiation (in JavaScript). This exists mostly for convenience for JavaScript developers. We all like love JavaScript here! This strong passion for JavaScript is why we offer both solutions to our users. Let's go over some of the basics.

Object Constructor

The object constructor for ZingGrid is new ZingGrid(...). There are three official parameters for the object constructor. Their order does not matter, so you can use the ES6 spread operator new ZingGrid(...params) to create the parameters. The order mainly doesn't matter because each argument is a different type, so there can only be one of each type in the constructor at any given time.

Here is an example of what the constructor code would look like:

let zgRef = new ZingGrid('gridQuerySelector', {});

Constructor Arguments

These are the arguments for ZingGrid's object constructor:

Constructor Argument config

Here is an example of what to pass for the constructor argument config. The config is an object containing reflected attributes to add features to the grid.

let gridConfig = {
  caption: 'Hello World',
  columns: [],
  data: [],
  editor: true,
  filter: true,
  height: '90%',
  infinite: false,
  infiniteSize: 50,
  layout: 'row',
  layoutControls: true,
  pager: 'top',
  pageSize: 5,
  search: true,
  selector: false,
  sort: true,
  src: '/path/to/your.json',
  theme: 'android'
};

Full Object Constructor Example

Here is a full example of how to use the object constructor. First, we define a variable containing the config for ZingGrid. In this example, the first argument is container, where you want to insert ZingGrid. Then we pass the variable containing the config as the second argument.

let gridConfig = {
  caption: 'Hello World',
  editor: true,
  pager: true,
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(document.querySelector('#yourFirstGrid'), gridConfig);

Alternative Constructors

The following constructors all produce the same functionality as the above sample block. As mentioned earlier, order does not matter. ZingGrid is smart enough to figure out what each argument is (see below); therefore, there is no need memorize the order. So, you can focus on where to place the grid and what you want in it!

let gridConfig = {...};

// let grid = new ZingGrid(document.querySelector('#yourFirstGrid'), gridConfig);

// alternative constructors
let grid = new ZingGrid(gridConfig, 'yourFirstGrid');

let grid = new ZingGrid(true, gridConfig, 'yourFirstGrid');

Constructor Reference

The last caveat of the constructor is that omitting string and DOM Node references will cause the constructor to return a reference to the <zing-grid> object created. You can then manipulate this object's attributes, like the config above, and insert the element into the DOM, like so:

let gridConfig = {
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(gridConfig);

console.log(`--- Your Grid Reference ${grid} ----`);

grid.element.caption = 'Hello World';
grid.element.editor = true;
grid.element.pager = true;

document.querySelector('#yourFirstGrid').appendChild(grid.element);

Manipulating with API Methods

With the object's reference saved, another way to manipulate ZingGrid is through the library's API methods (see below). ZingGrid provides many methods to turn on features and control grid interactions. A full list of ZingGrid's methods can be found here.

let gridConfig = {
  data: [
    {
      "name": "Philip",
      "number": 123
    },
    {
      "name": "David",
      "number": 456
    },
    {
      "name": "Felicity",
      "number": 789
    }
  ]
};
let grid = new ZingGrid(gridConfig);

console.log(`--- Your Grid Reference ${grid} ----`);

grid.setCaption = 'Hello World';
grid.setEditor = true;
grid.setPager = true;

document.querySelector('#yourFirstGrid').appendChild(grid.element);

Loop Use Case

To display multiple grids, create ZingGrids with a for-loop. First, create a config containing the data and features you want for the grids. Then, place the object constructor in a for-loop to create multiple grids (see below). Try out the following code and see for yourself!

const GridConfig = (data) => {
  return {
    editor: true,
    pager: true,
    pageSize:3,
    data
  }
}

let dbDocument = [
  {
    data: [
      [
        "Philip",
        123
      ],
      [
        "David",
        456
      ],
      [
        "Felicity",
        789
      ]
    ]
  },
  {
    data: [
      {
        "name": "Philip",
        "number": 123
      },
      {
        "name": "David",
        "number": 456
      },
      {
        "name": "Felicity",
        "number": 789
      }
    ]
  },
  {
    data: {
      "entry1": {
        "name": "Philip",
        "number": 123
      },
      "entry2": {
        "name": "David",
        "number": 456
      },
      "entry3": {
        "name": "Felicity",
        "number": 789
      }
    }
  },
  {
    data: [
      {
        "name": "Philip",
        "number": 123,
        "colors": {
          "primary": "red",
          "secondary": "chartreuse"
        }
      },
      {
        "name": "David",
        "number": 456,
        "colors": {
          "primary": "black",
          "secondary": "yellow"
        }
      },
      {
        "name": "Felicity",
        "number": 789,
        "colors": {
          "primary": "blue",
          "secondary": "orange"
        }
      }
    ]
  }
];

// loop through database object
dbDocument.forEach((curVal) => {
  let gridConfig = GridConfig(curVal.data);
  let gridRef = new ZingGrid(gridConfig);
  document.querySelector('#yourFirstGrid').appendChild(gridRef.element)
});

Multiple Grids Example