This method is effective. I used the HTML tag <a href> instead of the button element because clicking on a button automatically submits the form.


Thanks.

A multi-step form is beneficial when we have a lot of data to save in a database. Could you please explain how to create a form wizard using EasyUI? Additionally, is there an extension or demo available in EasyUI?

Thanks

If I enable cell editing, row can no longer be selected. Is this a normal behaviour or a bug?

Code:

$('#ledger').datagrid({
    clickToEdit: true,
 }).datagrid('enableCellEditing').datagrid('gotoCell', {
    index: 0,
    field: 'voucher'
 });

Row can no longer be single selected.

Thanks.

How do I increase the size the default icons which are 16×16 to something like 20×20?  For example, if I increase the user icon png image to 20×20, the full image will not appear when I use it on iconCls="" such as below.  How do I increase the button size to meet the size of the icon? Is there any CSS hack to achieve it?

Code:

<a href="#" iconCls="icon-user" class="easyui-linkbutton"></a>

Thanks,
Alfred

Thanks a million Jarry. it is fixed.

There can be many depending on your requirements. I think the tutorials [https://www.jeasyui.com/tutorial/index.php][/url] and the demo are kinds of template.

Thanks for the reply. Now all the exported columns are center aligned. I have tested with the following codes:

Code:

<th field="id" halign="center" width="20" sortable="true" align="left">Id</th>
<th field="note" halign="center" width="20" sortable="true" align="left">Note</th>
<th field="entrydate" halign="center" width="20" sortable="true" align="center">Note</th>

I all the column names to be centered, so I used

Code:

halign="center"

however in the printed html all columns are aligned center regardless of the

Code:

align="left"

being used. I hope you can fix the issue.

Thanks and regard,

Alfred

The caption and the footer work. but how do I style the caption? In addition the alignment does not work. Amount here is aligned right, but in the printed output it is aligned left.

Code:

<table id="dg" class="easyui-datagrid" url="data.php" showFooter="true">
   <thead>
        <tr>
            <th field="note" halign="center" width="20" sortable="true" align="left">Item</th>
            <th field="amount" halign="center" width="20" sortable="true" align="right">Amount</th>
   </thead>
</table>
function printList(){
   $('#dg').datagrid('print', {
        title:"List of Data",
        caption: 'List of Data',
        footer: $('#dg').datagrid('getFooterRows')
    });
}

Regards.
Alfred

The export datagrid feature is very nice. However, It does not include the footer summary in the result. How do I include the footer summary in the exported table? Is it possible to include our own table caption in the exported version? Normally I used MPDF and phpspreadsheet but when it comes to directly printing html I prefer datagrid export extension. Please can you add the following features:

• Include footer summary in the exported table
• Include option for passing table caption in the exported table

Reference: https://www.jeasyui.com/extension/datagrid_export.php

Regards,
Alfred

Thanks. This works fine

Code:

var dial = $('#infp');
dial.dialog('options').onResize = function(w,h){
//
}

Is it possible to get the dialog width and height as we resize.

Code:

var d = $('#infp');//dialog selector
d.dialog('onResize',function(w,h){
   var newheight = h;
   var newwidth = w;
})

This does not work. This code is inside the dialog, which content is loaded remotely.

Thanks and regards,
Alfred

Thanks, it works.

I need to check if a combogrid exist. I used the following code but it does not work..

Code:

if(!('#mycombo').combogrid('grid')){
   //combogrid does not exist
} else {
  //combogrid exist
}

Regards,
Alfred

Thanks for the reply.

Your example just works fine, yet the error still exists in my attempted code. It may be due to the way the pagination works. In your example the pagination is not included. I am using jquery 1.12.4. and easyui 1.7.x.

Thanks for the reply.

the datagridview.php contains a a datagrid definion. It has a different url for getting the datagrid json. So the complete code looks like below:

This code is in index.php:

Code:

function openDialog(){
    $('body').desktop('openApp', {
         href:'datagridview.php',  
         //other code
    });
}

We have another file datagridview.php, which has the following datagrid code:

Code:

<table id="dg" data-options="url:view.php" class="easyui-datagrid">
         <th field="categoryName" halign="center" width="20" sortable="true" align="left">Category</th>
          //other codes follow
</table>

So when we run

Code:

openDiaglog()

function, It opens a new dialog. Inside the dialog, we have a datagrid that will load json from view.php. So the error still exists. The complete console error is:

TypeError: $.data(...) is undefined easyui.min.js:1:245666
    getPager http://test.com/js/easyui.min.js:1
    datagrid http://test.com/js/easyui.min.js:1
    loaded http://test.com/js/easyui.min.js:1
    jQuery 2
    loaded http://test.com/js/easyui.min.js:1
    datagrid http://test.com/js/easyui.min.js:1
    _78f http://test.com/js/easyui.min.js:1
    success http://test.com/js/easyui.min.js:6
    jQuery 4

I hope you can fix the error.

Thanks and regards,
Alfred