gijgo
gijgo copied to clipboard
Published
20 hours ago •
atatanasov
atatanasov
Grid updateRow() fails when called for rows after an expanded row
Steps to reproduce:
- Create a grid with local data source and configured detailTemplate
- Fill with 3 elements
- Expand the details for the second row
- Call updateRow() for the third row
Expected: Third row is updated properly
Observed: Third row "data-position" attribute is set to "4". Calling updateRow() for the same row will result in a new row being inserted.
Seems to be caused by updateRow() using $row.index() when calling renderRow()
Code to reproduce:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<script src="/Areas/Development/dist/libraries/jquery/jquery.js"></script>
<script src="/Areas/Development/dist/modular/js/core.js" type="text/javascript"></script>
<link href="/Areas/Development/dist/modular/css/core.css" rel="stylesheet" type="text/css">
<link href="/Areas/Development/dist/modular/css/grid.css" rel="stylesheet" type="text/css">
<script src="/Areas/Development/dist/modular/js/grid.js"></script>
</head>
<body style="padding: 8px;">
<button onclick="editRow3()" class="gj-button-md">Edit Row 3</button>
<br/><br/>
<table id="grid"></table>
<script>
var data = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
var grid = $('#grid').grid({
dataSource: data,
detailTemplate: '<div style="text-align: left"><b>Place Of Birth:</b> {PlaceOfBirth}</div>',
columns: [ { field: 'ID', width: 56 }, { field: 'Name' }, { field: 'DateOfBirth', type: 'date' } ],
});
function editRow3() {
var item = data[2];
item.Name += '*';
grid.updateRow(item.ID, item);
}
</script>
</body>
</html>
