Directive angular.datagrid

Directive is under development, version beta

Installation

With Bower:

bower install --save angular.datagrid

With npm:

npm install --save angular-rs-datagrid

Datagrid component that supports several types of value editing. It is possible to set up columns of type, checkbox, href, html content, combobox, chosen, multi-chosen, input fields with mask (string, number, money, br-phone, br-cpf, br- cnpj) and unmasked.

In this version this only implemented pagination in the backend.

This component works with two dependencies, angular-input-mask and angular-ui-select

How to use

include module into app

'angular.datagrid'

HTML template

<datagrid config="config"></datagrid>

property config in controller

$scope.config = {
  classTable: 'table table-bordered table-striped',     // optional, default: "table table-bordered table-striped"
  messageLoading: 'Loading...',                         // optional, default: "loading..."
  sort: true,                                           // optional, default: false
  defaultSort: 'id,asc',                                // optional, default is first "collumn.index", asc
  
  collumns: [{                                          // required
    title: 'ID',                                        // title of collumn                           
    index: 'id',                                        // Property that will print in the column
    class: 'text-center',                               // optional, class od <th> and <td>
    style: {                                            // optional
      width: '60px'                                     // It is possible to define some properties in html
    },
  }],
  data: function(){
    return [{
      id: 1,
      name: 'Lucas Rodrigues'
    }]
  }
};

How use search

Defines a property search in config

$scope.config = {
  ...
  search: {
    label: 'Search: ',         //optional 
  },
  ...
};

How override output collumn

Use the function render to override the output

$scope.config = {
  ...
  collumns: [{                          // required
    title: 'Render',                    // title of collumn                           
    index: 'name',                      // Property that will print in the column
    render: function(row){              // callback for override the output
      return row.id+' - '+row.name;
    },
  }]
  ...
};

How disable sort in collumn

Defines sort = false in collumn property

$scope.config = {
  ...
  collumns: [
  {
    title: 'No Sort',
    index: 'lastName',
    sort: false
  }]
  ...
};

How Stylize collumn

Defines class in collumn

$scope.config = {
  ...
  collumns: [
  {
    title: 'Class',
    index: 'city',
    class: 'text-center'
  }]
  ...
};

How render checkbox in collumn

Defines a property type = 'checkbox' in collumn.action.type

$scope.config = {
  ...
  collumns: [
  {
    title: '',                                      // title of collumn                           
    index: 'enable',                                // Property that will print in the column
    class: 'text-center',                           // optional, class od <th> and <td>
    sort: false,                                    // optional default: true
    action: {
      type: 'checkbox',                             //required
      checkInHeader: true,                          // Boolean, for render checkbox in header <th>
      onCheckHeader: function(checked) {            // callback when clicked in checkHeader
        console.log('checked: ' + checked);
      },
      onCheck: function(obj, checked) {             // callback when clicked in check row table
        console.log('checked: ' + checked + ', obj:' + obj.id);
      }
  }],
  ...
};

How render href in collumn

Defines a property type = 'href' in collumn.action.type

$scope.config = {
  ...
  collumns: [{
    title: "Href",
    index: 'github',
    render: function(obj) { // in action href, this property is required, callback(currentRow) override collumn[index], for label the href
      return 'open github';
    },
    action: {
      type: 'href',
      onClick: function(obj) {                        // callback(currentRow) when click in href
        window.open(row.github, '_blank');
      }
    }
 }],
 ...
};

How render input in collumn

Defines a property type = 'input' in collumn.action.type

$scope.config = {
  ...
  collumns: [{
    title: 'Input',
    index: 'nickName',
    action: {
      type: 'input',
      class: 'input-rs',                // optional 
      ng-style: {                       // optional
        width: '100px'
      },
      maxlength: 10,                    // optional
      trigger: 'blur',                  // required, default: 'blur', avaliables Triggers  'blur', 'change'
      isDisabled: function(obj) {       // callback
        if (obj.id === 1) {
          return true;
        } else {
          return false;
        }
      },
      onChange: function(row) {         // callback when exec trigger 
        console.log('Row actual: '+row);
      }
    }
  }],
 ...
};

How render input with mask 'Number' in collumn

Defines a property type = 'input' and mask in collumn.action

$scope.config = {
  ...
  collumns: [{
    title: 'Input',
    index: 'nickName',
    action: {
      type: 'input',
      trigger: 'blur',                  // required, default: 'blur', avaliables Triggers  'blur', 'change'
      mask: {                     
        use: 'number',                  // avaliables uses: 'number', 'money', 'br-phone','br-cep','br-cpf','br-cpfcnpj'
        decimalPlace: 2,                // number of decimals 
        maxlength: 11,
        negative: true                  // optional, default false
      },
      isDisabled: function(obj) {       // callback
        if (obj.id === 1) {
          return true;
        } else {
          return false;
        }
      },
      onChange: function(row) {         // callback when exec trigger 
        console.log('Row actual: '+row);
      }
    }
  }],
 ...
};

Mask Money

  ...
  mask: {
    use: 'money',    
    decimalPlace: 2,          // number of decimals 
    maxlength: 11
  },
  ...

Mask br-phone

  ...
  mask: {
    use: 'br-phone'
  },
  ...

Mask br-cep

  ...
  mask: {
    use: 'br-cep'
  },
  ...

Mask br-cpf

It has 2 parameters, row and isValid result validation

  ...
  mask: {
    use: 'br-cpf'
  },
  onChange: function(row, isValid) {      //callback 
    if(isValid){
      console.log('execute action here');
    }else{
      console.log('CPF inválido');
    }
  }
  ...

Mask br-cnpj

It has 2 parameters, row and isValid result validation

  ...
  mask: {
    use: 'br-cnpj'
  },
  onChange: function(row, isValid) {      //callback 
    if(isValid){
      console.log('execute action here');
    }else{
      console.log('CPF inválido');
    }
  }
  ...

Mask br-cpfcnpj

It has 2 parameters, row and isValid result validation

  ...
  mask: {
    use: 'br-cpfcnpj'
  },
  onChange: function(row, isValid) {      //callback 
    if(isValid){
      console.log('execute action here');
    }else{
      console.log('CPF inválido');
    }
  }
  ...

How render comboBox in collumn

Defines a property type = 'combo' and mask in collumn.action

$scope.config = {
  ...
  collumns: [{
    title: "Combo",
    index: 'status',
    action: {
      type: 'combo',
      class: '',                                     // optional
      ng-style: {                                    // optional
        width: '100px'
      },
      avaliablesChoises: ["ACTIVE","INACTIVE"], // required, Collection for populate combo, not use array of object for this use "chosen
      labelChoose: 'Select...',                      // optional, if defined, create a empty option
      isDisabled: function(obj) {                    // optional, callback for disable the combo
        if (obj.id === 1) {
          return true;
        } else {
          return false;
        }
      },
      onChange: function(obj) {
        console.log('execute action here');
      }
    }
  }],
 ...
};

How render chosen in collumn

Defines a property type = 'chosen' and mask in collumn.action

$scope.config = {
  ...
  collumns: [{
    title: 'Chosen',
    index: 'tag',
    action: {
      type: 'chosen',
      placeholder: 'Selecione um tag...',  
      class: '',                            // optional
      ng-style: {                           // optional
        width: '100px'
      },
      theme: 'select2',
      searchIn: ['id','nome'],              // property the object for search
      allowClear: false,                    // [x] button clear - default is false
      selectedRender: function(item){       // optional
        return item.nome;
      },
      itemRender: function(item){
        var ret =  '<small>';
        ret     += 'id:'+item.id+'<br/>';
        ret     += 'nome: '+item.nome+'<br/>';
        ret     += '</small>';
        return ret;                   // is possible return html content
      },
      isDisabled: function(obj){
        if (obj.id == 1){
          return true;
        }
        return false;
      },
      avaliablesChoises: [{
        id: 1,
        nome: 'tag 1'
      },{
        id: 2,
        nome: 'tag 2'
      }],
      onChange: function(obj, newValue) {
        console.log('execute action here: ' + newValue.id);
      }
   }],
  ...
};

How render multiChosen in collumn

Defines a property type = 'multiChosen' and mask in collumn.action

$scope.config = {
  ...
  collumns: [{
    title: 'Multi-Chosen',
    index: 'nome',
    action: {
      type: 'multiChosen',
      placeholder: 'Selecione um tag...',
      theme: 'select2',
      searchIn: ['id','nome'],
      selectedsRender: function(item){
        return item.nome;
      },
      itemRender: function(item){
        return item.nome;
      },
      onRemove : function(row, item, model){
        console.log(item);
      },
      isDisabled: function(obj){
        if (obj.id == 1){
          return true;
        }
        return false;
      },
      avaliablesChoises: [{
        id: 1,
        nome: 'tag 1'
      },{
        id: 2,
        nome: 'tag 2'
      },{
        id: 3,
        nome: 'tag 3'
      },{
        id: 4,
        nome: 'tag 4'
      },{
        id: 5,
        nome: 'tag 5'
      },{
        id: 6,
        nome: 'tag 6'
      }],
      onSelect: function(row, item, model) {
        console.log('execute action here: ' + item.id);
      }
  }],
  ...
};

How render buttons

The buttons are always rendered in the last column Defines a property buttons in config

$scope.config = {
  ...
  collumns: [{...}],
  buttons: [
    {
      text: 'Excluir',                              //optional 
      classButton: 'btn btn-xs btn-primary',        // class ex: <button class="btn btn-xs btn-primary"></button>
      onClick: function(obj) {                      // callback when clicked
        console.log('Execute action here obj clicked:' + obj.id);
      }
    },
    {
      tooltip: 'Tooltip',                           //optional 
      classIcon: 'glyphicon glyphicon-remove',      // class for icon in button
      classButton: 'btn btn-xs btn-danger',         // class ex: <button class="btn btn-xs btn-danger"></button>
      isVisible: function(obj) {                    // callback for handle when the button will be rendered according a expression boolean
        if (obj.id == 1) {                        
          return false;
        } else {
          return true;
        }
      },
    }
  ]
  ...
};

Render popover for Row

Defines a property popoverRow, trigger is hover in row

$scope.config = {
  ...
  popoverRow: {                                       // optional
    titleRender: function (row){                      // optional, callback(currentRow) for render title in popover
      return row.name+' '+row.lastName;
    },
    templateUrl: 'template-popover.html',             // required type: String "popover-template.html"
    ngModel: 'popover'                                // required type: String (that presents the model in popover template)
  },
  ...
};

template-popover.html

<div>
  <p>Nick Name: {{this.popover.nickName}}</p>
  <p>City: {{this.popover.city.name}}</p>
</div>

How use pagination in component

This version only implements pagination in backend Defines property pagination in config

$scope.config = {
  ...
  pagination: {                                       // optional
    labelSize: 'Registros por página: ',              // optional, default "Page size: ""
    defaultSize: 10,                                  // optional, default first item in avaliableSizes
    avaliableSizes: [10, 25, 50, 100, 500]            // optional, default [10,25,50,100]
  },
  ...
};

When using paging, you must implement a lazyData function within the configuration, this function is responsive to update or components automatically, page sorts and other

$scope.config = {
  ...
  lazyData: function(page, size, sort, search) {
    var params = {
      page: page,
      size: size,
      sort: sort,
      search: search
      };
      return $http({
        url: "http://localhost:8080/acoes",
        method: 'GET',
        params: params,
      }).then(function(result) {
        return result.data;
      });
  },
  ...
};

License

MIT