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'
          }]
        });
      }
    },