Docs
API
  • combo

    Combo column type

    Example

    
    columns: [{
    ...
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'Canada', 'England']
    ...
    

    align

    String

    Column header cell align.

    
    ...
    columns: [{
      type: 'image',
      title: 'Photo',
      index: 'src',
      width: 80,
      align: 'center'
    },{
    ...
    
    left

    cellAlign

    String

    Column cell align.

    
    ...
    columns: [{
      type: 'image',
      title: 'Photo',
      index: 'src',
      width: 80,
      cellAlign: 'center'
    },{
    ...
    
    left

    cellTip

    Mixed

    Column cell tooltip.

    
    ...
    columns: [{
      type: 'number',
      width: 75,  
      align: 'center',
      cellAlign: 'center',
      cellTip: '{title} sold {value}<br> items on {day}'
    },{
    ...
    
    
    ...
    columns: [{
      type: 'number',
      width: 75,  
      align: 'center',
      cellAlign: 'center',
      cellTip: function(o){
        if(!o.value){
          return false;
        }
        
        return o.value;
      }
    },{
    ...
    
    If cellTip is function that it should return cell tip text, if it returns false than tip will not be shown.
    false

    cls

    String

    Column css className.

    
    .photo img {
      width: 80px;
      margin-top: -5px;
      margin-left: -10px;
    }
    ...
    columns: [{
      type: 'image',
      title: 'Photo',
      index: 'src',
      width: 80,
      cls: 'photo'
    },{
    ...
    

    data

    Array

    It is used only for combo column.

    Combo values.

    
    {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: ['USA', 'Canada', 'England']
    }
    

    Example: Dynamic loading from server

    
    {
      index: 'country',
      title: 'Country',
      type: 'combo',
      data: {
        proxy: {
          url: 'countries.php',
          method: 'POST'
        }
      }
    }
    ...
    countries.php
    {"data": ["USA", "Canada", "England"]}
    

    Returned data from server must be valid JSON, in other case it will not be rendered

    Data - array of objects

    Local Data

    
    {
      index: 'country',
      title: 'Country',
      type: 'combo',
      displayKey: 'country',
      data: [
        {country: "USA", id: 1},
        {country: "Canada", id: 2},
        {country: "England", id: 3}
      ]
    }
    
    

    Server Data

    
    {
      index: 'country',
      title: 'Country',
      type: 'combo',
      displayKey: 'country',
      data: {
        proxy: {
          url: 'countries.php',
          method: 'POST'
        }
      }
    }
    ...
    countries.php
    {"data": [{"country": "USA", "id": 1},{"country": "Canada", id: 2},{"country": "England", id: 3}]}
    

    Returned data from server must be valid JSON, in other case it will not be rendered

    displayKey

    String

    It is used only for combo.
    The data value name to display in grid cell, filter field and combo list.

    
    columns: [{
    ...
    },{
      index: 'state',
      title: 'State',
      type: 'combo',
      width: 110,
      displayKey: 'text',
      valueKey: 'value',
      data: {
        proxy: {
          url: 'states.json'
        }
      }
    ...
    
    states.json
    {
      "data": [{
        "value": "",
        "text": ""
      },{
        "value": "AL",
        "text": "Alabama"
      },{
        "value": "AK",
        "text": "Alaska"
      },{
        "value": "AZ",
        "text": "Arizona"
    

    editable

    Boolean

    Enable column editing.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name',
      editable: true
    }
    
    False

    flex

    Number

    Auto-calc column width by fitting available width.

    If to set one column to 1 than column width will fit to available grid width.

    If to set one column to 1 and another to 2 than available width will be divided on 3.

    
    columns: [{
      index: 'company',
      title: 'Company'
    },{
      index: 'name',
      title: 'Name',
      sortable: true
    },{
      index: 'surname',
      title: 'Sur Name'
    },{
      index: 'age',
      title: 'Age',
      type: 'number',
      width: 50
    },{
      index: 'education',
      title: 'Education',
      flex: 1
    }]
    

    hidden

    Boolean

    Hide column on start.

    
    {
      index: 'married',
      resizable: true,
      type: 'checkbox',
      title: 'Married',
      width: 100,
      hidden: true
    }
    
    false

    index

    String|Number

    Data index.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name',
      editable: true
    }
    

    itemCheckBox

    Boolean

    Adds checkboxes for filter header combo list.

    
    },{
      index: 'country',
      title: 'Country',
      type: 'combo',
      width: 99,
      filter: {
        header: true
      },
      displayKey: 'text',
      valueKey: 'text',
      multiSelect: true,
      itemCheckBox: true,
      minListWidth: 120,
      data: {
        proxy: {
          url: '/json-data/theme/countries.json'
        }
      }
    },{
    
    true

    lockable

    Boolean

    Enable/disable column locking.

    
    locked: false,
    
    true

    locked

    Boolean

    Locking column.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name',
      locked: true
    }
    
    False

    maxWidth

    Number

    The maximum width of column.

    
    maxWidth: 150,
    

    menu

    Boolean

    Enables column menu.

    
    menu: true,
    
    false

    minListWidth

    Number

    The minimum width of list for combo column.
    When column is not wide but values in list are long than for better look
    it is possible to set minListWidth

    
    minListWidth: 150,
    

    minWidth

    Number

    The minimum width of column.

    
    minWidth: 80,
    

    multiSelect

    Boolean

    Enables multiSelect for header filter combo.

    
    },{
      index: 'country',
      title: 'Country',
      type: 'combo',
      width: 99,
      filter: {
        header: true
      },
      displayKey: 'text',
      valueKey: 'text',
      multiSelect: true,
      itemCheckBox: true,
      minListWidth: 120,
      data: {
        proxy: {
          url: '/json-data/theme/countries.json'
        }
      }
    },{
    

    render

    Function

    Column render function.

    Before grid cell will be updated with it's value, function render runs if it exist. Function render is mainly used for some not standard styling or formatting of cell value..

    
    render: function(o){
      if(o.value < 0){
        o.style = {
          color: '#E46B67'
        };
      }
      else{
        o.style = {
          color: '#65AE6E'
        };
      }
    
      o.value = o.value + '%';
    
      return o;
    }
    

    resizable

    Boolean

    Enable resizing of column.

    
    resizable: true,
    
    False

    rightLocked

    Boolean

    Locking column to right side.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name',
      rightLocked: true
    }
    
    False

    sortable

    Boolean

    Enable column sorting.

    
    sortable: true,
    
    False

    title

    String

    Column title.

    
    {
      type: 'string',
      width: 65,
      title: 'Name',
      index: 'name'
    }
    
    ''

    type

    String

    Column type.

    
    {
      index: 'married',
      title: 'Married',
      type: 'checkbox'
    }
    

    valueKey

    String

    It is used only for combo.
    The data value name by which to filter and get/edit data.

    
    columns: [{
    ...
    },{
      index: 'state',
      title: 'State',
      type: 'combo',
      width: 110,
      displayKey: 'text',
      valueKey: 'value',
      data: {
        proxy: {
          url: 'states.json'
        }
      }
    ...
    
    states.json
    {
      "data": [{
        "value": "",
        "text": ""
      },{
        "value": "AL",
        "text": "Alabama"
      },{
        "value": "AK",
        "text": "Alaska"
      },{
        "value": "AZ",
        "text": "Arizona"
      ...
    

    width

    Number

    column width.

    
    {
      type: 'action',
      width: 65,
      items: [{
        text: 'Delete',
        cls: 'action-column-remove',
        action: 'remove'
      }]
    }