Datagrid - Search fields in columns headers

[mapner]

Hello,

In a DataGrid I want to put search fields in each header .

I try this:

Code:

<table id="g-cus" title="Data" class="easyui-datagrid" style="width:auto;height:auto;"
url="../php/go.php?action=G" 
fitColumns="true" singleSelect="true">
<thead>
  <tr>
    <th field="lastname" width="60"  sortable="true">Last Name<br />
	<input id="q_lastname" placeholder="Input Last Name" style="width:280px;border:1px solid #ccc"></th>
        <th field="firstname" width="60"  sortable="true">First Name<br />
	<input id="q_firstname" placeholder="Input First Name" style="width:280px;border:1px solid #ccc"></th>
        <th field="q_state" width="60"  sortable="true">State<br />
	<select id="cg-state" name="state" style="width:200px;"></select></th>
  </tr>
</thead>
</table>
<script>
 $(function(){  
    $('#cg-state').combogrid({
      panelWidth:450,
      idField:'state_id',
      textField:'state_name',
      url:'../php/states.php?action=G',
      mode:'remote', 
      columns:[[          
      {field:'state_id',title:'ID',hidden: true, width:30} ,        
      {field:'state_name',title:'Name',width:320}          
      ]]
    });  
</script>

For the input text fields work fine, but for the combogrid (or a common select combobox) don't drop-down the options.
Seems that the container space in the header is insufficient for this.
How could I solve it?

thanks

 

[stworthy]

You are missing '}' in your script, please correct it.

Code:

<script>
 $(function(){  
    $('#cg-state').combogrid({
      panelWidth:450,
      idField:'state_id',
      textField:'state_name',
      url:'../php/states.php?action=G',
      mode:'remote', 
      columns:[[          
      {field:'state_id',title:'ID',hidden: true, width:30} ,        
      {field:'state_name',title:'Name',width:320}          
      ]]
    });  
 });
</script>

[mapner]

Stworthy,

Sorry, the missing   }); is an typo in the the forum message, but the concept is the same.
When I use any drop-down widget in a column header (combo, combobox, combogrid, date input), this dont work correctly. I think that use it this feature will give more functionallity for data filtering (local or remote) to JQuery EasyUI (BTW a great Javascript framerwork).

thanks

[stworthy]

Try running the example below:
http://jsfiddle.net/dYbKz/

[mapner]

Ok Stworthy!

Work fine!!

Thank you!!!