Docs

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

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

Example

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

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

Example

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></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';
}

Example

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

Example

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></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';
}

Example

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></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';
}

Example

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></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';
}

Example

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