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 likelove JavaScript here!
This strong passion for JavaScript is why we offer both solutions to our users. Let's go over some of the
basics.
On This Page
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.
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.
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!
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.
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.
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!
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)
});