EasyUI Forum
May 16, 2024, 12:49:59 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > Bug Report > datagrid cellediting and datagrid subgrid conflict
Pages: [1]
« previous next »
  Print  
Author Topic: datagrid cellediting and datagrid subgrid conflict  (Read 19216 times)
Rinat
Newbie
*
Posts: 31


View Profile
« on: November 18, 2015, 09:17:12 AM »
Hello!
I have a subgrid  in the datagrid
All cells in the datagrid is editable
When I edit a cell in my subgrid (press any key in the edit field), then subgrid collapses.
In console I have error:
Code:
TypeError: col is null

Code:
function _66c(_671){
var dc=$.data(_671,"datagrid").dc;
dc.view.find("div.datagrid-editable").each(function(){
var cell=$(this);
var _672=cell.parent().attr("field");
var col=$(_671).datagrid("getColumnOption",_672);
cell._outerWidth(col.boxWidth+col.deltaWidth-1);
var ed=$.data(this,"datagrid.editor");
if(ed.actions.resize){
ed.actions.resize(ed.target,cell.width());
}
});
};

If delete code in datagrid-cellediting plugin

Code:
			'keypress': function(e){
				var dg = $(this);
				var param = dg.datagrid('cell');	// current cell information
				if (!param){return;}
				var input = dg.datagrid('input', param);
				if (!input){
					var tmp = $('<span></span>');
					tmp.html(String.fromCharCode(e.which));
					var c = tmp.text();
					tmp.remove();
					if (c){
						dg.datagrid('editCell', {
							index: param.index,
							field: param.field,
							value: c
						});
						return false;
					}
				}
			}
Then, this bug disapears.
Logged
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #1 on: November 18, 2015, 07:22:29 PM »
When calling 'enableCellEditing' method on a subgrid, please set the 'canUpdateDetail' flag to false after end editing a row.
Code:
$('#dg').datagrid({
  view: detailview,
  onEndEdit: function(){
    $(this).datagrid('options').view.canUpdateDetail = false;
  }
});
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #2 on: November 19, 2015, 05:05:09 AM »
Thanks! first bug is fixed, but second - not.
(When I press any key in editable input in subgrid).
TypeError: col is null
Logged
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #3 on: November 19, 2015, 05:36:59 AM »
Please show an example to demonstrate your issue.
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #4 on: November 19, 2015, 05:55:19 AM »
https://www.dropbox.com/s/cuu1kdip2ln1xjb/test.html?dl=0
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #5 on: November 19, 2015, 05:56:07 AM »
Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <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://code.jquery.com/jquery-1.4.4.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/datagrid-cellediting.js"></script>
    </head>
    <body>
    
    
    
    <script type="text/javascript">
        
    
    $(document).ready(function()
    {
                $('#dg').datagrid({
    
                    onEndEdit: function(){
                        $(this).datagrid('options').view.canUpdateDetail = false;
                    },
                    columns:[[
                        {field:'itemid',title:'Item ID',width:200, editor: 'textbox'},
                        {field:'productid',title:'Product ID',width:100,align:'right', editor: 'textbox'},
                        {field:'listprice',title:'List Price',width:100,align:'right', editor: 'textbox'}
                    ]],
                    singleSelect: true,
                    fitColumns: true,
                   data:[
                        {"itemid":"EST-12","productid":"RP-SN-01","listprice":"18.50","unitcost":"12.00","status":"P","attr1":"Rattleless"},
                        {"itemid":"EST-13","productid":"RP-LI-02","listprice":"18.50","unitcost":"12.00","status":"P","attr1":"GreenAdult"},
                        {"itemid":"EST-16","productid":"FL-DLH-02","listprice":"93.50","unitcost":"12.00","status":"P","attr1":"AdultFemale"}
                       ],
                    view: detailview,
                    detailFormatter:function(index,row){
                        return '<div style="padding:2px"><table class="ddv"></table></div>';
                    },
                    onExpandRow: function(index,row){
                        var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                        ddv.datagrid({
                            data:[
                                {"orderid":"1004","linenum":"2","itemid":"EST-12","quantity":"1","unitprice":"18.50"},
                                {"orderid":"1013","linenum":"1","itemid":"EST-12","quantity":"1","unitprice":"18.50"},
                                {"orderid":"1014","linenum":"1","itemid":"EST-12","quantity":"1","unitprice":"18.50"}
                            ],
                            fitColumns:true,
                            singleSelect:true,
                            rownumbers:true,
                            loadMsg:'',
                            height:'auto',
                            columns:[[
                                {field:'orderid',title:'Order ID',width:200, editor: 'textbox'},
                                {field:'quantity',title:'Quantity',width:100,align:'right', editor: 'textbox'},
                                {field:'unitprice',title:'Unit Price',width:100,align:'right', editor: 'textbox'}
                            ]],
                            onResize:function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);
                            },
                            onLoadSuccess:function(){
                                setTimeout(function(){
                                    $('#dg').datagrid('fixDetailRowHeight',index);
                                },0);
                            }
                        });
                        $('#dg').datagrid('fixDetailRowHeight',index);
    
                        ddv.datagrid('enableCellEditing').datagrid('gotoCell',
                                {
                                    index: 0,
                                    field: 'orderid'
                                });
    
                    }
                });
    
    
    
    
            $('#dg').datagrid('enableCellEditing').datagrid('gotoCell',
                    {
                        index: 0,
                        field: 'itemid'
                    });
    
    
    });
    
    
    </script>
    
    <div id = "dg"></div>
    </body>
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #6 on: November 19, 2015, 06:07:25 AM »
Screen:
https://www.dropbox.com/s/kliebrw64g98sqo/2015-11-19_160619.png?dl=0
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #7 on: November 19, 2015, 06:19:56 AM »
jsfiddle:
http://jsfiddle.net/Rinatr/yjjfbuf4/1/
Logged
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #8 on: November 19, 2015, 08:37:20 AM »
Please refer to http://jsfiddle.net/yjjfbuf4/2/
Logged
Rinat
Newbie
*
Posts: 31


View Profile
« Reply #9 on: November 19, 2015, 09:08:17 AM »
Hm, it seems to work.
But, if I collapse parent row, and expand, my browser is freeze

Quote
19:01:17.973 Error: Script terminated by timeout at:
U@http://code.jquery.com/jquery-1.4.4.min.js:16:278
c.event.handle@http://code.jquery.com/jquery-1.4.4.min.js:63:422
c.event.add/o@http://code.jquery.com/jquery-1.4.4.min.js:56:474
c.event.trigger@http://code.jquery.com/jquery-1.4.4.min.js:61:153
.trigger/<@http://code.jquery.com/jquery-1.4.4.min.js:74:288
c</<.each@http://code.jquery.com/jquery-1.4.4.min.js:33:44
c</b.prototype.each@http://code.jquery.com/jquery-1.4.4.min.js:26:386
.trigger@http://code.jquery.com/jquery-1.4.4.min.js:74:267
c.fn@http://code.jquery.com/jquery-1.4.4.min.js:77:311
editCell@http://www.jeasyui.com/easyui/datagrid-cellediting.js:202:6
.editCell/<@http://www.jeasyui.com/easyui/datagrid-cellediting.js:296:5
c</<.each@http://code.jquery.com/jquery-1.4.4.min.js:33:44
c</b.prototype.each@http://code.jquery.com/jquery-1.4.4.min.js:26:386
.editCell@http://www.jeasyui.com/easyui/datagrid-cellediting.js:295:1
$.fn.datagrid@http://www.jeasyui.com/easyui/jquery.easyui.min.js:91 jquery-1.4.4.min.js:16:278
Logged
jarry
Administrator
Hero Member
*****
Posts: 2264


View Profile Email
« Reply #10 on: November 19, 2015, 03:07:54 PM »
You can not call enableCellEditing method more than once. Please correct it.
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!