edatagrid refresh combo after data input

[markalves]

Hi all,
I'm newbie in easyui, and I have a problem:
I would like to retrieve data in a combobox after a user input data in a column or in alternative connect a column to the value of another.
I make an example to best understand the problem:
I have a db of products (where the combo retrive data) this this values:

ID      PRODUCT      COLOR
1       A                 RED
2       A                 GREEN
3       B                 YELLOW
In the datagrid there is an input text where the user digit the product and the combobox where I display the colors and I would like that if the user digit A in the combobox
appear RED and GREEN is it possible ?
Thank you
Bye

[stworthy]

Redefine the 'filter' function to determine how to display items regarding your input value. Here is the example shows how to use 'filter' function.

Code:

	<input class="easyui-combobox" name="color" style="width:200px;" data-options="
			valueField:'id',
			textField:'color',
			data:[{id:1,product:'A',color:'RED'},{id:2,product:'A',color:'GREEN'},{id:3,product:'B',color:'YELLOW'}],
			filter: function(q,row){
				return q==row.product || q=='';
			}
		">

[markalves]

Hi Thank you for the answer, but this is my first datagrid and I will need a little further help, because my structure is a little different from your.
Follow my code D00PRO is product and D00ART the color :

Code:

var articoli;
		function trunkFormatter(value){
                        for(var i=0; i<articoli.length; i++){
                                if (articoli[i].MACAR0 == value) return articoli[i].MACAR0;
                        }
                        return value;
                }

		$(function() { 
		$.getJSON('list_art.php?tipoord='+ $("#tipoordine").val(), function(json) {
                      articoli = json;
			$('#dg').edatagrid({
				url: 'get_righe.php?file=' + $("#nomefile").val(),
				updateUrl: 'update_righe.php?file='+ $("#nomefile").val(),
				 onAfterEdit: function (data) {
                $('#dg').edatagrid('reload');
				},
				rowStyler:function(index,row){  
        if (row.PREDIV>0 && row.D00PRO != 0){  
            return 'background-color:pink;color:blue;font-weight:bold;';  
        }
		if (row.D00PRO==0){
			return 'background-color:yellow;color:blue;font-weight:bold;';  
		}
    }  
			});
			});
		 }); 	
		
	</script>
	
	<h2>Gestione Dati</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>Doppio click per modificare</div>
	</div>
	
	<table id="dg" title="Righe importate" style="width:1000px;height:500px"
			toolbar="#toolbar" pagination="true" idField="E42POS"
			rownumbers="true" fitColumns="true" singleSelect="true">
		<thead>
			<tr>
<!-- <th field="id_trunk" width="140"  formatter="trunkFormatter" editor="{type:'combobox',options:{valueField:'id_trunk',textField:'nome',data:collegamenti,required:true}}">Righe</th>	-->		
				<th field="D00POS" width="0" editor="text" hidden="true">id</th>
				<th field="D00PRO" width="10" editor="text">Progressivo</th>
				<th field="D00ART" width="50" formatter="trunkFormatter" editor="{type:'combobox',options:{valueField:'MACAR0',textField:'MADES0',data:articoli,required:true}}">Articolo</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Salvare</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
	</div>

[stworthy]

Redefine the 'filter' function to achieve your filter logic. Please try:

Code:

<th field="D00ART" width="50" formatter="trunkFormatter" editor="
	{
		type:'combobox',
		options:{
			valueField:'MACAR0',
			textField:'MADES0',
			data:articoli,
			required:true,
			filter: function(q,row){
				return q==row.MACAR0 || q=='';
			}
		}
	}">Articolo</th>