Dear sir,

I used Numberspinner with Mobile mode but can not click on button (+/-) when display on mobile phone. Could you please advice.

Could you please provide an example of using Datagrid Scrollview + Cardview together? I tried creating a Datagrid Cardview first and added the data-options with view:scrollview, but it didn't work.

ps. I successfully created a Datagrid Scrollview with remote load.

Code:

    <table id="GridPanel1" border="false" data-options="view:scrollview,singleSelect:true,rownumbers:true,pageSize:50,idField:'GID',autoRowHeight:false,showHeader:false">
        <thead>
            <tr>
                <th data-options="field:'GID',hidden:false">GID</th>
                <th data-options="field:'product',hidden:true,width:'20%'">Product</th>
                <th data-options="field:'short_title',hidden:true,width:'20%'">Title</th>
                <th data-options="field:'published',hidden:true,width:'10%'">Publish</th>
                <th data-options="field:'authors',hidden:true,width:'20%'">Author</th>
                <th data-options="field:'quote',hidden:true,width:'10%'">Quote</th>
                <th data-options="field:'PNV',hidden:true,width:'10%'">PNV</th>
            </tr>                        
        </thead>
    </table>  

Code:

var cardview = $.extend({}, $.fn.datagrid.defaults.view, {
            renderFooter: function (target, container, frozen) {
                var opts = $.data(target, 'datagrid').options;
                var rows = $.data(target, 'datagrid').footer || [];
                var fields = $(target).datagrid('getColumnFields', frozen);
                var table = ['<table class="datagrid-ftable" cellspacing="0" cellpadding="0" border="0"><tbody>'];

                for (var i = 0; i < rows.length; i++) {
                    var styleValue = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : '';
                    var style = styleValue ? 'style="' + styleValue + '"' : '';
                    table.push('<tr class="datagrid-row" datagrid-row-index="' + i + '"' + style + '>');
                    table.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
                    table.push('</tr>');
                }

                table.push('</tbody></table>');
                $(container).html(table.join(''));
            },
            renderRow: function (target, fields, frozen, rowIndex, rowData) {
                var cc = [];
                cc.push('<td colspan=' + fields.length + ' style="padding:1px 10px 1px 10px;border:0;width:360px !important;">');
                if (!frozen && rowData.GID) {
                    cc.push('<div class="dash">');
                    cc.push('<table style="width:100%;border:none;border-collapse:collapse;">');
                    cc.push('<tr>');
                    .......
                    cc.push('</tr>');
                    cc.push('</table>');
                    cc.push('</div>');
                }
                cc.push('</td>');
                return cc.join('');
            }
        });

I got it. Thank you

I try to filter datagrid with asp.net but I don't understand the logic of datagrid33_getdata.php.
Could you please share code how datagrid33_getdata.php filter textbox field from database.

Thank you very much.

Thank you every one. I got temporary solution  by using tag span wrap textbox and bind context menu to span.

Code:

        $('#textbox1span').bind('contextmenu',function(e){
            e.preventDefault();
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        });

I try the code below

Code:

<input class="easyui-textbox" id="textbox1">

<div id="mm" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-copy'">Copy</div>
    <div data-options="iconCls:'icon-cut'">Cut</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-paste'">Paste</div>            
</div>

$(document).ready(function (data) {
    $(document).bind('contextmenu', function (e) {
        var t = $(e.target).closest('.validatebox-text');
        if (!t.length) {
            e.preventDefault();
            $('#mm').menu('show', {
                left: e.pageX,
                top: e.pageY
            });
        }  
    });
});

When right click any position on display will show contextmenu 'mm'
but I want to show contextmenu when right click at textbox1 only.

Could you please advice? Many Thank.

On Android has the same behavior too.

Thank you very much. 

Could you please add event 'onNavigate' to Documentation?

  Wow, Work Great! You save my day. Thank you

Dear Sir,

I would like to update some cell value after close update window without reload datagrid.
But after used updateRow method the column formatter that display linkbutton disappear only updated row.
Could you advice how to correct.

Code:

<script type="text/javascript">
            function fmCmd(value, row) {
                var cmd = '<a href="javascript:void(0)" onclick="setTimeout(function() {' + 'viewPatron(\'GridPatron\',0)},500)' + '" class="easyui-linkbutton" iconCls="icon-aim" title="Open Update Window"></a>';
                return cmd;
            }
            
            function updateLastAct(last_action) {
                var selectedRow = $('#GridPatron').datagrid('getSelected');
                var rowIndex = $('#GridPatron').datagrid('getRowIndex', selectedRow);
                $('#GridPatron').datagrid('updateRow', {
                    index: rowIndex,
                    row: {
                        last_act: last_action
                    }
                });
        }           
</script>

<table id="GridPatron" class="easyui-datagrid" border="true" idField="id" 
                data-options="
                    url: 'getPatrons.ashx',
                    method: 'post',
                    fit: true,
                    pagination: true,
                    singleSelect: true,
                    },
                    onLoadSuccess:function(data){
                        $(this).datagrid('getPanel').find('a.easyui-linkbutton').linkbutton();                        
                    }
                ">
                <thead>
                    <tr>                        
                        <th data-options="field:'expire',align:'center',resizable:true" width="9%"><b>Expire</b></th>
                        <th data-options="field:'last_act',align:'left',resizable:true" width="12%"><b>Last Activity</b></th>	
                        <th data-options="field:'id',align:'center',formatter:fmCmd" width="9%"><b>Command</b></th>									
                    </tr>
                </thead>
</table>

Thank you for you help.

Work great!  Thank you

I tried code but not work.

Code:

$('#sb').searchbox('textbox').attr('maxlength', 10);

And how to set searchbox accept only numeric.


Thank you.

OK. I got a trick.

Code:

var p = $('#itemckout').layout('panel', 'expandSouth'); // id of layout
p.panel('setTitle', 'Item Detail: ' + row.item_barcode + " " + row.title );

I define south panel like this.

Code:

<div id="ItemCheckoutDetail" data-options="region:'south',border:true,collapsible:true,hideCollapsedContent:false" style="height:50%;">

when I click row in datagrid on center panel I set title of south panel title with selected row data.

$('#ItemCheckoutDetail').panel({ title: 'Item Detail: ' + row.item_barcode + " " + row.title  });
$('#ItemCheckoutDetail').panel({ collapsedContent: 'Item Detail: ' + row.item_barcode + " " + row.title });

But the title of south panel when is collapsed not update with selected row.

Could you please advice. Thank you.

try to set iframe: false,

Code:

$('#ff').form('submit', {
	                iframe: false,
	                url: 'saveFormPatronStatus.ashx',
	                onSubmit: function(param) {
	                    param.id = id;
	                    param.barcode = barcode;
	                    param.status = status;
	                    var isValid = $(this).form('validate');
	                    if (!isValid) {
	                        $.messager.progress('close'); // hide progress bar while the form is invalid
	                    }
	                    return isValid;
	                },
	                success: function(result) {
	                    console.log(result);
	                }
	            })