EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Agira on November 08, 2013, 10:25:40 PM



Title: dependent comboxbox in datagrid
Post by: Agira on November 08, 2013, 10:25:40 PM
Hi all,

I have a problem of showing text in combobox list in datagrid editing. In datagrid, there are two columns of combobox type. When select the first one, the second one populates the data according to the first one selected data. My problem is when click the second combobox I cann't see text in the combobox list. I move the mouse into the list area, there are litte colored strip of data but with small height, so I cann't see text of them. The selected text will show out when the editing ends. How to let the text in combobox list shows out.

TIA
Agira


Title: Re: dependent comboxbox in datagrid
Post by: stworthy on November 09, 2013, 07:19:00 AM
Please check your second combobox to see if the json data can be loaded successfuly.


Title: Re: dependent comboxbox in datagrid
Post by: Agira on November 09, 2013, 12:36:52 PM
Hello stworthy,

I've checked it. The second combobox has data as I told that when I moved the mouse into the dropdown list of second one, there are little strips as moving pass. The number of strip rows are the number of data populated into it. After clicking one of that rows, ending editing, text shows as normal combobox.  It looks like the row height of dropdown list is not enough for text.

Thank you.
Agira

PS. I attached the picture of the second combobox showing little row strip.
(http://postto.me/0/hca.png)


Title: Re: dependent comboxbox in datagrid
Post by: stworthy on November 09, 2013, 05:18:29 PM
You may set the wrong 'textField' value for combobox. Please check and correct it. If the issue continue, please paste some code snippets to shows how you create the combobox and the json data the combobox used.


Title: Re: dependent comboxbox in datagrid
Post by: Agira on November 09, 2013, 09:32:24 PM
json data:
[{"value":"14","caption":"zone A"},{"value":"15","caption":"zone B"},{"value":"16","caption":"zone C"}]

code:

onChange event of first combobox:

         onChange: function(value){
             var tr = $(this).closest('tr.datagrid-row');
             var idx = parseInt(tr.attr('datagrid-row-index'));
             var ed = $("#tblProductionInfo").datagrid("getEditor", {index:idx, field:'zone'});
             $(ed.target).combobox("reload", "warehouse.php?method=getzone&warehouse="+value);
         }

second combobox:

        {field:'zone', title:'Zone', width:80, align:'center',
            editor:{
                type: 'combobox',
                valueField: 'value',
                textField: 'caption'
            }
        }

After selecting the second combobox element, text not shown til ending editing as following image:
(http://postto.me/0/iuj.png)


Title: Re: dependent comboxbox in datagrid
Post by: stworthy on November 10, 2013, 01:44:33 AM
You are using the wrong combobox definition. Please try the code below:
Code:
{field:'zone', title:'Zone', width:80, align:'center', 
editor:{
type: 'combobox',
options:{
valueField: 'value',
textField: 'caption'
}
}
}


Title: Re: dependent comboxbox in datagrid
Post by: Agira on November 10, 2013, 02:49:14 AM
It's solved. Thank you very much, stworthy.