how to remove row from dgrid

Question

I have defined dgrid and a button for removing row:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">


    <div id="container"></div>
    <button id="remove">Remove</button>

    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [
                { name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
                { name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
           ]
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script type="text/javascript">
    require([
                'dojo/_base/declare',
                'dojo/on',
                "dojo/dom", 
                "dstore/Memory",
                "dstore/Trackable",
                'dstore/SimpleQuery', 
                'dgrid/Grid', 
                'dgrid/extensions/Pagination',
                'dgrid/extensions/DijitRegistry',
                'dojo/domReady!'
    ],
   function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
        var data = [];
        for (var i = 1; i <= 500; i++) {
                data.push({id:i,name: 'Name '+i, value: i});
        }

        var Store = declare([Memory, SimpleQuery, Trackable]);
        var myStore = new Store({data:data});

        var MyGrid = declare([Grid, Pagination]);
        var grid = new MyGrid({
                collection: myStore,
                columns: {
                        'id' : 'Id',
                        'name' : 'Name',
                        'value' : 'Value'
                },
                className: "dgrid-autoheight",
                showLoadingMessage: false,
                noDataMessage: 'No data found.'
        }, 'container');
        grid.startup();
        on(dom.byId('remove'),'click',function() {
                myStore.remove(10);
        });
    }); 
    </script>
</body>
</html>

The dgrid shows up, you can sort it, edit name or value.

The problem is, that when you click on the "remove" button, row is deleted, but then, at the end of the gird is 9x written: "No data found" and the dgrid stops to work (you cant delete any other row).

If you set showLoadingMessage: to true, then everything works without a problem.

Edit: I have simplified the example. Problem persists.

T Kambi T Kambi · Accepted Answer · 2016-07-05T14:52:47

The grid may have been encountering error while updating the row data after the row has been removed. As the editor tries to update the row after the button loses focus. Try using the grid.removeRow method to remove the row. It might still encounter some other issues, but worth a try.

Editor might not be the best solution to achieve what your are trying to do.

User renderCell to add button to the grid, to remove the row/record. This might be a better solution.

Update: Just refresh the grid that should solve the problem.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.rawgit.com/SitePen/dgrid/v1.1.0/css/dgrid.css" media="screen" />
</head>
<body class="claro">


    <div id="container"></div>
    <button id="remove">Remove</button>

    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [
                { name: 'dgrid', location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0' },
                { name: 'dstore', location: '//cdn.rawgit.com/SitePen/dstore/v1.1.1' }
           ]
        };
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script type="text/javascript">
    require([
                'dojo/_base/declare',
                'dojo/on',
                "dojo/dom", 
                "dstore/Memory",
                "dstore/Trackable",
                'dstore/SimpleQuery', 
                'dgrid/Grid', 
                'dgrid/extensions/Pagination',
                'dgrid/extensions/DijitRegistry',
                'dojo/domReady!'
    ],
   function(declare, on, dom, Memory, Trackable, SimpleQuery, Grid, Pagination, DijitRegistry) {
        var data = [];
        for (var i = 1; i <= 500; i++) {
                data.push({id:i,name: 'Name '+i, value: i});
        }

        var Store = declare([Memory, SimpleQuery, Trackable]);
        var myStore = new Store({data:data});

        var MyGrid = declare([Grid, Pagination]);
        var grid = new MyGrid({
                collection: myStore,
                columns: {
                        'id' : 'Id',
                        'name' : 'Name',
                        'value' : 'Value'
                },
                className: "dgrid-autoheight",
                showLoadingMessage: false,
                noDataMessage: 'No data found.'
        }, 'container');
        grid.startup();
        on(dom.byId('remove'),'click',function() {
            myStore.remove(10);
            grid.refresh();
        });
    }); 
    </script>
</body>
</html>

how to remove row from dgrid

1 Answers