webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

Adding a button inside the cells of the ACTION column #150

Closed bigandy131 closed 6 years ago

bigandy131 commented 7 years ago

If I want a button inside the action column. How would I do that. Right now it do not show up automatically with the gird load in my code. I have to click on the cell twice for my button to show up..

first drop down box pop up. Then i click on one of the options(everything say undefined at first).Then my button pop up. A script in my index.html

-----------------------------------------------------------------------how i load my data(loaddata.php)---------------

$retArr = array();

$retArr["metadata"] = array( array("name" => "DEPTID","label" => "DEPTID","datatype"=>"integer","values"=>"NULL","editable"=>"false"), array("name"=>"DEPT_CODE", "label"=>"DEPT_CODE","datatype"=>"string","editable"=>"true"), array("name"=>"DEPT_DESC", "label"=>"DEPT_DESC","datatype"=>"string","editable"=>"true"), array("name"=>"DEPT_PRIMARY_CHG_ACCT", "label"=>"DEPT_PRIMARY_CHG_ACCT","datatype"=>"string","editable"=>"true"), array("name"=>"EDIT_DATE", "label"=>"EDIT_DATE","datatype"=>"date","editable"=>"false"), array("name"=>"EDIT_CLERK", "label"=>"EDIT_CLERK","datatype"=>"string","editable"=>"false"), array("name"=>"ACTION", "label"=>"ACTION","datatype"=>"html","values"=>"NULL","editable"=>"false","field"=>"id"));

$current=array(); $total=array();

$sql = oci_parse($conn,"select * from fac.mp_dept"); oci_execute($sql,OCI_DEFAULT);

while ($arr = oci_fetch_assoc($sql)) {

            $retArr["data"][] = (array("id"=>$arr["DEPTID"],"values"=>array("DEPTID"=>$arr["DEPTID"],"DEPT_CODE"=>$arr["DEPT_CODE"],"DEPT_DESC"=>$arr["DEPT_DESC"],"DEPT_PRIMARY_CHG_ACCT"=> $arr["DEPT_PRIMARY_CHG_ACCT"],"EDIT_DATE"=>$arr["EDIT_DATE"],  "EDIT_CLERK"=>$arr["EDIT_CLERK"] )));

             }

echo json_encode($retArr);

TxEdgeMan commented 6 years ago

It is really hard to read when your pasted code isn't formatted. Need a call to setCellRender for 'action'.

Change: editableGrid.tableLoaded = function() { editableGrid.renderGrid("tablecontent", "testgrid"); };

TO: editableGrid.tableLoaded = function() { this.setCellRender("action", new CellRenderer({ render: function(cell,id, rowIndex) { cell.innerHtml+= "<i onclick=\"yourJavaScriptActionFunctionGoesHere;\" class='fa fa-info green'>"; } })); editableGrid.renderGrid("tablecontent", "testgrid"); };

NOTE: Class is using the font awesome CSS to display an 'info' button. Change / omit as you see fit.

bigandy131 commented 6 years ago

This is no longer an issue for me. sorry about that. I fix this problem i had a while back.