ZingGrid Functions

Below we show you how to define attributes that can be assigned functions on ZingGrid.

Card Renderer

Defined by the renderer attribute on the <zg-card> tag, this is a lifecycle hook used when creating cells in card mode.

Function Definition

function cardRendererFunction(record, cellDOMRef, rowRef)
Arguments
NameTypeOptionalDescription
recordObjecttrueThe direct record info associated with that row
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
rowRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zg-card renderer="cardRenderer">
  <div>
    <h2>[[record.breed]]</h2>
    <span>Name: [[record.name]]</span>
    <hr>
    <select>
      <option value="" disabled selected>Please Choose One</option>
    </select>
  </div>
</zg-card>

JavaScript

// define custom card renderer and assign content 
// and event listeners inside function
function cardRenderer(record, cellDOMRef, cellRef) {
  const dogBreeds = [
    'Cane Corso',
    'Pug',
    'Corgi',
    'Pomeranian',
    'Great Dane',
    'Frenchie',
  ];
  
  // get reference to select dropdown
  const selectDropdown = cellDOMRef.querySelector('select');
  
  // sort breeds and populate select dropdown
  dogBreeds.sort().forEach(breed => {
    const breedOption = document.createElement('option');
    breedOption.textContent = breed;
    breedOption.value = breed;
    selectDropdown.appendChild(breedOption);
  });
  
  // add events in renderer as well
  selectDropdown.addEventListener('change', (e) => {
    const newType = e.target.value;
    alert(`Select dropdown changed to: ${newType}`);
  });
}

Card Renderer Function Grid

Here is a complete grid that runs a card renderer function:

Cell Class

Defined by the cell-class attribute on the <zg-column> tag, this is a way to dynamically render a CSS class to cells.

Function Definition

function cellClassFunction(...indexValues, cellDOMRef,cellRef)
Arguments
NameTypeOptionalDescription
indexValues*trueThe index value defined on <zg-column> index="1,2,n" where the amount of arguments is dependent on the amount of index values defined. If you defined two index values, the initial two function arguments are reserved for these indices. The last two arguments are for cellDomRef and cellRef.
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
cellRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zg-column index="breed" cell-class="singleIndex"></zg-column>

JavaScript

function singleIndex(breed, cellDOMRef, cellRef) {
  return `breed ${breed.replace(/\s+/g, '-').toLowerCase()}`;
}

Cell Class Function Grid

Here is a complete grid that runs a cell class function to style cells in the grid:

https://app.zingsoft.com/demos/embed/9X5S9CJ1
https://app.zingsoft.com/demos/embed/9X5S9CJ1

Column Class

Defined by the col-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for a whole column.

Function Definition

function colClassFunction(columnIndex, cellDOMRef, columnRef) {...}
Arguments
NameTypeOptionalDescription
columnIndexStringtrueThe index value of the column
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
columnRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zing-grid col-class="singleColumnClass"></zing-grid>

JavaScript

function singleColumnClass(index, cellDOMRef, cellRef) {
  console.log(arguments)
  if (index === 'name') return 'yellow';
  return 'red';
}

Column Class Function Grid

Here is a complete grid that runs a column class function to style columns in the grid:

https://app.zingsoft.com/demos/embed/7XA783Q9
https://app.zingsoft.com/demos/embed/7XA783Q9

Column Renderer

Defined by the renderer attribute on the <zg-column> tag, this is a lifecycle hook used when creating columns in row mode.

Function Definition

function columnRendererFunction(...indices, cellDOMRef, cellRef) {...}
Arguments
NameTypeOptionalDescription
...indices*trueThe amount of indices defined on <zg-column>. If you define two indices, then you must define two arguments before cellDOMRef.
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
cellRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zg-colgroup>
  <zg-column index="custom" renderer="noIndexCellRenderer">
    <h3>[[record.name]]</h3>
    <select>
      <option value="" disabled selected>Please Choose One</option>
    </select>
  </zg-column>
</zg-colgroup>

JavaScript

// define custom cell renderer and assign content
// and event listeners inside function
function noIndexCellRenderer(stubArgument, cellDOMRef, cellRef) {
  const dogBreeds = [
    'Cane Corso',
    'Pug',
    'Corgi',
    'Pomeranian',
    'Great Dane',
    'Frenchie',
  ];

  // get reference to select dropdown
  const selectDropdown = cellDOMRef.querySelector('select');

  // sort breeds and populate select dropdown
  dogBreeds.sort().forEach(breed => {
    const breedOption = document.createElement('option');
    breedOption.textContent = breed;
    breedOption.value = breed;
    selectDropdown.appendChild(breedOption);
  });

  // add events in renderer as well
  selectDropdown.addEventListener('change', (e) => {
    const newType = e.target.value;
    alert(`You changed the type to: ${newType}`);
  });
}

Column Renderer Function Grid

Here is a complete grid that runs a column renderer function to create custom columns:

https://app.zingsoft.com/demos/embed/J4UP7B3Q
https://app.zingsoft.com/demos/embed/J4UP7B3Q

Foot Class

Defined by the foot-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for your footer columns.

Function Definition

function footClassFunction(columnIndex, cellDOMRef, columnRef) {...}
Arguments
NameTypeOptionalDescription
columnIndexStringtrueThe index value of the column
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
cellRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zing-grid foot-class="highlightFootCells"></zing-grid>

JavaScript

function highlightFootCells(columnIndex, cellDOMRef, columnRef) {
  if (columnIndex === 'points') return 'yellow';
}

Foot Class Function Grid

Here is a complete grid that calls a foot class function to highlight the grid's foot cells:

https://app.zingsoft.com/demos/embed/4RSYZH9X
https://app.zingsoft.com/demos/embed/4RSYZH9X

Head Class

Defined by the head-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for your column headers.

Function Definition

function headClassFunction(columnIndex, cellDOMRef, columnRef) {...}
Arguments
NameTypeOptionalDescription
columnIndexStringtrueThe index value of the column
cellDOMRefDOM NodetrueA direct reference to the DOM node for this cell
columnRefObjecttrueAn object containing various footer column information

HTML

<zing-grid head-class="highlightHeadCells"></zing-grid>

JavaScript

function highlightHeadCells(columnIndex, cellDOMRef, columnRef) {
  if (columnIndex === 'points') return 'yellow';
}

Head Class Function Grid

Here is a complete grid that calls a function to highlight the grid's head cells:

https://app.zingsoft.com/demos/embed/3X5995IT
https://app.zingsoft.com/demos/embed/3X5995IT

Row Class

Defined by the row-class attribute on the <zing-grid> tag, this is a way to define a dynamic class for a whole row.

Function Definition

function rowClassFunction(record, rowIndex, rowDOMRef, rowRef) {...}
Arguments
NameTypeOptionalDescription
recordObjecttrueAn object containing all the values in this row
rowIndexNumbertrueThe index value of the row
rowDOMRefDOM NodetrueA direct reference to the DOM node for this row
rowRefObjecttrueAn object containing various row, cell, and ZingGrid information

HTML

<zing-grid row-class="rowClass"></zing-grid>

JavaScript

function rowClass(record, index, cellDOMRef, cellRef) {
  if (index % 2) return 'yellow';
  return 'red';
}

Row Class Function Grid

Here is a complete grid that calls a row class function to style the grid's rows:

https://app.zingsoft.com/demos/embed/C5565A4K
https://app.zingsoft.com/demos/embed/C5565A4K