Chinese input is different from English input, like "我", you have to type "wo" and then choose a chines word "我" from the popped up list, but the ajax has posted "wo" before i could choose "我". so I hope it waits until I could choose a word. And when in the situation of local filtering I hope it doesn't need to me to keypress the return to do the filtering when I have finished type a Chinese word.

Hi, I really need help to deal with two things in relation to filtering.
1.When set the datagrid remote filtering, the  ajax post happens right after one key is pressed down, which is good for English word, but not fit for Chinese word. Please help me make remote filtering send ajax post after inputting a whole chinese word.
2.When set the datagrid local filtering, the local filtering doesn't happen after I have finished inputting a Chinese word until I click the 'return' key again. I want to make it react instantly like dealing with  an Enlish letter, how?
Thanks in advance.

Hi, my question is how to add some customized buttons to an existing pagination-bar of a datagrid, like a print button. My datagrid is with sever side pagination.
when i run the code  "$('#dg').datagrid('getPager');" a error always appears :TypeError: $.data(...) is undefined : return $.data(jq[0],"datagrid").panel.children("div.datagrid-pager");

thank you. switchbutton fits me well.

Hi, I want to find the list of events the checkbox editor surports, because the document  doesn't  list the checkbox editor, so I wonder what are its events and methods. thanks in advance. And I want to know what kind of event happens when I check the checkbox?

Hi, i find a problem in my codes, and can't fix it for nealy a week longer, and have to report it here.
I have an editable datagrid, which has an nested subgrid. After I delete all rows of the main grid , then i want to add a new first row again,  but the new row doesn't appear (it only flashes then disappears.) until i  click "AddNew" button of toolbar  the second time.  In order to demo this problem , I modify my codes like below, and ommit the server side codes of CRUD. You have to add the CRUD in your environment if you want to observe the odd problem. If I delete the codes section 'subgrid : {......}' , the problem will disappear, but another problem appears: the new added row has a row number of -9 not 1.

<table id="dg"></table>
<script type="text/javascript">
   var conf = {
      options : {
         rownumbers : true,
         striped : true,
         fitColumns : false,
         nowrap : false,
         fixed : true,
         idField : 'id',
         pagination : true,
         singleSelect : false,
         autoSave : false,
         url : "/getData",
         saveUrl : "/saveData",
         destroyUrl : "/deleteData",
         updateUrl : "/updateData",
         edatagrid : true,
         autoUpdateDetail : false,
         toolbar : [ {
            iconCls : 'icon-add',
            text : 'AddNew',
            handler : function() {

               $(this).datagrid('getSelfGrid').edatagrid('addRow');

            }
         }, {
            iconCls : 'icon-remove',
            text : 'Delete',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('destroyRow');
            }
         }, {
            iconCls : 'icon-save',
            text : 'Save',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('saveRow');
            }
         }, {
            iconCls : 'icon-undo',
            text : 'Cancel',
            handler : function() {
               $(this).datagrid('getSelfGrid').edatagrid('cancelRow');
            }
         } ],
         onSuccess : function(index, row) {
            $(this).datagrid('reload');

         },
         columns : [ [ {
            field : 'id',
            title : 'ID',
            width : 100,
            hidden : true
         }, {
            field : 'name',
            title : 'Name',
            width : 200,
            editor : {
               type : 'textbox'
            }
         }, {
            field : 'number',
            title : 'Number',
            width : 200,
            editor : {
               type : 'textbox'
            }
         } ] ]
      },
      subgrid : {
         options : {
            fitColumns : true,
            foreignField : 'id',
            columns : [ [ {
               field : 'orderdate',
               title : 'Order Date',
               width : 200
            }, {
               field : 'shippeddate',
               title : 'Shipped Date',
               width : 200
            }, {
               field : 'freight',
               title : 'Freight',
               width : 200
            } ] ],
            data : [ {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            }, {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            }, {
               orderdate : '08/23/2012',
               shippeddate : '12/25/2012',
               freight : 9734
            } ]
         }

      }
   };

   $(function() {
      $('#dg').edatagrid({
         title : 'xxxxx',
         width : '100%',
         height : '100%'
      }).datagrid('subgrid', conf);
   });
</script>

it works now. thank you very much.

I want to set the default value of textbox and the default selected option of checkbox in a new added row, but the default values don't show, I don't know why. My codes are like below:

<html>
<head>
<meta charset=utf-8 />
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
</head>
<body>
 <table id="dg"></table>

<script type="text/javascript">
var conf = {
    options:{
        fitColumns:true,
        autoUpdateDetail:false,
        toolbar : [ {
        iconCls : 'icon-add',
        text : 'new',
        handler : function() {
           $('#dg').edatagrid('addRow');


        }
     }, '-', {
        iconCls : 'icon-remove',
        text : 'del',
        handler : function() {

           $(this).datagrid('getSelfGrid').edatagrid('destroyRow');

        }
     }, '-', {
        iconCls : 'icon-save',
        text : 'save',
        handler : function() {

           $(this).datagrid('getSelfGrid').edatagrid('saveRow');
        }
     }, '-', {
        iconCls : 'icon-undo',
        text : 'cancel',
        handler : function() {
           $(this).datagrid('getSelfGrid').edatagrid('cancelRow');
        }
     } ],
        columns:[[
          {field:'company',title:'Company Name',width:200,editor: {type:'textbox',options:{value:"xxxxxxxxxxx"}}},
            {field:'contact',title:'Contact Name',width:200,editor : {type:'combobox',options:{
                     data : [ {
                        label : 'A',
                        value : 'a'
                     }, {
                        label : 'B',
                        value : 'b',
                                selected :true
                     } , {
                        label : 'C',
                        value : 'c'
                     } ],
                     panelHeight : 'auto',
                     valueField : 'value',
                     textField : 'label'
                           
                  }}},
            {field:'country',title:'Country',width:200,editor : 'text'}
        ]],
        data:[
            {company:'Speed Info',contact:'Minna John',country:'Sweden'}
        ]
    },
    subgrid:{
        options:{
            fitColumns:true,
            foreignField:'companyid',
            columns:[[
                {field:'orderdate',title:'Order Date',width:200},
                {field:'shippeddate',title:'Shipped Date',width:200},
                {field:'freight',title:'Freight',width:200}
            ]],
            data:[
                {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734},
                {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734},
                {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734}
            ]
        },
        subgrid:{
            options:{
                fitColumns:true,
                foreignField:'orderid',
                columns:[[
                    {field:'price',title:'Unit Price',width:200,align:'right'},
                    {field:'quantity',title:'Quantity',width:200,align:'right'},
                    {field:'discount',title:'Discount',width:200,align:'right',formatter:function(value){
                        return value*100+'%';
                    }}
                ]],
                data:[
                    {price:923,quantity:2312,discount:0.2}
                ]
            },
            subgrid:{
                options:{
                    fitColumns:true,
                    foreignField:'pid',
                    singleSelect:true,
                    columns:[[
                        {field:'pnumber',title:'Product Number',width:200},
                        {field:'pname',title:'Product Name',width:200},
                        {field:'supplier',title:'Supplier',width:200}
                    ]],
                    data:[
                        {pnumber:'00100823',pname:'Canon PowerShot A1300',supplier:'Canon'},
                        {pnumber:'12023423',pname:'Cisco RV110W-A-NA-K9',supplier:'Cisco'},
                        {pnumber:'82312393',pname:'Nikon COOLPIX L26 16.1 MP',supplier:'Nikon'}
                    ]
                }
            }
        }
    }
};

$(function(){
    $('#dg').edatagrid({
        title:'DataGrid - Nested SubGrid',
        width:700,
        height:300
    }).datagrid('subgrid', conf);
});
</script>
</body>
</html>

After i update to the 3 files: jquery-easyui-1.4.5 , jquery-easyui-datagridview, jquery-easyui-edatagrid, the codes work fine now. Thank you friend.

i try running in safari and firefox, but it doesn't work fine. but in Reloado.com it works fine.

i add the 'autoUpdateDetail:false', but the problem is same. please run the code and kill the bug, sir.

Hi, I find a bug in the frame, demonstrating here through the codes below.  When you don't  expand the row in main grid, you can add a new row correctly, but when you expand the row and make the nested subgrid appear, you can't add the new row properly.
here is codes:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Loading nested subgrid data - jQuery EasyUI Demo</title>
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
    </head>
    <body>
        <h2>Loading nested subgrid data</h2>
        <p>Click the expand button to expand row and view subgrid.</p>

        <table id="dg"></table>
        <script type="text/javascript">
            var conf = {
                options:{
                    fitColumns:true,
                    toolbar : [ {
                    iconCls : 'icon-add',
                    text : 'new',
                    handler : function() {
                       $('#dg').edatagrid('addRow');


                    }
                 }, '-', {
                    iconCls : 'icon-remove',
                    text : 'del',
                    handler : function() {
                       commitCase = true;
                       $(this).datagrid('getSelfGrid').edatagrid('destroyRow');

                    }
                 }, '-', {
                    iconCls : 'icon-save',
                    text : 'save',
                    handler : function() {
                       commitCase = true;
                       $(this).datagrid('getSelfGrid').edatagrid('saveRow');
                    }
                 }, '-', {
                    iconCls : 'icon-undo',
                    text : 'cancel',
                    handler : function() {
                       commitCase = true;
                       $(this).datagrid('getSelfGrid').edatagrid('cancelRow');
                    }
                 } ],
                    columns:[[
                        {field:'company',title:'Company Name',width:200},
                        {field:'contact',title:'Contact Name',width:200},
                        {field:'country',title:'Country',width:200}
                    ]],
                    data:[
                        {company:'Speed Info',contact:'Minna John',country:'Sweden'}
                    ]
                },
                subgrid:{
                    options:{
                        fitColumns:true,
                        foreignField:'companyid',
                        columns:[[
                            {field:'orderdate',title:'Order Date',width:200},
                            {field:'shippeddate',title:'Shipped Date',width:200},
                            {field:'freight',title:'Freight',width:200}
                        ]],
                        data:[
                            {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734},
                            {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734},
                            {orderdate:'08/23/2012',shippeddate:'12/25/2012',freight:9734}
                        ]
                    },
                    subgrid:{
                        options:{
                            fitColumns:true,
                            foreignField:'orderid',
                            columns:[[
                                {field:'price',title:'Unit Price',width:200,align:'right'},
                                {field:'quantity',title:'Quantity',width:200,align:'right'},
                                {field:'discount',title:'Discount',width:200,align:'right',formatter:function(value){
                                    return value*100+'%'
                                }}
                            ]],
                            data:[
                                {price:923,quantity:2312,discount:0.2}
                            ]
                        },
                        subgrid:{
                            options:{
                                fitColumns:true,
                                foreignField:'pid',
                                singleSelect:true,
                                columns:[[
                                    {field:'pnumber',title:'Product Number',width:200},
                                    {field:'pname',title:'Product Name',width:200},
                                    {field:'supplier',title:'Supplier',width:200}
                                ]],
                                data:[
                                    {pnumber:'00100823',pname:'Canon PowerShot A1300',supplier:'Canon'},
                                    {pnumber:'12023423',pname:'Cisco RV110W-A-NA-K9',supplier:'Cisco'},
                                    {pnumber:'82312393',pname:'Nikon COOLPIX L26 16.1 MP',supplier:'Nikon'}
                                ]
                            }
                        }
                    }
                }
            };

            $(function(){
                $('#dg').edatagrid({
                    title:'DataGrid - Nested SubGrid',
                    width:700,
                    height:300
                }).datagrid('subgrid', conf);
            });
        </script>


    </body>
    </html>

really thank you Stworthy.

HOW TO GET THE NESTED SUBGRID?

I try your code in my page, and modify it like this:
<table id="dg"></table>
<div id="toolbar" hidden="hidden">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">new</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">delete</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">cancel</a>
    </div>
 var conf = {
         options:{
             //...omit the property setting codes here
            url:"xxxxxxxx",
            saveUrl:"xxxxxxxx",
            destroyUrl:"xxxxxxxx",
            updateUrl:"xxxxxxxx",
            edatagrid:true,
            autoUpdateDetail:false,
            columns:[[......]],
             subgrid:{
                options:{
                    rownumbers:true,
                    striped:true,
                    fitColumns:false,
                    nowrap:false,
                    fixed:true,
                    idField:'id',
                    foreignField:'id',
                    url:"xxxxxxxx",
                    saveUrl:"xxxxxxxx",
                    destroyUrl:"xxxxxxxx",
                    updateUrl:"xxxxxxxx",
                    edatagrid:true,
                    autoUpdateDetail:false,
                    toolbar:[{
                      iconCls: 'icon-add',
                      handler: function(){

                                               //HERE IS THE PROBLEM, HOW TO GET THE NESTED SUBGRID? THE "index"  IS UNDEFINED.

                            var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                            ddv.datagrid('appendRow');
                         }}
                   }],
                   columns:[[......]],
          .....................................
 $(function(){
            $('#dg').datagrid('subgrid', conf);})

I got the firefox debug message :TypeError: $.data(...) is undefined, when the code is running. HOW TO GET THE NESTED SUBGRID?

Hi bro! I am dealing with an editable subgrid. When I expand or add a row in a master edatagrid, I need a toolbar appear on top of every subgrid when the row of master grid is expanded, so that I can add, save, delete and cancle the row of subgrid. how to do it? Thanks in advance!