In JqueryUI autocomplete, what I am asking could be easily achieved. I tried all day long to make it work, still it does not. See the code I am working on:
HTML
<div class="easyui-panel" fit="true" style="padding:20px;">
<form id="fm" method="post" novalidate>
<table align="center" style="width:100%; padding:20px;" id="tTable">
<tr>
<th align="center" width="5%"><input id="check_all" type="checkbox" tabindex="-1" /></th>
<th align="center" width="35%">Description</th>
<th align="center" width="25%">Code No</th>
<th align="center" width="15%">Quantity</th>
<th align="center" width="15%">Rate</th>
</tr>
<tr>
<td align="center"><input class="case" type="checkbox" tabindex="-1" /></td>
<td align="center"><input style="width:100%" class="psearch" data-type="product" name="product[]" id="product_1"></td>
<td align="center"><input style="width:100%" class="psearch" data-type="code" name="code[]" id="code_1"></td>
<td align="center"><input style="width:100%" class="easyui-textbox change" name="quantity[]" id="quantity_1"></td>
<td align="center"><input style="width:100%" class="easyui-textbox change" name="rate[]" id="rate_1"></td>
</tr>
</table>
<div>
<a href="#" id="del" class="easyui-linkbutton" iconCls="icon-cancel">Delete</a>
<a href="#" id="add" class="easyui-linkbutton" iconCls="icon-add">Add More</a>
</div>
</form>
</div>
JS (Easyui)
$(document).ready(function() {
$('.psearch').combogrid({
mode:'remote',
panelWidth:500,
method:'get',
url: 'product.php',
queryParams: {
type: 'product'
},
idField:'id',
textField:'description',
columns: [[
{field:'description',title:'Description',width:120,sortable:true},
{field:'code',title:'Code No',width:60,sortable:true},
{field:'uqc',title:'UOM',width:50,sortable:true},
{field:'quantity',title:'Qnty',width:40,sortable:true},
{field:'rate',title:'Rate',width:50,sortable:true},
]],
fitColumns:true,
onSelect:function(index, row) {
var hl = $('#tTable').closest('tr').find('input');
}
});
var i=$('#fm table tr').length;
$("#add").on('click', function(){
html = '<tr>';
html += '<td align="center"><input class="case" type="checkbox" tabindex="'+(-1)+'" /></td>';
html += '<td align="center"><input style="width:100%" class="psearch" name="product[]" data-type="product" id="product_'+i+'"></td>';
html += '<td align="center"><input style="width:100%" class="psearch" data-type="code" name="code[]" id="code_'+i+'"></td>';
html += '<td align="center"><input style="width:100%" class="easyui-textbox change" name="quantity[]" id="quantity_'+i+'"></td>';
html += '<td align="center"><input style="width:100%" class="easyui-textbox change" name="rate[]" id="rate_'+i+'"></td>';
html += '</tr>';
$('#tTable').append(html);
i++;
});
});
$(document).on('change','#check_all',function(){
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
$(document).ready(function() {
$("#del").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
});
});
In JQueryUI, when we add more rows, the
psearch class is automatically identified as autocomplete. But Combogrid could not be detected. Another problem here is I could not set the value of the other combogrid and input text(quantity and rate) when I select the item in the first row of the description column. Of course, adding more rows with combogrid is not possible at all. Though I could make it work in jQueryUI, I want its version in Easyui. I don't want to depend on JQueryUI. Please help.
Regards
Dove