How to add button or images to dojo grid

Question

I have a dojo grid with a json datastore (mysql resultset converted into json format). Currently my grid show 5 columns as shown below in the figure:

I have column named 'Action'. The rows under this 'Action' column should contain buttons or images(edit icon, delete icon) with hyperlinks such as edit.php?id=1 for edit, or delete.php?id=1 for delete. Here is my dojo grid code:

<span dojoType="dojo.data.ItemFileReadStore" data-dojo-id="studentsStore" url="http://localhost/newsmis/public/studentManagement/student/fetchdata/data/1"></span>
<table dojoType="dojox.grid.DataGrid" id="studentsGrid" data-dojo-id="studentsGrid" columnReordering="true" sortFields="['idstudents','first_name','middle_name','last_name']" store="studentsStore"  clientSort="true" selectionMode="single" rowHeight="25" noDataMessage="<span class='dojoxGridNoData'>No students found</span>">
    <thead>
        <tr>
            <th field="idstudents" width="20%">Student ID</th>
            <th field="first_name" width="20%">First Name</th>
            <th field="middle_name" width="20%">Middle Name</th>
            <th field="last_name" width="20%">Last Name</th>
            <th field="action" width="20%">Action</th>
        </tr>
    </thead>
</table>

My json data format is

 {"identifier":"idstudents","items":[{"idstudents":"11","first_name":"Pradip","middle_name":"Maan","last_name":"Chitrakar"}]}

How can i do it? Please suggest me some ideas

Answer 1

If you don't want a button, but only an image icon, you can return a span-element from the formatter function like this:

formatter: function(value) {
    var myValueClass = "dijitNoValue";
    ...
    myValueClass = "ValueClass1";
    ...
    return "<span class='dijitReset dijitInline dijitIcon " + myValueClass + "'></span>";
}

An css class has to be defined like

.ValueClass1 {
    background-image: url('val_image1.png');
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    text-align: center;
    background-position: 1px;
}

Answer 2

As documentation of dojox.grid.DataGrid stays:

Beginning with Dojo 1.7, you should use dgrid or gridx, next-generation grid components that take full advantage of modern browsers and object stores.

piece of code example:

columns: [
            {
                field: "id",
                label: "ID"
            },
            {
                field: "name",
                label: "Name"
            },
            {
                field: "options",
                label: "Options",
                renderCell: function (obj) {
                    var cellContent = domConstruct.create("div",{});
                    var btn = new Button({
                        label: "Cell " + obj.id,
                        name: "idBtn"
                    })
                    btn.placeAt(cellContent);

                    on(btn, "click", function (evt) {
                        console.log(obj);
                    });

                    return cellContent;
                }
            }
        ]

This is JSfiddle example how to do it in dgrid by using function renderCell in column properties of dgrid.

renderCell(object, value, node, options) - An optional function that will be called to render the value into the target cell. object refers to the record from the grid’s store for the row, and value refers to the specific value for the current cell (which may have been modified by the column definition’s get function). node refers to the table cell that will be placed in the grid if nothing is returned by renderCell; if renderCell returns a node, that returned node will be placed in the grid instead. (Note: if formatter is specified, renderCell is ignored.)

Answer 3

Here is the working example,

Image in dojo Grid

Answer 4

The one way I know is, that defining formatting method for that column in grid structure. So instead of defining the structure of the grid declaratively, define in JavaScript object like below

var structure = [
{
    name: "First Name",
    field: "first_name"
},
{
    name: "Action",
    field: "_item",
    formatter: function(item){
        var btn = new dijit.form.Button({
            label: "Edit"
        });
    return btn;
    }
}

]

and set this structure to the grid

<table dojoType="dojox.grid.DataGrid" id="studentsGrid" data-dojo-id="studentsGrid" columnReordering="true" sortFields="['idstudents','first_name','middle_name','last_name']" store="studentsStore"  clientSort="true" selectionMode="single" rowHeight="25" noDataMessage="<span class='dojoxGridNoData'>No students found</span>" structure=structure >