I have a case where i need to have multiple buttons in a grid cell. When I click on the button, I need the button to fire. I also need normal events (like hover events) to work for the button even when it is inside the grid. I believe the issue right now is that a painted image of the button is available in the grid until I click; then the editor adds the actual component to the screen. Is there a way to force the component to be on the screen all the time? Or do you have a different suggestion of how to accomplish this? 

1 answer

Staff August 30, 2015

The current grid implementation doesn’t allow developers to add UI components in cells, only its views or use it as an editor. But this is not very hard to support it. The fast implementation to demonstrate it should do the following:

  • Overriding “doLayout” method of grid component to layout UI components you add to grid
  • Overriding “catchScrolled” to shift added UI component according to new position of scrolled grid content
  • If a grid keeps dynamic content, you should check when a row/column is removed or inserted to correct UI components row/column. In the provided below implementation this step is skipped.
// create grid instance and extend it with new functionality to keep UI component   
var g = new Grid(100,10, [
function doLayout(target) {
for(var i = 0; i <; i++) {
var kid =[i];
if (kid.isVisible === true && kid.constraints != null && typeof kid.constraints.row !== 'undefined') {
var c = kid.constraints,
w = this.getColWidth(c.col),
h = this.getRowHeight(c.row);
kid.setBounds(this.getColX(c.col), this.getRowY(c.row), w, h);

function catchScrolled(psx, psy){
this.$super(psx, psy);
var sx = this.scrollManager.getSX() - psx,
sy = this.scrollManager.getSY() - psy;
for(var i = 0; i <; i++) {
var kid =[i];
if (kid.isVisible === true &&
kid.constraints != null &&
typeof kid.constraints.row !== 'undefined')
kid.setLocation(kid.x + sx, kid.y + sy);

// add component to grid with constraints that depicts row and column where
// the component has to be placed
for(var i=0; i < g.model.rows ;i++) {
g.add({ row: i, col: 2 }, new Button("Test " + i));

Please login or Register to Submit Answer