Dojo DGrid- how do I add in a button to a column's label?

Question

My goal is create a dGrid where each column has a label and a button right next to the label called comments.

Only if the slot_header != "", else we hide the column all together. I have the hiding working when I pass it "". It's just when I do pass header = "HELLO", the label for the column becomes:

"HELLO[Widget dijit.form.Button, dijit_form_Button_19]" the goal is "HELLO"CLICKABLEBUTTON

I'm using PHP to instantiate the grid, then using lang.hitch in a renderCell to build what goes into the domNode, any help would be appreciated

   $singleStudentDetail = array(
    array('field' => 'line_nbr',     'label' =>'Line',              'properties' => array('width' => $width)),
    array('field' => 'skill_desc',     'label' =>'Skill',               'properties' => array('width' => $width)),
    array('field' => 'display_slot_01', 'label' => 'Notes',
                'properties' => array('width' => 55, 'sortable' => 'false', 'renderCell' =>
                'lang.hitch(this,function(object,value,node,options){

                            node.innerHTML = object["grades_01"];

                        var myButton = new Button({
                                            label: "Click me!",
                                            onClick: function(){
                                                // Do something:
                                                alert("THIS BUTTON WORKED");
                                            }
                                        });
                        if(object["slot_headings_01"] != "")
                        {
                            studentListDetailDGridVar.columns[3].label = object["slot_headings_01"] + myButton
                        }
                        else
                            studentListDetailDGridVar.columns[3].hidden = true;
})'
                )
        ));
$DgridParamsDetail = array(
    "columns"    => $singleStudentDetail,
    "gridVar"    => "studentListDetailDGridVar",
    "gridDiv"    => "studentListDetailDiv",
    "gridProperties"    =>  array("rowsPerPage" => 15),
    "render"        =>  true

);

Richard · Answer 1 · 2014-03-21T08:46:57.970

2

You need to return the domNode of the button and not the button widget itself when using renderCell or renderHeaderCell.

Below is an example in javascript of a renderCell function that returns a button.

renderCell: function(object, data, td, options) {
    return new Button({
        label: "Click me!",
        onClick: function() {
            console.log("THIS BUTTON WORKED!");
        }
    }).domNode;
}

edited Mar 21 '14 at 08:46

answered Mar 20 '14 at 06:15

Richard

1,138
1
6
11

Do you mean using the – user3416218 Mar 20 '14 at 14:44
No I mean just in your renderCell function, return button.domNode instead of the button object. The renderCell function places whatever is returned to it directly in the cell so returning a widget object is what gives you the [Widget ...] but if you return the domNode instead, it should work fine. – Richard Mar 21 '14 at 08:18

Dojo DGrid- how do I add in a button to a column's label?

1 Answers1