google apps script - Embedding a button in a grid causes the grid to behave as the button? -

using google apps script build web app, when put button widget in grid widget, seems entire grid turns "button".

i.e. if put:

var mygrid = app.creategrid(4,4); var addbutton = mygrid.setwidget(3,3,app.createbutton("add")); var handler = app.createserverclickhandler('add'); addbutton.addclickhandler(handler); app.add(mygrid); 

in resulting web app if click anywhere on grid clickhandler button fires. worse, if embed multiple buttons in grid, clicking anywhere on grid fires button clickhandlers.

are buttons in grids not supported? or doing wrong?

thanks.

edit: if want see behaviour yourself, i've replicated issue modifying 1 of google's examples. second example "validators" here: https://developers.google.com/apps-script/uiapp#validators modified , put textboxes , button in grid widget. after entering numbers in text boxes, every time click anywhere on grid "add" clickhandler fire , add numbers again:

function doget() {   var app = uiapp.createapplication();   var rgx = "^\\$?[0-9]+$";    // create input boxes , button.    //var textboxa = app.createtextbox().setid('textboxa').setname('textboxa');   //var textboxb = app.createtextbox().setid('textboxb').setname('textboxb');   var mygrid = app.creategrid(4,4);   mygrid.setwidget(0,0,app.createtextbox().setid('textboxa').setname('textboxa'));   mygrid.setwidget(0,1,app.createtextbox().setid('textboxb').setname('textboxb'));    var textboxa = app.getelementbyid('textboxa');   var textboxb = app.getelementbyid('textboxb');    var addbutton = mygrid.setwidget(3,3,app.createbutton("add").setenabled(false));   var label = app.createlabel("please input 2 numbers");    // create handler call adding function.   // 2 validations added handler   // invoke 'add' if both textboxa , textboxb contain   // numbers.   var handler = app.createserverclickhandler('add').validatematches(textboxa,rgx).validatematches(textboxbrgx).addcallbackelement(textboxa).addcallbackelement(textboxb);    // create handler enable button if input legal   var onvalidinput = app.createclienthandler().validatematches(textboxa,rgx).validatematches(textboxb,rgx).fortargets(addbutton).setenabled(true).fortargets(label).setvisible(false);    // create handler mark invalid input in textboxa , disable button   var oninvalidinput1 = app.createclienthandler().validatenotmatches(textboxa,rgx).fortargets(addbutton).setenabled (false).fortargets(textboxa).setstyleattribute("color",     "red").fortargets(label).setvisible(true);     // create handler mark input in textboxa valid   var onvalidinput1 =     app.createclienthandler().validatematches(textboxa,rgx).fortargets(textboxa).setstyleattribute("color", "black");     // create handler mark invalid input in textboxb , disable button   var oninvalidinput2 =     app.createclienthandler().validatenotmatches(textboxb,rgx).fortargets(addbutton).setenabled(false).fortargets(textboxb).setstyleattribute("color", "red").fortargets(label).setvisible(true);    // create handler mark input in textboxb valid   var onvalidinput2 = app.createclienthandler().validatematches(textboxb,rgx).fortargets(textboxb).setstyleattribute("color","black");    // add handlers called when user types in text boxes   textboxa.addkeyuphandler(oninvalidinput1);   textboxb.addkeyuphandler(oninvalidinput2);   textboxa.addkeyuphandler(onvalidinput1);   textboxb.addkeyuphandler(onvalidinput2);   textboxa.addkeyuphandler(onvalidinput);   textboxb.addkeyuphandler(onvalidinput);   addbutton.addclickhandler(handler);    app.add(mygrid);   //app.add(textboxb);   //app.add(addbutton);   app.add(label);   return app; }  function add(e) {   var app = uiapp.getactiveapplication();    var result = parsefloat(e.parameter.textboxa) + parsefloat(e.parameter.textboxb);    var newresultlabel = app.createlabel("result is: " + result);   app.add(newresultlabel);   return app; } 

when write

var addbutton = mygrid.setwidget(3,3,app.createbutton("add"));

and add handler variable addbutton you in fact adding handler grid, not button.

i suggest rewrite (i commented code) , work normally

var mygrid = app.creategrid(4,4); var addbutton = app.createbutton("add"); mygrid.setwidget(3,3,addbutton);// here add button grid var handler = app.createserverclickhandler('add'); addbutton.addclickhandler(handler); app.add(mygrid);// grid must added, button in 

or, if want make more compact :

var handler = app.createserverclickhandler('add'); var mygrid = app.creategrid(4,4).setwidget(3,3,createbutton("add",handler));// here add button grid app.add(mygrid);// grid must added, button in