tc-grid

A declarative grid for AngularJS
Homepage:
2 people use it
Submitted by: 293613?v=3 mbreedlove

tc-grid

A declarative grid for AngularJS

Demo

Installation

Usage

Basic Usage

Paging and Sorting

API

grid options

  • tc-grid
  • tc-data
  • tc-options
  • tc-grid-class
  • tc-grid-filter

row options

  • tc-row-click
  • tc-row-class

column options

  • row
  • tc-column
  • tc-name
  • tc-field
  • tc-col-class
  • tc-ignore-click
  • tc-visible

Grid Options

tc-grid

Initialize the grid html <tc-grid></tc-grid>

tc-data

Set the grid's data source html <tc-grid tc-data="dataSource"></tc-grid>

tc-options

Set the grid's options object html <tc-grid tc-options="gridOptions"></tc-grid>

tc-grid-class

Set a custom class for the grid html <tc-grid tc-grid-class="gridClass"></tc-grid>

tc-grid-filter

Set a filter function for the grid html <input type="text" ng-model="filterString"/> <tc-grid tc-grid-filter="myFilter"></tc-grid> javascript function myFilter(item) { if(item.Name.indexOf($scope.filterString)) return true; return false; }

Row Options

tc-row-click

function called when a row is clicked html <tc-grid tc-row-click="performAction"></tc-grid> javascript function performAction(row) { //do something... }

tc-row-class

class to apply to each row html <tc-grid tc-row-class"myClass"></tc-grid>

Column Options

row

object available inside tc-column tags giving access to the individual element

tc-column

individual column element in the grid supports html markup between the tags html <tc-grid> <tc-column>{{row.date | date: 'MM/dd/yyyy'}}</tc-column> </tc-grid>

tc-name

header name for the column, supports html markup html <tc-grid> <tc-column tc-name="MyColumn"></tc-column> </tc-grid>

tc-field

field to sort on for an individual column html <tc-grid> <tc-column tc-field="myColumn"></tc-column> </tc-grid>

tc-col-class

class to apply to indiviudal columns html <tc-grid> <tc-column tc-col-class="myClass"></tc-column> </tc-grid>

tc-ignore-click

Ignore the row click for the individual column html <tc-grid tc-row-click="performAction"> <!-- calls performAction --> <tc-column><input type="checkbox"/></tc-column> <!-- doesn't call performAction --> <tc-column tc-ignore-click><input type="checkbox"/></tc-column> </tc-grid>

tc-visible

Toggle column visibility html <input type="checkbox" ng-model="showCol"/> <tc-grid tc-row-click="performAction"> <tc-column tc-visible="showCol">{{row.name}}</tc-column> </tc-grid>

tc-options

paging
  • page
    • page to start gird on
  • pageSize
    • items per page
  • totalItemCount
    • total items
  • onPageChange
    • called when the page number changes, used to update grid data
sorting
  • sort
    • initial sort to start grid on ['field dir']
  • onSortChange
    • Called when grid is sorted
column display
  • columnDisplay
    • array of column indexes, names, and/or fields to determine column visibility and order
functions
  • reset
    • sets paging and sorting to page 1 and no sort

Build

navigate to directory

comments powered by Disqus
This page was last updated almost 2 years ago.