Docs
API
  • expander

    Object

    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