I take your example from here: http://www.jeasyui.com/demo/main/index.php?plugin=PropertyGrid&theme=default&dir=ltr&pitem=


and add an onBeforeEdit event, which returns false:

Code:

    <table id="pg" class="easyui-propertygrid" style="width:300px" data-options="
                url:'propertygrid_data1.json',
                method:'get',
                showGroup:true,
                scrollbarSize:0,
                onBeforeEdit: function(rowIndex, rowData) {
                  return false;
                }
            ">

This causes the following error:

Uncaught TypeError: Cannot read property 'target' of undefined jquery.easyui.all.js:12695

Is there something wrong with my code or is this an error in the library?

cu Christian

We are pleased to announce the availability of jQuery EasyUI 1.3.6.

Very good. How can I get the update with full source (commercial license)?

cu Christian

By default, the editor is shown even if I click in the label column. I tried this:

$('#editor').propertygrid({ singleSelect: false });

But this doesn't help and rows stay selected all the time.

cu Christian

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:

Code:

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-ajax

I 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:

Code:

// 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

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

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

It is posible to have a tooltip on link buttons?

<a .... title="Here goes the tooltip"/>

cu Christian

Great!

One additional question: I defined an onSelect function but would like to disable it during the call to 'select' here.

Is this possible?

cu Christian

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

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

Please refer to the attached example, it works well. If the issue continues, please try to clear your browser's cache and try it again.

The attached example solved the multi select problem (http://www.jeasyui.com/easyui/jquery.easyui.min.js). But in this version of EasyUI, button icons are not placed correctly. Is it possible to get an updated version?

cu Christian

I want to override the loader function globally. What is the better way to do it?

Code:

  $('.easyui-treegrid').each( function() {
    $(this).treegrid({
      loader:function(param,success,error) {
        // my loader code
      }
    });
  });

or like this:

Code:

  $.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

But your JSFiddle example doesn't work

- click on ComboTree; Tree apears -> ok
- Select "Second" and "Third" -> ok
- click somewhere else do close the tree -> NOT ok:
  * id displayed instead of text
  * only one item stays selected

cu Christian

For more information please refer to this example http://jsfiddle.net/fup75/.

After done editing there are two things that don't work
- only one item is showed as selected
- the id and not the text is displayed after editing

cu Christian

In a propertygrid I want to create a combotree control with multiselect values.
The items are all defined with id/name (http://www.geologix.ch/downloads/testdata.json). On my server I only save the selected values, e.g. "1,22,4". As display value I would like to show the names ("First, Second Child, Third").

What is the correct approach to implement this in a general way? Where do I have to add the functionality?

cu Christian