Object Instantiation

There is the component instantiation in markup and the object 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.

Constructor Arguments

These are the arguments for ZingGrid's object constructor:

Reflected Attribtes

This 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. The full list of reflected attributes can be found in Components.

Copy Copied

let gridConfig = {
  caption: 'Hello World',
  columns: [],
  columnResizer: false,
  columnMover: true,
  data: [],
  editor,
  filter: true,
  height: '90%',
  infinite: false,
  infiniteSize: 50,
  layout: "row",
  pager: 'top',
  pageSize: 5,
  search: true,
  selector: false,
  serverOrder: '', // firebase specific
  sorter: true,
  src: '/path/to/your.json',
  state: false,
  staticmenu: true,
  theme: 'android'
};

Sample HTML

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.

Copy Copied

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, therefore there is no need memorize the order. So you can focus on where to place the grid and what you want in it!

Copy Copied

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.

Copy Copied

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 methods. ZingGrid provides many methods to turn on features and control grid interactions. A full list of ZingGrid's methods can be found here.

Copy Copied

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. Try out the following code and see for yourself!

Copy Copied

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)
});