The problem is that the function is evaluated when the handler is installed, not when it is called. You could try something lile this:

               editor: {
                  type: 'combogrid',
                  options: {
                     validType: makeURL(),
                  }
               }

...
function makeURL() {
    var Year = Math.floor($('#Year').combobox('getValue'));
    return 'remote["dovalidate.cgi?Year=" + Year, "Col1"]';
}

10k -- that's a heck of a lot. No wonder my experience with a couple of hundred lines was irrelevant. Glad to hear you managed to fix it.

Thanks a million stworthy! As always, your solutions work.

How many lines do you have in the datagrid? In my application, resizing the east, west or south panels of the layout with 144 lines in the grid is nearly instantaneous. Inserting new lines in a datagrid is very slow (e.g. when loading or expanding a level) to the point users comment on it, but I've never observed unacceptable response times when resizing a datagrid. Can you give more details on the layout, the characteristics of the datagrid, and the type of change that triggers the rendering (In my application, the data inside the other panels of the layout changes constantly, without any effect on the datagrid in the center panel).

Hi Forum,

Does anyone know if it is possible to Tab from one editable field in a propertyGrid to the next? The fields aren't genuine HTML input fields, so hitting Tab while in a propertyGrid moves the cursor to the browser's URL entry field. This happens in the live demo examples as well.

Thanks and take care,

Stefaan

I use easyui-layout with a datagrid in the center region. The east and west regions are trees, the north region contains input fields. My datagrid does not load automatically (i.e. it does not have a "url" property, but it gets loaded using Ajax. Once loaded, the contents are not affected by changes in the other regions. So loading with Ajax is a solution.

If you load your datagrid through the "url" property, you could remove it after the data has loaded, using the onLoadSuccess event, something like this:

<table class="easyui-datagrid" id="dg" name="dgname" data-options="
    url: 'loadDatagrid',
    onLoadSuccess: function(data) {
        $(this).datagrid({url: ""});
    }
">

Without a url, the datagrid should stop reloading.

Thanks a lot Jarry, it works a treat.

Max,
What do you mean by "changing the page"? I use a datagrid in which fields are updated via Ajax, and the datagrid itself is not refreshed.
Take care,
Stefaan

You could put the button callbacks in a couple of functions:

function disableEdit(){
    $('#PROGRAM_NAME').textbox({icons:[{
        iconCls:'icon-add',
        handler: iconAddAction
      },
    ]});
    $('#PROGRAM_NAME').textbox({editable: false});
}
function enableEdit(){
    $('#PROGRAM_NAME').textbox({icons:[{
        iconCls:'icon-add',
        handler: iconAddAction 
      }, {
        iconCls:'icon-edit',
        handler: iconEditAction
      }
   ]});
    $('#PROGRAM_NAME').textbox({editable: true});
}        
function iconAddAction(e){
    alert('add');
}
function iconEditAction(e) {
    alert('edit');
}    

Here's the fiddle: http://jsfiddle.net/hudvkm58/

Take care,
Stefaan

Hi aswzen,

Is this what you are looking for:

function disableEdit(){
    console.log($('#PROGRAM_NAME').textbox('options'));
    console.log($('#PROGRAM_NAME_2').textbox('options'));
    $('#PROGRAM_NAME').textbox({icons:[{
        iconCls:'icon-add',
         handler: function(e){
            alert('add');
        }},
      ]});
}

This is my first attempt at cloning a jsfiddle, but it seems to have worked: http://jsfiddle.net/hb8pdh4y/1/

Take care,
Stefaan

Thank you for the reply, Jarry. My problem is that I have to update a database, and to do so I need to access the code in the valueField. When I set both valueField and textField to the description (which I want to have displayed to the user who doesn't know what code 678123001 means), the valueField is not present in the rows array (which I retrieve with propertygrid('getChanges'):

0: Object
    editor: Object
        options: Object
            method: "get"
            textField: "desc"
            url: "getGenericObject?uid=679091354;rel=1225;order=lhobjectname;context=_PROD_;obj=679091356"
            valueField: "desc"
            __proto__: Object
        type: "combobox"
        __proto__: Object
    group: "Attributes"
    lhname: "lbps-lux"
    lhuid: "679091356"
    name: "has as name"
    reluid: "5117"
    rhuid: "679091356"
    type: "load balancer"
    value: "lbps-bru"

As you can see, the 'value' field in the object contains the content of the 'valueField'. Ideally, I want the textField to be displayed at all times, and the valueField to be returned in the object.

Thanks and take care,
Stefaan

[I could not upload the screenshots -- the message was "Upload folder is full". My files were all less than 4kB.]

Hello Forum,
This is my first post here -- I have been using EasyUI with great success for the past two years, and it has proved to be robust and reliable. I hope someone can help me with the following problem I am experiencing.

I am generating dynamic database forms using propertygrid. The server dynamically generates the rows of the propertygrid which has been created by the following HTML:

        <table id="Loadbalancer_tab" class="easyui-propertygrid"
            style="right:0;left:0;top:0;bottom:0;position:fixed;padding:10px 10px 10px 10px" data-options="
          method:'get',
          showGroup:true,
          scrollbarSize:10,
          columns:sidcolumns
        ">
        </table>

The columns are defined as follows:

var sidcolumns = [[
    {field:'name',title:'<b>Relation</b>',width:150,sortable:false},
    {field:'type',title:'Type',width:75,resizable:false},
    {field:'value',title:'<b>Value</b>',width:300,resizable:true},
]];

The 'value' field is editable, and gets an 'editor' attribute when generated. Text fields work fine, but when I use comboboxes, the valueField is displayed instead of the textField when moving to the next row. Here is a row definition as shown by the Chrome debugger:

3: {editor: {options: {method: "get", textField: "desc",…}, type: "combobox"}, group: "Attributes",…}
    editor: {options: {method: "get", textField: "desc",…}, type: "combobox"}
        options: {method: "get", textField: "desc",…}
            method: "get"
            textField: "desc"
            url: "getGenericObject?uid=679091354;rel=1225;order=lhobjectname;context=_PROD_;obj=679094116"
            valueField: "id"
            type: "combobox"
    group: "Attributes"
    lhname: "lbps-bru"
    lhuid: "679094116"
    name: "has as name"
    reluid: "5117"
    rhuid: "679094116"
    type: "load balancer"
    value: "lbps-bru"

 I attach 4 screenshots that illustrate the problem. "original_view.png" shows the attribute as originally displayed. "combobox.png" shows the combobox with the choices. "before_moving.png" shows the correctly displayed choice (the content of textField). "after_moving.png" shows how the content of the valueField is shown after the focus is moved to another row. I could not upload the screenshots -- the message was "Upload folder is full". My files were all less than 4kB.
The same behaviour can be observed in the "Customize columns of Propertygrid" example of the Live Demo. The "FrequentBuyer" field is defined as a CheckBox, which is visible when the field has the focus. When the focus is moved to another field, the CheckBox is replaced by "true" or "false".

Is there a way to stop the PropertyGrid control from putting the content of the valueField in the row?

Thanks a lot!
Stefaan