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></zg-card> tag, this is a lifecycle hook used when creating cells in card mode.

Function Definition

CloseCopy Copied
function cardRendererFunction(record, cellDOMRef, rowRef)
Arguments
NameTypeOptionalDescription
recordObjecttrue The direct record info associated with that row.
cellDOMRefDOM Nodetrue A direct reference to the DOM node for this cell.
rowRefObjecttrue An object containing various row, cell, and ZingGrid information.

HTML

CloseCopy Copied
<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

CloseCopy Copied
// 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}`);
  });
}

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Cell Class

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

Function Definition

CloseCopy Copied
function cellClassFunction(...indexValues, cellDOMRef, cellRef)
Arguments
NameTypeOptionalDescription
indexValues*true The 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 Nodetrue A direct reference to the DOM node for this cell.
cellRefObjecttrue An object containing various row, cell, and ZingGrid information.

HTML

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

Javascript

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Column Class

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

Function Definition

CloseCopy Copied
function colClassFunction(columnIndex, cellDOMRef, columnRef)
Arguments
NameTypeOptionalDescription
columnIndexStringtrue The index value of the column.
cellDOMRefDOM Nodetrue A direct reference to the DOM node for this cell.
columnRefObjecttrue An object containing various row, cell, and ZingGrid information.

HTML

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

Javascript

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Column Renderer

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

Function Definition

CloseCopy Copied
function columnRendererFunction(...indices, cellDOMRef, cellRef)
Arguments
NameTypeOptionalDescription
...indices*true The amount of indices defined on the zg-column. If you define two indices then you must define two arguments before cellDOMRef.
cellDOMRefDOM Nodetrue A direct reference to the DOM node for this cell.
cellRefObjecttrue An object containing various row, cell, and ZingGrid information.

HTML

CloseCopy Copied
<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

CloseCopy Copied
// 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}`);
  });
}

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Foot Class

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

Function Definition

CloseCopy Copied
function footClassFunction(columnIndex, cellDOMRef, columnRef)
Arguments
NameTypeOptionalDescription
columnIndexStringtrue The index value of the column.
cellDOMRefDOM Nodetrue A direct reference to the DOM node for this column.
columnRefObjecttrue An object containing various footer column information.

HTML

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

Javascript

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Head Class

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

Function Definition

CloseCopy Copied
function headClassFunction(columnIndex, cellDOMRef, columnRef)
Arguments
NameTypeOptionalDescription
columnIndexStringtrue The index value of the column.
cellDOMRefDOM Nodetrue A direct reference to the DOM node for this column.
columnRefObjecttrue An object containing various footer column information.

HTML

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

Javascript

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Row Class

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

Function Definition

CloseCopy Copied
function rowClassFunction(record, rowIndex, rowDOMRef, rowRef)
Arguments
NameTypeOptionalDescription
recordObjecttrue An object containing all the values in this row.
rowIndexNumbertrue The index value of the row.
rowDOMRefDOM Nodetrue A direct reference to the DOM node for this row.
rowRefObjecttrue An object containing various row, cell, and ZingGrid information.

HTML

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

Javascript

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading