Print Page - PropertyGrid with combobox: how to get textField instead of ValueField content

Title: PropertyGrid with combobox: how to get textField instead of ValueField content
Post by: StefaanEeckels on November 11, 2015, 09:32:00 AM

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

Title: Re: PropertyGrid with combobox: how to get textField instead of ValueField content
Post by: jarry on November 11, 2015, 08:21:31 PM

If you wish to retrieve the text from the combobox editor and update to the editing row in propertygrid, please set the 'valueField' and 'textField' with the same value.

Code:

"editor":{
	"type":"combobox",
	"options":{
		"valueField":"desc",
		"textField":"desc",
		"data":[
			{"id":1,"desc":"desc1"},
			{"id":2,"desc":"desc2"},
			{"id":3,"desc":"desc3"},
			{"id":4,"desc":"desc4"}
		]
	}
}

Title: Re: PropertyGrid with combobox: how to get textField instead of ValueField content
Post by: StefaanEeckels on November 12, 2015, 01:38:06 AM

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

Title: Re: PropertyGrid with combobox: how to get textField instead of ValueField content
Post by: jarry on November 12, 2015, 08:18:06 PM

Please refer to this example http://jsfiddle.net/efc746hw/

Title: Re: PropertyGrid with combobox: how to get textField instead of ValueField content
Post by: StefaanEeckels on November 13, 2015, 03:41:32 AM

Thanks a lot Jarry, it works a treat.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: StefaanEeckels on November 11, 2015, 09:32:00 AM