expander

Expander of rows.

Mainly used for view extra information about row item.

Example: Basic

expander: {
  tpl: [
    '<div style="float: left;">',
      '<img src="{image}" class="image-staff">',
    '</div>',
    '<div style="float: left;">',
      '<p>{name} {surname}</p>',
      '<p><b>Salary:</b> {salary}</p>',
      '<p><b>Phone:</b> {phone}</p>',
    '</div>'
  ].join(""),
  dataFn: function(grid, data){
    data.salary = '$' + (data.hour * 170 * 12).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
     
    return data;
  }
},

Example: Render Sub Grid

expander: {
  render: function(renderTo, data, columnsWidth){
    new FancyGrid({
      renderTo: renderTo,
      width: columnsWidth - 20,
      height: 'fit',
      minHeight: 100,
      trackOver: true,
      selModel: 'rows',
      theme: 'gray',
      cellHeight: 92,
      data: data.sold,
      emptyText: 'Nothing to display',
      defaults: {
        type: 'string'
      },
      columns: [{
        index: 'image',
        width: 180,
        type: 'image',
        cls: 'image-car',
        title: '',
        locked: true
      },{
        index: 'name',
        width: 140,
        title: 'Name'
      },{
        index: 'price',
        width: 79,
        type: 'currency',
        title: 'price',
      },{
        title: 'Color',
        index: 'color',
        width: 70,
        type: 'color',
        cls: 'color-column'
      }]
    });
  }
},

Example: Render Sub Form

//If FancyGrid was included as not full build(fancy.min.js) than it is recommended to load module form.
Fancy.loadModule('form');
...
 expander: {
	render: function(renderTo, data, columnsWidth){
	  new FancyForm({
	    title: 'User Info',
	    renderTo: renderTo,
		width: 330,
		height: 350,
		theme: 'gray',
        items: [{
		  name: 'id',
		  type: 'hidden',
		  value: data.id
		},{
		  name: 'name',
		  label: 'Name',
		  value: data.name
		},{
		  name: 'surname',
		  label: 'Sur Name',
		  value: data.surname
		},{
		  label: 'Position',
		  name: 'position',
		  value: data.position
		},{
		  label: 'Phone',
		  name: 'phone',
		  value: data.phone
		},{
		  type: 'number',
		  name: 'hour',
		  label: 'Hour rate',
		  value: data.hour,
		  spin: true
		},{
		  type: 'date',
		  name: 'birthday',
		  label: 'Birthday',
		  value: data.birthday,
		  format: {
			read: 'Y.m.d',
			write: 'Y.m.d',
			edit: 'Y.m.d'
		  }
		}],
		buttons: ['side', {
		  text: 'Save',
		  handler: function(){
		    var grid = FancyGrid.get('container'),
			  values = this.get();
			
			grid.setById(values.id, values);
			grid.update();
		  }
		}]
	  });
	}
  },

Default

false