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)

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)

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:

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) {...}

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:

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) {...}

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:

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) {...}

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:

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) {...}

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:

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) {...}

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: