Updating data source after grid is edited

Question

I am using Ignite UI. When I add the property updateUrl to the grid, this doesn't trigger a submission to the given URL in JavaScript, once data is edited in grid. Here's my code for grid. Also, strangely the delete event is being called twice and shows the confirmation alert box twice:

$.ig.loader({
    scriptPath: './javascript_common/igniteui/corefiles/js/',
    cssPath: './javascript_common/igniteui/corefiles/css/',
    theme: 'metro'
});

$.ig.loader("igGrid.Responsive.Hiding.Paging.Updating", function () {
$("#grid1").igGrid({
    dataSource: 'http://domain.com/admin-new/users.php?mode=getUsers',
    updateUrl : 'http://domain.com/admin-new/users.php?mode=updateUser',
    responseDataKey: "results",
    primaryKey: 'id',
    autoGenerateColumns: false,
    autoGenerateLayouts: false,
    columns: [{
        key: 'id',
        dataType: 'number',
        headerText: 'Id',
    }, {
        key: 'fullname',
        dataType: 'string',
        headerText: 'Full Name'
    }, {
        key: 'fname',
        dataType: 'string',
        headerText: 'First name'
    }, {
        key: 'lname',
        dataType: 'string',
        headerText: 'Last Name'
    }, {
        key: 'username',
        dataType: 'string',
        headerText: 'User Name'
    }, {
        key: 'userLevel',
        dataType: 'string',
        headerText: 'User Level'
    }, {
        key: 'userGroupId',
        dataType: 'string',
        headerText: 'User Group'
    }, {
        key: 'email',
        dataType: 'string',
        headerText: 'Email'
    }, {
        key: 'status',
        dataType: 'bool',
        headerText: 'Status'
    }],
    features: [
    {
                        name: "Paging",
                        type: "remote",
                        pageSize: 2, // Default number of records per page.
                        recordCountKey : 'totalCount', // The property in the response that will hold the total number of records in the data source.
                        pageSizeUrlKey : 'psize', // Denotes the name of the encoded URL parameter that will state what is the currently requested page size.
                        pageSizeList : [1,2,3,4,5,6,7,8,9,10,20,30], // Default: [5, 10, 20, 25, 50, 75, 100]. contents of the page size dropdown indicating what preconfigured page sizes are available to the end user.
                        pageIndexUrlKey : 'page', // Denotes the name of the encoded URL parameter that will state what is the currently requested page index.

    },{
        name: 'Responsive',
        forceResponsiveGridWidth: false,
        columnSettings: [{
            columnKey: 'id',
            classes: "ui-hidden-phone"
        }, {
            columnKey: 'fullname',
            classes: "ui-visible-phone",
            configuration: {
                phone: {
                    template: "<span>${lname}, ${fname}</span>"
                }
            }
        }, {
            columnKey: 'fname',
            classes: "ui-hidden-phone"
        }, {
            columnKey: 'lname',
            classes: "ui-hidden-phone"
        }]
    }, {
        name: 'Hiding',
        hiddenColumnIndicatorHeaderWidth: 14,
        columnSettings: [{
            //hide unbound from chooser list and indicator
            columnKey: 'fullname',
            allowHiding: false
        }]
    }, {
        name: "Updating",
        enableAddRow: true,
        showReadonlyEditors: false,
        dataDirty: function (evt, ui) {
            return false;
        },
        rowEditDialogOpening: function (event, ui) {
            if ($(ui.owner.element).igGridResponsive("getCurrentResponsiveMode") != "desktop") {
                ui.owner.options.rowEditDialogWidth = document.body.clientWidth * 0.9;
                ui.dialogElement.children('.ui-dialog-content').css('height',ui.owner.grid.element.height() - 115);
                ui.owner.options.rowEditDialogHeight = ui.owner.grid.element.height();
            }
            var columns = ui.owner.grid.options.columns;
            for (i = 0; i < columns.length; ++i) {
                //use 0 instead of false to be able to differentiate when restoring state
                if (columns[i].hidden) columns[i].hidden = 0;
            }
        },
        rowEditDialogOpened: function (event, ui) {
            var columns = ui.owner.grid.options.columns;
            for (i = 0; i < columns.length; ++i) {
                if (columns[i].hidden === 0) columns[i].hidden = true;
            }
        },
        editMode: "rowedittemplate",
        columnSettings: [{
            columnKey: 'fullname',
            readOnly: true
        }, {
            columnKey: 'id',
            readOnly: true
        }, {
            columnKey: "email",
            validatorOptions: {
                required: true,
                errorMessage: "Enter a valid email.",
                bodyAsParent: false
            }
        }]
    }]
});
});
    var grid = $('#grid1');
    grid.bind("iggridupdatingrowdeleting", function (e, args) {
    var result = confirm("Sure to delete ?");
    if (result==true) {
    $.ajax({
      type: "POST",
      url: "users.php?mode=deleteUser",
      data: { id: args.rowID }
    }).done(function( msg ) {
      // alert( "Deleted: " + args.rowID );
    });
    }else{
    return false;
    }
    });

Answer 1

First - you shouldn't have to make the request yourself - the Grid will make those calls for you in case of any change (add, edit, delete). All you have to do is call:

 $("#grid1").igGrid("saveChanges");

JSFIDDLE: http://jsfiddle.net/damyanpetev/MGECs/ (there's a log where you can see the requests)

As I mentioned this will make requests for delete so you don't need to do it manually and have an extra endpoint. You can still use the event to cancel deletes if you want, but I've changed your hanler to this:

if (!confirm("Sure you want to delete ?")) {
   return false;
}

Let me explain why: The Update URL property of the igGrid states that updates will be made to the data source, however, in the context of the Grid, the data source is referred to the actual widget igDataSource (check out this doc on igGrid/igDataSource Architecture). Even so the data source would only submit when you call saveChanges (on either control). Also note that until you commit the transactions they will remain in a neat stack for Undo/Redo (there's a good sample for that).

Secondly, I'm not sure exactly why would you get the confirmation twice (I never do) so you might want to provide some extra info (which version are you using) and potentially isolate it in a sample.