Docs
API
  • bbar

    Array

    There are 4 bars in FancyGrid.
    They are: tbar, subTBar, bbar, buttons.
    Syntax is almost the same for all bars.
    The main purpose of buttons is alternative for bbar.
    When paging is enabled, bbar is busy.
    subTBar is used as extra bar for grid's top when
    tbar is not enough.

    Example

    
    bbar: [{
      type: 'button',
      text: 'Text 1',
      handler: function(){
        
      }
    },{
      type: 'button',
      text: 'Text 2',
      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.

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

    disabled

    Boolean

    Disabling item.

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

    cls

    String

    Item css className.

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

    enableToggle

    Boolean

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

    
    bbar: [{
      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({
      ...
      bbar: [{
        text: 'Button1',
        handler: 'button1Click'
      },{
        text: 'Button2',
        handler: 'button2Click'
      }],
      button1Click: function(){
        console.log('button1Click');
      },
      button2Click: function(){
        console.log('button2Click');
      },
    

    hidden

    Boolean

    If set to true than field is hidden.

    
    bbar: [{
      type: 'number',
      id: 'employee',
      hidden: true,
      value: 1
    },{
    ...
    }]
    

    pressed

    Boolean

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

    
    bbar: [{
      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.

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

    Methods

    disable

    ()

    Disable item.

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

    enable

    ()

    Enable item.

    
    grid.bbar[0].enable();
    

    hide

    ()

    Hide field.

    
    bbar: [{
      type: 'string',
      value: 'DB_TABLE'
    ...
    
    
    grid.bbar[0].hide();
    

    setPressed

    (pressed: Boolean)

    Toggle pressed state.

    Values: add.

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

    show

    ()

    Show field if it was hidden.

    
    bbar: [{
      type: 'string',
      value: 'DB_TABLE',
      hidden: true
    ...
    
    
    grid.bbar[0].show();
    

    toggle

    ()

    Toggle pressed state. It is used only for button type.

    Values: add.

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

    Default

    
    undefined