Docs
API
  • tbar

    There are 3 bars in FancyGrid.
    They are: tbar, bbar, buttons.
    Syntax is the same for all bars.
    The main purpose of buttons is alternative for bbar.
    When paging is enabled, bbar is busy.

    Example

    
    tbar: [{
      type: 'button',
      text: 'Add',
      handler: function(){
        
      }
    },{
      type: 'button',
      text: 'Delete',
      handler: function(){
        
      }
    }],
    

    Example: separator

    To set separator between items use shortcut |

    
    bbar: [{
      text: 'Text 1'
    },'|',{
      type: 'button'
    }],
    

    Example: side

    If to set 'side' element than all elements after it will be floated to right side.

    
    bbar: ['side', {
      text: 'Clear'
    },'|',{
      type: 'Submit'
    }],
    

    Params

    action

    string

    predefined handler on item click.

    Values: add, remove.

    
    {
      text: 'Add',
      action: 'add'
    }
    

    cls

    String

    Item css className.

    
    {
      text: 'Add',
      type: 'button',
      cls: 'my-button'
    }
    

    disabled

    Boolean

    Disabling item.

    
    {
      text: 'Delete',
      type: 'button',
      disabled: true
    }
    

    enableToggle

    Boolean

    True to enable pressed/not pressed toggling.
    If a toggleGroup is specified, this option will be set to true.

    
    tbar: [{
      text: 'Cell',
      enableToggle: true,
      handler: function(b){
        b.toggle();
      }
    },{
      text: 'Row',
      enableToggle: true,
      pressed: true,
      handler: function(b){
        b.toggle();
      }
    ...
    
    false

    handler

    Mixed

    item handler on item click

    
    {
      type: 'button',
      text: 'Add',
      handler: function(){}
    }
    
    
    new FancyGrid({
      ...
      tbar: [{
        text: 'Button1',
        handler: 'button1Click'
      },{
        text: 'Button2',
        handler: 'button2Click'
      }],
      button1Click: function(){
        console.log('button1Click');
      },
      button2Click: function(){
        console.log('button2Click');
      },
    

    pressed

    Boolean

    True to start pressed (only if enableToggle = true).

    
    tbar: [{
      text: 'Cell',
      enableToggle: true,
      handler: function(b){
        b.toggle();
      }
    },{
      text: 'Row',
      enableToggle: true,
      pressed: true,
      handler: function(b){
        b.toggle();
      }
    ...
    
    false

    style

    Object

    item style on case needed change default style.

    
    {
      type: 'button',
      text: 'Add',
      style: {
        'float': 'left',
        'margin-left': '5px',
        'margin-right': '0px',
        'margin-top': '3px'
      },
      handler: function(){}
    }
    

    text

    String

    item text

    
    {
      type: 'button',
      text: 'Add',
      handler: function(){}
    }
    

    tip

    String

    Text of tooltip for element.

    
    {
      type: 'button',
      tip: 'Some info',
      text: 'Add',
      handler: function(){}
    }
    
    
    {
      type: 'number',
      tip: '{value}'
    }
    

    toggleGroup

    String

    The group toggle button is a member of (only 1 per group can be pressed).
    If a toggleGroup is specified, enableToggle configuration will automatically be set to true.

    
    {
      type: 'button',
      text: 'Add',
      handler: function(){}
    }
    

    type

    String

    item type

    Possible values: button, combo, number, segbutton, string, text, search.

    
    {
      type: 'button',
      text: 'Add',
      handler: function(){}
    }
    
    button

    Methods

    disable

    ()

    Disable item.

    
    tbar: [{
      text: 'Disable',
      handler: function(b) {
        b.disable();
      }
    ...
    
    
    grid.tbar[0].disable();
    

    enable

    ()

    Enable item.

    
    grid.tbar[0].enable();
    

    setPressed

    (pressed: Boolean)

    Toggle pressed state.

    
    tbar: [{
      text: 'Row',
      toggleGroup: 'sel',
      handler: function(b) {
        b.setPressed(true);    
      }
    ...
    
    
    grid.tbar[0].setPressed(false);
    

    toggle

    Toggle pressed state.

    
    tbar: [{
      text: 'Cell',
      enableToggle: true,
      handler: function(b){
        b.toggle();
        grid.setTrackOver('cell', b.pressed);
      }
    ...
    
    
    grid.tbar[0].toggle();