Show Posts
|
Pages: [1]
|
4
|
General Category / EasyUI for jQuery / Re: Propertygrid with file upload
|
on: February 25, 2014, 12:10:42 AM
|
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
|
|
|
5
|
General Category / EasyUI for jQuery / Propertygrid keyboard support
|
on: February 24, 2014, 06:38:42 AM
|
I would like to bind the keydown event for all editors. But I don't find out when/where. In onBeforeEdit the editor doesn't exist yet.
The behaviour should be: - <F2> calls "beginEdit" - <enter> calls "endEdit" - <esc> calls "cancelEdit"
And finally if I click on a combo with editable=false, I would like to force a showPanel without a second click.
cu Christian
|
|
|
6
|
General Category / EasyUI for jQuery / Propertygrid with file upload
|
on: February 24, 2014, 02:00:52 AM
|
I would like to create my own inline editor for a file upload - show a link to the current file - choose a new file on double click - upload the file with AJAX in onAfterEdit event
Did already somebody build an editor for this?
cu Christian
|
|
|
9
|
General Category / EasyUI for jQuery / Extend EasyUI component
|
on: February 19, 2014, 01:17:46 AM
|
What is the save way to add own functions to components.
For example I would like to group the following lines in one call
var n = tt.treegrid('getSelected'); var d = tt.treegrid('getData'); tt.treegrid('loadData', d); if ( n ) tt.treegrid('select', n.id);
This should become something like this
tt.treegrid('myRefresh'); or tt.treegrid.myRefresh();
cu Christian
|
|
|
10
|
General Category / EasyUI for jQuery / treegrid - update sort after node update
|
on: February 18, 2014, 09:52:26 AM
|
In a treegrid I defined: sortName: 'column0', remoteSort: false
This works fine when nodes or childnodes are added with the loader function. But when I call:
tree.treegrid('update', nodedata);
The sort is not updated. I could call 'reload', but this causes a new request to the server which I would like to avoid.
My question: How can I update sorting of all tree nodes?
cu Christian
|
|
|
12
|
General Category / EasyUI for jQuery / Global loader function
|
on: February 17, 2014, 01:42:39 AM
|
I want to override the loader function globally. What is the better way to do it? $('.easyui-treegrid').each( function() { $(this).treegrid({ loader:function(param,success,error) { // my loader code } }); });
or like this: $.fn.combobox.defaults.loader = function(param, success, error) { var opts = $(this).combobox('options'); if (!opts.url) return false; bsSendRestRequest(opts.url, param, null, success); // my own loader method };
I noticed, that for dynamic items, e.g. combobox in a propertygrid, only the second variant is working. But I don't know, if there is any tradeoff. Or is there another way to do it? cu Christian
|
|
|
|