How to add more than one buttons in to a dojo grid cell

Question

I am new to dojo, and I am trying to put some buttons into a datagrid cell. I read the docs and succeed to put one button into the grid using formatter:

{
    name: "oper",
    field: "id",
    type: dojox.grid.cells._Widget,
    editable: false,
    formatter: function(id){
        return new Button({
            label:"oper",
            onClick: function(){
                    oper(id);
            }
        });
    }

}

My question is how to put two or more than two buttons into the cell. Thx very much.

score 1 · Answer 1 · answered Sep 29 '15 at 14:43

this is a recurrent question concerning dojo Datagrids. The main problem here is that the row formatter usually return either a dijit widget or a html. I have found and test a simple method to overcome this issue.
1. Create your div holder for your widgets. E.g var holderDiv = dojo.toDom("");
2. Dynamically create your wigets e.g. var editBtn = new dijit.form.Button({...});
var saveBtn = new dijit.form.Button({...});
var deleteBtn = new dijit.form.Button({...});
3. Place your widgets inside the holder div.
4. Return the innerHtml of the holder div.

        **Hier is the full code:**
        function controlBtnsFormatter(data, rowIndex) {
            var holderDiv = dojo.toDom("<div></div>");
            var editBtn = new dijit.form.Button({...});
            var saveBtn = new dijit.form.Button({...});
            var deleteBtn = new dijit.form.Button({...});
            // destroy them on remove
            editBtn._destroyOnRemove = true;
            saveBtn._destroyOnRemove = true;
            deleteBtn._destroyOnRemove = true;
            // place buttons inside div
            editBtn.placeAt(holderDiv);
            saveBtn.placeAt(holderDiv);
            deleteBtn.placeAt(holderDiv);

            return holderDiv.innerHTML;

        }

score 0 · Answer 2 · answered Mar 27 '13 at 14:19

0

In your formatter function, create a div and add all your button in your div and return created div

formatter: function(id){
    var result = "<div>"
    //add all your buttons in the div, you can also apply some styles

    result += "</div>";
}

answered Mar 27 '13 at 14:19

Berto

141
2

score 0 · Answer 3 · answered May 04 '17 at 10:49

A better solution is to use the dijit.form.Form widget to enclose the buttons:

            require(['dojo/_base/lang', 'dojo/dom', 'dijit/form/Button', 'dijit/form/Form', 'dojo/domReady!'],
               function(lang, dom, Button, Form){

                function formatter(){

                    var form = new Form();
                    var w1 = new Button({
                        label: "Edit",
                        onClick: function() {
                            alert("Thanks for all the fish.  ");
                        }
                    });

                    var w2 = new Button({
                        label: "Delete",
                        onClick: function() {
                            alert("Thanks for all the fish 2.  ");
                        }
                    });

                    w1._destroyOnRemove = true;
                    w2._destroyOnRemove = true;

                    w1.placeAt(form);
                    w2.placeAt(form);

                    return form;
                } .....

How to add more than one buttons in to a dojo grid cell

3 Answers3