Hello, I have been using Jqwidgets for a few weeks and now am trying to create an extension for Jqxgrid of jQwidgets and got some difficulties. This is how I call the extension :
<?php $this->widget('application.extensions.jqwidgets.grid.JQxGrid', array(
'id' => $this->id.'-grid',
'selector' => $this->id.'-grid',
'theme' => Yii::app()->params['theme'],
'width' => 800,
'rendergridrows' => 'function(obj) {
return obj.data;
}',
'data' => array (
'url' => Yii::app()->createUrl('/admin/'.$this->id.'/dataProvider'),
'datatype' => 'json',
'datafields' => array(
array(
'name' => 'user_id',
'type' => 'string',
),
array(
'name' => 'full_name',
'type' => 'string',
),
array(
'name' => 'email',
'type' => 'string',
),
array(
'name' => 'last_login_time',
'type' => 'string',
)
)
),
'columns' => array(
array( 'text' => 'ID', 'datafield' => 'user_id', 'width' => 80 ),
array( 'text' => 'Full Name', 'datafield' => 'full_name', 'width'=> 200 ),
array( 'text' => 'Email', 'datafield' => 'email', 'width'=> 200 ),
array( 'text' => 'Last Login Time', 'datafield' => 'last_login_time', 'width'=> 150 ),
array( 'text' => "Edit", 'datafield' => "Edit", 'columntype' => "button", 'width' => 50 , 'cellsrenderer' => 'function () {
return "Edit";
}, buttonclick: function (row) {
var dataRecord = userGrid.jqxGrid("getrowdata", row);
$.ajax({
type : "GET",
url : "/lps/admin/user/edit",
data : { "id" : dataRecord.user_id },
success: function (data) {
$("#user-display-section-content").html(data);
},
error: function () {
$("#user-display-section-content").html("Error");
}
});
$("#user-display-section").show();
}',
),
)
)); ?>
[Edited]
This is the Extension Class :
<?php
/**
* JQGrid
*
* @version 1.00
* @author Calvin Susanto Putra <calvin.ent@gmail.com>
*/
class JQxGrid extends CWidget
{
// General
public $id;
public $selector;
public $data = array(
'datatype',
'datafields',
'cache' => false,
'url',
'filter',
'sort',
'root' => 'rows',
'beforeprocessing' => ' function(record) {
if(record) data.totalrecords = record.totalRows;
}',
);
// Appearance
public $theme;
public $showfilterrow = true;
// Layout
public $width = null;
public $autowidth = true;
public $height = null;
public $autoheight = true;
// Behavior
public $columns;
public $pageable = true;
public $filterable = true;
public $sortable = true;
public $virtualmode = true;
public $columnsresize = true;
public $columnsreorder = true;
public $rendergridrows; // This is a function called when the grid is used in virtual mode
public $options = array();
public function init()
{
$this->options['theme'] = $this->theme;
$this->options['showfilterrow'] = $this->showfilterrow;
is_null($this->width) ? $this->options['autowidth'] = $this->autowidth : $this->options['width'] = $this->width;
is_null($this->height) ? $this->options['autoheight'] = $this->autoheight : $this->options['height'] = $this->height;
$this->options['columns'] = $this->columns;
$this->options['pageable'] = $this->pageable;
$this->options['filterable'] = $this->filterable;
$this->options['sortable'] = $this->sortable;
$this->options['columnsresize'] = $this->columnsresize;
$this->options['columnsreorder'] = $this->columnsreorder;
$this->options['rendergridrows'] = $this->rendergridrows;
parent::init();
}
public function run()
{
Yii::app()->getClientScript()
->registerScript(__CLASS__.crc32($this->id),'
var options = '.CJavaScript::encode($this->options).';
var data = '.CJavaScript::encode($this->data).';
if(options.filterable) {
data.filter = function() {
$("#'.$this->selector.'").jqxGrid("updatebounddata", "filter");
}
}
if(options.sortable) {
data.sort = function() {
$("#'.$this->selector.'").jqxGrid("updatebounddata", "sort");
}
}
options.source = new $.jqx.dataAdapter(data, {
loadError: function(xhr, status, error) {
console.log("XHR : " + xhr.statusText);
console.log("Status : " + status);
console.log("Error : " + error);
}
});
$("#'.$this->selector.'").jqxGrid(options);
');
parent::run();
}
}
The problem is when I set the cellsrenderer value. I need to pass it as a javascript function, not a string. If I use the above method, it will pass the value of cellsrenderer as a string not as a javascript function, and therefore cause error "TypeError: g.cellsrenderer is not a function". Anyone know how to resolve this ? Thank you
