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

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 >