Not sure how to handle cell data that is an array in pqGrid.
I have the following colModel that displays the array data just fine using a custom render, but the custom editor/getData doesn't seem to agree with pqGrid. Not sure if I'm just misunderstanding how the custom editor should work, or if I just can't use arrays in the column data.
colModel object for array column:
{
title:"Tax Rates in Group",
width:'50%',
sortable:false,
dataIndx: "tax_rates",
render: function(ui){
return _itemListHtml(ui.rowData.tax_rates);
},
editable: true,
editor: {
type: function(ui){
var data = $.extend(true,[],ui.rowData.tax_rates);
var $cell = ui.$cell;
ui.rowData.tax_rates.forEach(function(d){
$cell.append(_itemRemoveButton(d.name, data));
});
$cell.append(_itemAddButton("Add Tax Rate", data));;
$cell.data("pq-itemData",data);
},
getData: function(ui){
return ui.$cell.data("pq-itemData");
}
}
},
Supporting functions:
function _itemListHtml(itemData){
var items = [];
itemData.forEach(function(r){
items.push('<span style="white-space:nowrap;">'+r.name+'</span>');
});
return items.join(', ');
}
function _itemRemoveButton(name, data){
return $('<button class="delete_item_btn">'+name+'</button>').button({
icons:{
primary:'ui-icon-close'
}
}).bind("click",function(e){
var $this = $(this);
data.splice($this.parent().index(),1);
$this.remove();
});
}
function _itemAddButton(name, data, itemSelection){
return $('<button class="add_item_btn">'+name+'</button>').button({
icons:{
primary:'ui-icon-plus'
}
}).bind("click",function(e){
var $this = $(this);
var selectedItem = _selectModal(itemSelection,data);
if(selectedItem){
data.push(selectedItem);
$this.before(removeItemButton(selectedItem.name));
}
});
}
getData returns the modified array just fine, but pqGrid just seems to ignore the changes.
