Dear All,

I do face a strange behavior on datagrid once I do load the data it won't do the pagination correctly, the default pageSize is set to 10 in markup and if the loaded data more than 10 it shows on datagrid correctly but the pagination not working as well

so i tried to set the pageSize at run time to 20 and loaded the data and revert it back to 10 then the pagination works well

please help me on this

here are the code:

Code:

<style scoped="scoped">.tb{width:100%;margin:0;padding:5px 4px;border:1px solid #ccc;box-sizing:border-box}.error-message{margin:4px 0 0 0;padding:0;color:red}</style>
<script type="text/javascript">function err(target,message){var t=$(target);if(t.hasClass('textbox-text')){t=t.parent()}
t.next().next().text(message)}</script>
<div id="p_filter" class="easyui-layout" fit="true">
    <div data-options="region:'north',hideCollapsedContent:false,tools:'#p_filter_tools',iconCls:'icon-filter'" title="Filter Tools">
        <div class="container-fluid">
            <form id="form_search">
            <input type="hidden" id="search_category" name="search_category"/>
            <div class="row">
                <div class="col-md-3">
                    <input class="easyui-datebox" id="search_from_date" name="search_from_date" label="From Date:*" labelPosition="top" style="width:100%;">
                </div>
                <div class="col-md-3">
                    <input class="easyui-datebox" id="search_to_date" name="search_to_date" label="To Date:*" labelPosition="top" style="width:100%;">
                </div>
                <div class="col-md-3">
                    <input class="easyui-textbox" id="search_voucher_reference" name="search_voucher_reference" style="width:100%;" data-options="label: 'Voucher Description:',labelPosition: 'top'">    
                </div>
                <div class="col-md-3">
                    <input class="easyui-combobox" id="search_voucher_type_id" name="search_voucher_type_id[]" style="width:100%" data-options="
                        data:accounts.voucher,
                        method:'get',
                        multiple:true,
                        valueField:'id',
                        textField:'text',
                        panelHeight:'auto',
                        label: 'Voucher Type:',
                        labelPosition: 'top'">
                </div>
            </div>
            <div class="row"  style="height: auto; padding-bottom:15px;">
                <div class="col-md-3">
                    <input class="easyui-combobox" id="search_agent_id" name="search_agent_id" style="width:100%" data-options="
                        data:accounts.customer,
                        method:'get',
                        valueField:'id',
                        textField:'text',
                        panelHeight:'auto',
                        label: 'Customer Name:',
                        labelPosition: 'top'">
                </div>
            </div>
            </form>
        </div>
        <div id="p_filter_tools">
            <a href="javascript:void(0)" class="icon-search" onclick="search_voucher()"></a>
            <a href="javascript:void(0)" class="icon-clear" onclick="search_clear()"></a>
        </div>
    </div>
    <div data-options="region:'center',border:false" style="width:100%;height: auto">
        <table id="dg_vouchers" title="Vouchers List" class="easyui-datagrid" fit="true" data-options="
                toolbar:'#vouchers_toolbar',
                singleSelect:'true',
                autoRowHeight:false,
                pagination:true,
                pageSize:10">
            <thead>
                <tr>
                    <th data-options="field:'fid'"                                      hidden="true"></th>
                    <th data-options="field:'vid'"                                      hidden="true">voucher ID</th>
                    <th data-options="field:'vtid'"                                     hidden="true">voucher Type ID</th>
                    <th data-options="field:'voucher_name'"                             width="15%">Voucher Type</th>
                    <th data-options="field:'po_so_id'"                                 width="15%">PO Number</th>
                    <th data-options="field:'voucher_reference'"                        width="10%">Voucher Reference</th>
                    <th data-options="field:'voucher_amount',formatter:formatBalance"   width="10%">Voucher Amount</th>
                    <th data-options="field:'due_amount',formatter:formatBalance"       width="10%">Due Amount</th>
                    <th data-options="field:'voucher_date'"         width="10%">Date</th>
                    <th data-options="field:'inventory_status'"     width="15%">Inventory Status</th>
                    <th data-options="field:'user_full_name'"       width="15%">Created By</th>
                    <th data-options="field:'customer_id'"          hidden="true">Customer ID</th>
                    <th data-options="field:'vendor_id'"            hidden="true">Vendor ID</th>
                </tr>
            </thead>
        </table>
        <div id="vouchers_toolbar">
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnViewVoucher" iconCls="icon-search" plain="true" onclick="view_voucher()">View Voucher</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnRecord" iconCls="icon-sum" plain="true" onclick="record_payment()">Record Payment</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnLog" iconCls="icon-tip" plain="true" onclick="payment_log()">Payment Logs</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" id="btnPDF" iconCls="icon-pdf" plain="true" onclick="get_pdf()">Printable</a>
            <?php if($_SESSION['crm_roles']->rv_add): ?>
            <?php if($dir=='ltr'): ?>
            <span style="float:right">
                <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#transactions_menu'">Transactions List</a>
            </span>
            <?php else: ?>
            <span style="float:left">
                <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#transactions_menu'">Transactions List</a>
            </span>
            <?php endif; ?>
            <?php endif; ?>
        </div>
        <div id="transactions_menu" style="width:200px;">
            <?php if($_SESSION['crm_roles']->rv_add): ?>
            <div onclick="add_payment(2)">Receipt Voucher</div>
            <?php endif; ?>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var c = $('#p_filter');
        var p = c.layout('panel','north');
        var oldHeight = p.panel('panel').outerHeight();
        p.panel('resize', {height:'auto'});
        var newHeight = p.panel('panel').outerHeight();
        c.layout('resize',{
            height: (c.height() + newHeight - oldHeight)
        });
    });
</script>
<script>
    (function($){
        function pagerFilter(data){
            if ($.isArray(data)){    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var target = this;
            var dg = $(target);
            var state = dg.data('datagrid');
            var opts = dg.datagrid('options');
            if (!state.allRows){
                state.allRows = (data.rows);
            }
            if (!opts.remoteSort && opts.sortName){
                var names = opts.sortName.split(',');
                var orders = opts.sortOrder.split(',');
                state.allRows.sort(function(r1,r2){
                    var r = 0;
                    for(var i=0; i<names.length; i++){
                        var sn = names[i];
                        var so = orders[i];
                        var col = $(target).datagrid('getColumnOption', sn);
                        var sortFunc = col.sorter || function(a,b){
                            return a==b ? 0 : (a>b?1:-1);
                        };
                        r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1);
                        if (r != 0){
                            return r;
                        }
                    }
                    return r;
                });
            }
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = state.allRows.slice(start, end);
            return data;
        }

        var loadDataMethod = $.fn.datagrid.methods.loadData;
        var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
        $.extend($.fn.datagrid.methods, {
            clientPaging: function(jq){
                return jq.each(function(){
                    var dg = $(this);
                    var state = dg.data('datagrid');
                    var opts = state.options;
                    opts.loadFilter = pagerFilter;
                    var onBeforeLoad = opts.onBeforeLoad;
                    opts.onBeforeLoad = function(param){
                        state.allRows = null;
                        return onBeforeLoad.call(this, param);
                    }
                    var pager = dg.datagrid('getPager');
                    pager.pagination({
                        onSelectPage:function(pageNum, pageSize){
                            opts.pageNumber = pageNum;
                            opts.pageSize = pageSize;
                            pager.pagination('refresh',{
                                pageNumber:pageNum,
                                pageSize:pageSize
                            });
                            dg.datagrid('loadData',state.allRows);
                        }
                    });
                    $(this).datagrid('loadData', state.data);
                    if (opts.url){
                        $(this).datagrid('reload');
                    }
                });
            },
            loadData: function(jq, data){
                jq.each(function(){
                    $(this).data('datagrid').allRows = null;
                });
                return loadDataMethod.call($.fn.datagrid.methods, jq, data);
            },
            deleteRow: function(jq, index){
                return jq.each(function(){
                    var row = $(this).datagrid('getRows')[index];
                    deleteRowMethod.call($.fn.datagrid.methods, $(this), index);
                    var state = $(this).data('datagrid');
                    if (state.options.loadFilter == pagerFilter){
                        for(var i=0; i<state.allRows.length; i++){
                            if (state.allRows[i] == row){
                                state.allRows.splice(i,1);
                                break;
                            }
                        }
                        $(this).datagrid('loadData', state.allRows);
                    }
                });
            },
            getAllRows: function(jq){
                return jq.data('datagrid').allRows;
            }
        })
    })(jQuery);
</script>

Code:

function unselect_voucher(){
    $('#dg_vouchers').datagrid('unselectAll');
    $('#btnRecord').linkbutton('disable');
    $('#btnLog').linkbutton('disable');
    $('#btnPDF').linkbutton('disable');
}
function search_voucher(){   
    $('#search_category').val('sale');
    $('#dg_vouchers').datagrid('loadData',{"total":0,"rows":[]}).datagrid('clientPaging');
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "<?php echo base_url('pediaerp/auth/get_new_csrf');?>",
        success:function(data){
            $.ajax({
                url : '<?php echo base_url();?>pediaerp/crm/sales/ajax_list_invoice_grid',
                type: "POST",
                data: $('#form_search').serialize() + '&' + data.csrf_name + '=' + data.csrf_token,
                dataType: "JSON",
                success: function(data){

                    $('#dg_vouchers').datagrid('loadData',data).datagrid('clientPaging');
                }
            });
        }
    });
    unselect_voucher();
}

You can call 'expandTo' method to tree to expand to the specified node. Please refer to this code.

Code:

$('#ct').combotree({
	editable: true,
	data: data,
	keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
		query: function(q,e){
			$.fn.combotree.defaults.keyHandler.query.call(this,q,e);
			var t = $(this).combotree('tree');
			var node = t.tree('findBy',{field:'text',value:q});
			if (node){
				t.tree('expandTo', node.target)
			}
		}
	})
})

thanks Jarry for your effort, I tried the code but it only works for the first found exact match, and fails when there is more results

and could you please guide me how to achieve the navigation functionality for the combotree which is defined in datagrid

here is some snipt of code:

var account = $('#dg_invoice_trans').datagrid('getColumnOption', 'account_id');
            account.editor = {
                type:'combotree',
                options:{
                    valueField:'id',
                    treeField:'text',
                    method:'get',
                    data:accounts.coa,
                    selectOnNavigation:true,
                    editable:true,
                    required:true,
                    value: row.account_id,
                    filter: function(q, node){
                        return node.text.toLowerCase().indexOf(q.toLowerCase()) >= 0;
                    },
                    keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
                        enter:function(e){
                            var t = $(this).combotree('tree');
                            t.tree('expandAll');
                        },
                        down: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        up: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        left: function(e){
                            $(this).combotree('tree').trigger(e);
                        },
                        right: function(e){
                            $(this).combotree('tree').trigger(e);
                        }
                    }),
                    onBeforeSelect:function(node){
                        var isLeaf = $(this).tree('isLeaf', node.target);
                        if(!isLeaf){ 
                            return false;
                        } 
                    },
                    onChange:function(value){
                        if(value>0){
                            $.ajax({
                                url:'<?php echo base_url('pediaerp/fam/accounting/ajax_get_account_details/NULL/')?>'+value,
                                type:'GET',
                                dataType:'JSON',
                                success:function(data){
                                    var ed_cost_center_id=$('#dg_invoice_trans').datagrid('getEditor',{index:rowIndex,field:'cost_center_id'});
                                    if(data.mfc_id==2){
                                        $(ed_cost_center_id.target).combotree('enable');
                                    }else{
                                        $(ed_cost_center_id.target).combotree('reset');
                                        $(ed_cost_center_id.target).combotree('disable');
                                    }
                                }
                            });
                        }
                    }
                }
            }

Set the 'editable' property to true for the combotree component.

thanks  Jarry for your effort, but I already set it by the options
can you have a look on attached images

I need it to show like combotree2 as expanded tree for searched result

you help is highly appreciated

Dear all,

first of all I would like to thank you for this lovely UI..

actually I do need some help in searching a combotree which placed in datagrid when I search for some values it shorten the list for the founded records but I need it to expand the tree as well.....

your help is highly appreciated

Dear Stworthy,

thanks for your kind help, seems its working properly now

thanks again and again

Dear EasyUI Team,

am defining combobox editor and textbox editor as follow:
<th style="width:15%;" data-options="field:'material_id',
                                formatter:function(value,row){
                                    return row.material_name;
                                },
                                editor:{
                                    type:'combobox',
                                    options:{
                                        data:accounts.material_dropdown,
                                        method:'get',
                                        valueField:'id',
                                        textField:'text',
                                        required:true,
                                        onChange:function(value){
                                            var row = $('#dg_quotation_trans').datagrid('getSelected');
                                            var rowIndex = $('#dg_quotation_trans').datagrid('getRowIndex', row);
                                            var ed_material_id = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'material_id'});
                                            var ed_old_material_id = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'old_material_id'});
                                            var ed_material_type_id = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'material_type_id'});
                                            var ed_sale_uom = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'sale_uom'});
                                            var ed_sales_tax_id = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'sales_tax_id'});
                                            var ed_tax_value = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'tax_value'});
                                            var ed_tax_percent = $('#dg_quotation_trans').datagrid('getEditor',{index:rowIndex,field:'sales_tax_percent'});
                                            alert($(ed_old_material_id.target).textbox('getValue'));
                                            $.ajax({
                                                url:'<?php echo base_url('pediaerp/wim/materials/ajax_get_material_details/')?>'+value,
                                                type:'GET',
                                                dataType:'JSON',
                                                success:function(data){
                                                    if(data){
                                                        $(ed_sale_uom.target).textbox('setValue',data.sale_abbreviation);
                                                        $(ed_material_type_id.target).textbox('setValue',data.material_type_id);
                                                        if(is_taxable==1){
                                                            $(ed_sales_tax_id.target).combobox('setValue',data.sale_sales_tax_id);
                                                        }else{
                                                            $(ed_sales_tax_id.target).combobox('disable');
                                                            $(ed_tax_value.target).numberbox('setValue',0.000);
                                                            $(ed_tax_percent.target).numberbox('setValue',0.000);
                                                        }
                                                        get_bulk_price();
                                                    }
                                                }
                                            });
                                        }
                                    }
                                }">Material Name</th>
                        <th style="width:5%;" data-options="field:'old_material_id',align:'center',hidden:'true',editor:{type:'textbox'}"></th>

and once am entering edit mode the alert displays no value for old_material_id which already has a value from json

so would you please help me on this??

am stuck here....

Thanks it works, the trick is to add the 2000 to year value

yes it 2 digits, can you help me on this?

Dear All,

am trying to use the following:
        function myformatter(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y.toString().substr(-2)+'.'+(m<10?('0'+m):m)+'.'+(d<10?('0'+d):d);
        }
        function myparser(s){
            if (!s) return new Date();
            var ss = (s.split('.'));
            var y = parseInt(ss[0],10);
            var m = parseInt(ss[1],10);
            var d = parseInt(ss[2],10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                return new Date(d,m-1,y);
            } else {
                return new Date();
            }
        }

its working properly when I choose a date from the calendar, but the issue occurs once I try to write the date directly to datebox field, it will not change to appropriate date such as typing "18.01.15".....

please help me to solve this issue