EasyUI Forum

General Category => General Discussion => Topic started by: Alfred on April 26, 2018, 10:47:26 AM


Title: Programatically added multiple combogrid not working
Post by: Alfred on April 26, 2018, 10:47:26 AM
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
Code:
<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&nbsp;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)
Code:
$(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

Title: Re: Programatically added multiple combogrid not working
Post by: jarry on April 26, 2018, 06:43:24 PM
The datagrid has the built-in editing functionality. You can define the 'combogrid' editor for the 'product' column, append a new row and edit it. After saving the row, the combogrid's row will be updated to the datagrid. For more information please look at this example:

http://code.reloado.com/ipopes/edit#preview

Title: Re: Programatically added multiple combogrid not working
Post by: Alfred on April 26, 2018, 08:19:25 PM
My requirement is that I want to save all the added rows to the database in one go. Another thing is I want to set the value of code and rate and give a value of 1 to the quantity column. My requirement is exactly the same as this one. Please look at this tutorial. http://demo.smarttutorials.net/invoice-script-php/invoice.php (http://demo.smarttutorials.net/invoice-script-php/invoice.php).

Thanks for the reply. I hope you can help me come at the desired solution in easyui.

Regards,
Dove

Title: Re: Programatically added multiple combogrid not working
Post by: jarry on April 27, 2018, 01:21:16 AM
Please look at this updated example http://code.reloado.com/ipopes/2/edit#preview

Title: Re: Programatically added multiple combogrid not working
Post by: Alfred on April 27, 2018, 04:50:48 AM
Thanks Jarry, your answer is great. If I were to do the same, it would take me around half a year. I have one final question though. I want to add more inputs outside the table. When I click the save All Button, I want to send the value of those inputs with the JSON string for saving them into the database. Since the table is not a normal form, I don't know how to do. I am using php. I wonder if you could help me.

Thanks and regards,
Dove


Title: Re: Programatically added multiple combogrid not working
Post by: jarry on April 27, 2018, 08:29:50 PM
It's simple to post the data to server, just wrap it with a <form> and post this form's data. For more information please take a look at this example.

http://code.reloado.com/ipopes/3/edit#preview

Title: Re: Programatically added multiple combogrid not working
Post by: Alfred on April 28, 2018, 10:03:04 AM
Thanks a million. It works fine. You are the hero. Why do I need to press enter key to update the tax. Why is it not updating while typing.
Here is my attempt which is not working, I still have to press Enter key.
Code:
$('#tax').textbox({
inputEvents:$.extend({},$.fn.numberbox.defaults.inputEvents,{
keyup:function(e){
calc();
}
})
})

Title: Re: Programatically added multiple combogrid not working
Post by: jarry on April 28, 2018, 03:46:33 PM
You do not need to press enter. Focus out will trigger the onChange event that will call the calc function.


Powered by SMF 1.1.18 | SMF © 2013, Simple Machines