Thanks for the tip. In fact, my question is asking for the easyui version for my jqueryUI code. My jqueryui code works fine. But I need the solution using easyui alone. I want to completely remove the jqueryui code and use only the easyui. Hope you can help me.

Thanks

[j]

I am using the following JqueryUI autcomplete code for my personal project, but it conflicts with easyui.

Code:

$(document).on('focus','.autocomplete_txt', function(){
    type = $(this).data('type');   
    if(type =='batch' ) autoTypeNo=0;
    if(type =='name' ) autoTypeNo=1;    
    $(this).autocomplete( {
        source: function( request, response ) {
            $.ajax({
                url : 'loaditems.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $j.map( data, function( item ) {
                        var code = item.split("|");//data from loaditem.php are separated with pipe
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,            
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                        
            id_arr = $(this).attr('id');
            id = id_arr.split("_");         
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itempName_'+id[1]).val(names[1]);          
            $('#quantity_'+id[1]).val();
            $('#price_'+id[1]).val(names[2]);
            $('#total_'+id[1]).val( 1*names[2] );
            $('#itemtid_'+id[1]).val(names[3]);
            $('#catid_'+id[1]).val(names[4]);
            $('#itemUnit_'+id[1]).val(names[5]);
            $('#drid_'+id[1]).val(names[6]);
            calculateTotal();
        },
        open: function(event, ui) {
             $(".ui-autocomplete").css("z-index", 90009);
         }              
    });
});

So I used this workaround:

Code:

var $j = $.noConflict(true);

and added j to every $ of the JqueryUI version. The best Easyui Version I come across the forum and the site is combobox . But after several attempts, I could not come to solution because my combox is in a loop. Here is the jquery loop where I am trying to put the combobox.

Code:

$(document).ready(function() {     
    var i=$('#dlg table tr').length;
    $(".addmore").on('click', function(){
        console.log('test');
        html = '<tr>';
        html += '<td><input class="case" type="checkbox"/></td>';
        html += '<td><input type="text" style="width:100%;" data-type="batch" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off" placeholder="Scan Barcode"></td>';
        html += '<td><input type="text" data-type="name" name="itempName[]" id="itempName_'+i+'" class="form-control autocomplete_txt" autocomplete="off" style="width:100%;" placeholder="Item Name"></td>';
        html += '<td><input class="form-controller man" name="itemUnit[]" id="itemUnit_'+i+'" data-type="itemUnit" style="width:100%;" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '<td><input type="hidden" data-type="drid" name="drid[]" id="drid_'+i+'" class="autocomplete_txt did" autocomplete="off"><input type="hidden" data-type="id" name="itemtid[]" id="itemtid_'+i+'" class="autocomplete_txt pid" autocomplete="off"><input type="number" value="1" style="width:100%;" min="1" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '<td><input type="number" min="1" style="width:100%;" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"><input type="hidden" name="catid[]" id="catid_'+i+'" class="autocomplete_txt" autocomplete="off"></td>';
        html += '<td><input type="number" min="1" style="width:100%" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '</tr>';
        $('#dlg table').append(html);
        i++;
    });
});

When I used combobox, it did not come in the newly added row when user click add-more button. It works only with the first row.

I would love to see if the same JqueryUI code can be achieved with Easyui alone.
Thanks

Yes I learnt that this is not necessary. It's only my assumption before I actually tested it. I added

Code:

autoSave:true,

and that was exactly I was looking for. It worked fine now. Thanks.

This code works fine. But I want reload the datagrid and add new row. Is that possible and How?

onBeginEdit: function(index,row){
                  var dg = $(this);
                  var editors = dg.edatagrid('getEditors',index);
                  for(var i=0; i<editors.length; i++){
                    $(editors.target).textbox('textbox').bind('keydown',function(e){
                      if (e.keyCode == 13){
                        dg.edatagrid('endEdit', index);
                        // if (index<dg.edatagrid('getRows').length-1){
                        //   dg.edatagrid('selectRow', index+1).edatagrid('beginEdit', index+1);
                        // }
                        //$('#dg').edatagrid('reload');
                        $('#dg').edatagrid('addRow');
                      }
                    });
                  }
                  if (editors.length){
                    $(editors[0].target).textbox('textbox').focus();
                  }
              }

I have the following code for my edatagrid. And it works fine. But I need a feature: save data on hitting Enter Key.

$('#dg').edatagrid({
                url: 'get_customer.php',
                saveUrl: '../controller/save_customer.php',
                updateUrl: '../controller/update_customer.php',
                destroyUrl: '../controller/destroy_customer.php'
});

Thanks Jerry, But your code does not include the footer: I use below code to solve my problem. I also solved the bold column header now using the strong tag in the table code. One more feature I would like to add is adding the caption of the table with extra parameter in the method like: $('#dg').datagrid('toExcel','Customer.xls','List of Customer');. I am trying something to caption tag using insertBefore, but it always outputs `undefined` when opened in Excel 2013. And It does not merge the column also.

Here is the working code without the caption.

$.extend($.fn.datagrid.methods, {
    toExcel: function(jq, filename){
        return jq.each(function(){
            var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

           
            var alink = $('<a style="display:none"></a>').appendTo('body');
            var view = $(this).datagrid('getPanel').find('div.datagrid-view');           
            var table = $(this).datagrid('getPanel').find('div.datagrid-view2').clone();
           
            var tbody = table.find('>tbody');
           
            view.find('div.datagrid-view1 table.datagrid-btable>tbody>tr').each(function(index){
                $(this).clone().children().prependTo(tbody.children('tr:eq('+index+')'));
            });

            var ctx = { worksheet: name || 'Worksheet', table: table.html()||'' };
            alink[0].href = uri + base64(format(template, ctx));
            alink[0].download = filename;
            alink[0].click();
            alink.remove();
        })
    }
});

I have got this code from this forum: When I use the code in my application. The exported excel does not bold the column header?

Code:

$.extend($.fn.datagrid.methods, {
    toExcel: function(jq, filename){
        return jq.each(function(){
            var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

            var alink = $('<a style="display:none"></a>').appendTo('body');
            var view = $(this).datagrid('getPanel').find('div.datagrid-view');
            var table = $(this).datagrid('getPanel').find('div.datagrid-view2').clone();
            var tbody = table.find('>tbody');
            view.find('div.datagrid-view1 table.datagrid-btable>tbody>tr').each(function(index){
                $(this).clone().children().prependTo(tbody.children('tr:eq('+index+')'));
            });
            var ctx = { worksheet: name || 'Worksheet', table: table.html()||'' };
            alink[0].href = uri + base64(format(template, ctx));
            alink[0].download = filename;
            alink[0].click();
            alink.remove();
        })
    }
});

Is there any way to append caption tag for the title of the table?

Thanks very much, this works.

I have tried the following code to open a window using javascript:

Code:

<div id="expwin" class="easyui-window">
   <table id="expdg"></table>
</div>

Code:

$('#expwin').window({'onOpen',
      		function(){
			     var t = $('#expdg').datagrid({
			      	url:'get_expiring.php',		     
			      	toolbar: '#exptoolbar',
			      	pagination:true,
			        columns:[[
			            {field:'drugname',title:'name',width:100},
			            {field:'batchno',title:'batch',width:100},
			            {field:'pack',title:'package',width:100},
			            {field:'qps',title:'qpur',width:100},
			            {field:'qs',title:'qsold',width:100},
			            {field:'qout',title:'qout',width:100},
			            {field:'entrydate',title:'endate',width:100},
			            {field:'mdate',title:'mdate',width:100},
			            {field:'expdate',title:'edate',width:100,align:'right'}
			        ]]
			    });
			      return t;
			}
		});

To open the window:

Code:

<div class="t-list" onclick="$('#expwin').window('open')">test</div>

The problem is that there is no error in the console, and this does not populate the datagrid table as well. I want to populate the datagrid with data from get_expiring.php when I click test. How can I achieve this?

Thanks, Jarry. It works like a charm.

I want to show detail view of datagrid using onDblClick. I am using this example http://www.jeasyui.com/tutorial/datagrid/datagrid21.php.

Code:

<table class="easyui-datagrid" 
    data-options="onDblClick:function(index, row){
       //view: detailview; I don't know how to expand it from here like clicking the plus symbol
}">

Thanks

Thanks sir. My initial problem is in setting the new value in an input form in a dialogue. I have seen your other post here in the forum and I did tried them. But when it comes to a form in a dialogue, it does not work. But when I enclose it using anonymous:

Code:

$(function(){ 
//the code
});

it works.

I just found the answer. I don't know whether it is the right way to do.

Code:

$('#pSize').textbox({
            onChange: function(){               		
                var qnt = parseFloat($(this).textbox('getValue'));                
                $('#qnty').textbox('setValue', qnt);
            }
        });

   

Code:

var q = $('#qnty');
    var t = $('#pSize');
    t.textbox('textbox').bind('change keyup blur keydown', function(e){
         q.textbox('setValue', $(this).val());
});

I am trying to set the value in pSize to qnty using the above but it does not yield any result nor error. My form is in the dialogue. Is it a bug or is there something missing in the code? Your help is greatly appreciated.