how to refresh datagrid in dojo 1.9 after deleting an item

StackOverflow https://stackoverflow.com/questions/18438048

Question

I am using Dojo Toolkit 1.9 Datagrid and i am populating data from the xmlStore but i am facing one problem that is after deleting any item from the datagrid, its not getting refresh until we do manual browser refresh. Would you please any one can suggest me how can i do it? Source code is below :

<html>
<head>
<title>User Demo</title>
<link rel="stylesheet" href="../dojo-release-1.9.1/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../dojo-release-1.9.1/dojox/grid/resources/claroGrid.css">
<script src='../dojo-release-1.9.1/dojo/dojo.js'></script>
<script src='myscript.js'></script>
<body>
    <div id="ObjectGrid"></div>
</body>
</html>

    var globalUserId;
    var appContext = "/" + (window.location.pathname).split("/")[1];
    require(
            [ 'dojo/dom', 'dojo/json', 'dojox/json/schema',
                    'dojox/data/JsonRestStore', 'dojox/grid/DataGrid',
                    'dojox/grid/_CheckBoxSelector', 'dojo/on',
                    'dojo/request/xhr', 'dijit/Dialog', 'dojox/data/XmlStore',
                    'dijit/form/FilteringSelect', 'dijit/Calendar',
                    'dijit/form/Form', 'dijit/form/ValidationTextBox',
                    'dijit/form/TextBox', 'dijit/form/FilteringSelect',
                    'dijit/form/Button', 'dijit/layout/TabContainer',
                    'dijit/layout/ContentPane', 'dojo/domReady!' ],
            function(dom, JSON, schema, JsonRestStore, DataGrid,
                    _CheckBoxSelector, on, xhr) {

                var userDataStore12 = new dojox.data.XmlStore({
                    url : appContext + "/rest/userservice/getusers",
                    rootItem : "user"
                });

                var gridCell = [{field : "userid",name : "User Id",width : '10%'},
                        {field : "name",name : "Name",width : '15%'},
                        {field : "email",name : "Email",width : '15%'},
                        {field : "userName",name : "User Name",width : '10%'},
                        {field : "phone",name : "Phone",width : '10%'},
                        {field : "roleName",name : "Role",width : '10%'},
                        {field : "status",name : "Status",width : '10%'},
                        {name : "Action",field : "action",width : '10%',
                            formatter : function(item) {
                                var link = '<a href="#" title="Edit" onClick="updateUserDialog.show()"><div class="dijitIconEdit"></div></a> <a href="#" id="deleteUser" onClick="deleteUser();" title="Delete"><div class="dijitIconDelete"></div></a>';
                                return link;
                            }
                        }];

                gridLayout = [ {
                    // First, our view using the _CheckBoxSelector custom type
                    type : "dojox.grid._CheckBoxSelector"
                }, gridCell ];

                grid = new DataGrid({
                    store : userDataStore12,
                    structure : gridLayout,
                    selectionMode : "single",
                    autoHeight : true
                }, "ObjectGrid");
                grid.startup();

                on(grid, "RowClick", function showDetail(e) {
                    var gridUserId = grid.store.getValue(grid.getItem(e.rowIndex), "userid");
                    globalUserId = gridUserId;
                });
            });
    function deleteUser() {

        require([ 'dojo/dom', 'dojo/request' ], function(dom, request) {
            //request for delete user           
            request.post(appContext + "/rest/userservice/deleteUser", {
                data : "userId=" + globalUserId,
                timeout : 2000
            }).then(function(response) {
                console.log("request sent successfully!!!!!!!");

            });
        });

    }
Was it helpful?

Solution

I have managed to delete a single row of a Datagrid this way. I select a row via a checkbox, then call the function getSelectedItems() by a button at the end of the Grid to delete the selected row.

function getSelectedItems(){
  require(["dijit/registry", "dojo/_base/array", "dojo/domReady!"], function(registry, array){
    var items = registry.byId("GraphGrid").selection.getSelected();
    if (items.length) {
        array.forEach(items, function(selectedItem){
        /* Delete the item from the data store: */
    GraphicStore.deleteItem(selectedItem);
        });
    }
  });
 }

Update

It's a bit later and I'm not sure this Problem is still actual but i solve this Problem for me now. My Problem was nearly the same as yours. I have a Datagrid shown into a ContentPane and want to delet single Rows. Problem was that after i delete the item, the Grid wasn't refreshed. so i reload it with 

grid.setStore(GraphicStore);

But the ContentPane remained empty except for the column headings. When i sort the rows, the new Grid appears. Then i set a alert to see if the Grid is still registert or not and with this alert the Grid suddenly appears! To solve this Problem i setup a Timeout, so the Grid can be fully loaded( i guess it has something to do with the loading ) and the setup the new store. Gird appears - Problem solved.

I do it this way:

  setTimeout(function(){
    grid.setStore(GraphicStore);
    }, 1000);

Regards, Miriam

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top