RealGrid2 Guide
Cell components
cell button

cell button

Cell buttons can be used by specifying column.button = action.

   var columns = [
     {
       name: "KorName",
       fieldName: "KorName",
       width: "100",
       header: {
         text: "Name",
         styleName: "orange-column",
       },
       button:"action",
       buttonVisibility: "always"
     },
     ...
   ];
 
   gridView.setColumns(columns);

Button click event

Cell button click event

gridView.onCellButtonClicked = function(grid, index, column) {
     alert(
         "CellButton Clicked: itemIndex=" +
         index.itemIndex +
         ", fieldName=" +
         column.fieldName
     );
};

Other ways to deal with cell buttons

  • always: always displayed
  • default: Displayed in hovering, focused state
  • visible: Displays only the focused state
  • hidden: do not display
gridView.columnByName("KorName").buttonVisibility = "always";
gridView.columnByName("KorName").buttonVisibility = "default";
gridView.columnByName("KorName").buttonVisibility = "visible";
gridView.columnByName("KorName").buttonVisibility = "hidden";

Button Renderer

The button renderer can be used by specifying renderer.type = "button".

The value of the current cell is displayed in the button.

{
   name: "KorCountry",
   fieldName: "KorCountry",
   width: "100",
   header: {
     text: "Investment country",
     styleName: "orange-column"
   },
   editable:false,
   renderer:{
       type:"button"
   }
}

Button Renderer Click Event

gridView.onCellItemClicked = function (grid, index, clickData) {
   alert(clickData.value + "Button was clicked.")
   return true;
}

Dynamically using button renderer

This is an example where a button is displayed when the investment country value is ‘Canada’.

var columns = [
...
   {
     name: "KorCountry",
     fieldName: "KorCountry",
     width: "100",
     header: {
       text: "Investment country"
     },
   },
   {
     name: "Gender",
     fieldName: "Gender",
     width: "70",
     header: {
       text: "Button",
       styleName: "orange-column"
     },
     editable:false,
     styleCallback: function(grid, dataCell){
       var ret = {}
       var korCountry = grid.getValue(dataCell.index.itemIndex, "korCountry");
 
       ret.renderer = korCountry == 'Canada' ? {type:"button"} : {};
      
       return ret;
     },
     displayCallback: function(grid, index, value) {
       var korCountry = grid.getValue(index.itemIndex, "korCountry");
 
       return korCountry == 'Canada' ? value: '';
     }
   },
...
];
 
gridView.setColumns(columns);
 
gridView.onCellItemClicked = function (grid, index, clickData) {
   alert(clickData.value + "Button was clicked.")
   return true;
}
blankCellpopup menu