Grid updateRow() fails when called for rows after an expanded row #721

mihailboev · 2023-03-07T16:16:19Z

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>

The text was updated successfully, but these errors were encountered:

mihailboev changed the title ~~Grid updateRow fails when called for rows after an expanded row~~ Grid updateRow() fails when called for rows after an expanded row Mar 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Grid updateRow() fails when called for rows after an expanded row #721

Grid updateRow() fails when called for rows after an expanded row #721

mihailboev commented Mar 7, 2023 •

edited

Loading

Grid updateRow() fails when called for rows after an expanded row #721

Grid updateRow() fails when called for rows after an expanded row #721

Comments

mihailboev commented Mar 7, 2023 • edited Loading

mihailboev commented Mar 7, 2023 •

edited

Loading