I tried myself and it seems much complicater. Here are the pieces of code I already have. I still try to get used to Javascript/jQuery in general and to the notation you use in your library:
var
_fileUploadData;
$.extend($.fn.datagrid.defaults.editors, {
fileUpload: {
init: function(container, options){
var input = $('<input type="file" class="datagrid-editable-input">').appendTo(container);
input.on('change', function (event) {
_fileUploadData = event.target.files; // >> I didn't find the way to "bind" it to the row/editor
var pg = input.parents('table.propertygrid');
pg.propertygrid('endEdit', input.parents('.datagrid-row').attr('datagrid-row-index')); // doesn't work like this :-(
});
return input;
},
destroy: function(target){
$(target).remove();
},
getValue: function(target){
return _fileUploadData[0].name;
},
setValue: function(target, value){
$(target).trigger('click'); // open the file dialog immediately
},
resize: function(target, width){
$(target)._outerWidth(width);
}
}
}
Once this is working, my idea is to do something like described here in the onAfterEdit event:
http://abandon.ie/notebook/simple-file-uploads-using-jquery-ajaxI already post each changed (simple) value there and the server sends back an updated property grid which I apply with .propertygrid('loadData'). This works fine for strings, combos and memos and allows me to update dependent fields on the server:
// an object to handle interaction of a treegrid and a propertygrid
function BSTreeEditor(treeid, propertygridid, source) {
var that = this;
this.tree = $('#' + treeid);
this.pgrid = $('#' + propertygridid);
this.resturl = 'rest/' + source;
this.tree.treegrid({
idField: 'id',
treeField: 'column0',
sortName: 'column0',
remoteSort: false,
onSelect: function(node) {
var url = that.resturl + '/detail?id=' + node.id;
bsSendRestRequest(url, null, null, function(data, statusCode) {
that.tree.treegrid('update', data.node);
that.pgrid.propertygrid('loadData', data.propertygrid);
});
}
});
this.pgrid.propertygrid({
showGroup: true,
columns:[[
{ field:'name', title:'Name', width:100, resizable:true },
{ field:'value', title:'Value', width:100, resizable:false,
formatter: function(value, row){
if ( row.valuedisplay )
return row.valuedisplay
else if ( row.editor.type == 'text' )
return bsHtmlEncode(value);
else if ( row.editor.type == 'textarea' )
return value.replace(/\n/g, '<br>');
else
return value;
},
styler: function(value, rowData, index) {
if ( rowData.editor.type == 'textarea' )
return 'white-space: normal;';
else
return '';
}
}
]],
onBeforeEdit: function(rowIndex, rowData) {
if ( rowData.editor.type == 'combobox' )
rowData.editor.showPanel; // << This should open the dropdown on click but it doesn't work like this :-(
},
onAfterEdit: function(rowIndex, rowData, changes) {
if ( changes.value ) {
var tmp = { 'valuename' : rowData.valuename, 'value' : changes.value };
var tmp2 = that.pgrid.propertygrid('getData');
var url = that.resturl + '/detail?id=' + tmp2.id;
bsSendRestRequest(url, JSON.stringify(tmp), "application/json; charset=utf-8", function(data, statusCode) {
that.tree.treegrid('update', data.node);
if ( that.tree.treegrid('bsRefresh') == data.node.id )
that.pgrid.propertygrid('loadData', data.propertygrid);
});
}
}
});
cu Christian