confirmation behaviour configuration

[atanana]

I've added new callback in grid configuration. From my point of view it's pretty useful for custom dialogues or confirmation logic.

Example:

$("#grid").jsGrid({
    ...

    confirmationPopupProvider: function (message, callback) {
        if (window.confirm(message)) {
            if (window.confirm('Are you really sure?')) {
                callback();
            }
        }
    },

    ...
});

[tabalinas]

I like the idea of popup customization. While I'm not sure about the API introduced in the PR. Let me think about it a little bit.

[kirilvit]

• 1 for this solution.
  Now we can't use other window.confirm confirmations for deleting, because deleteConfirm function does not have a callback as a parameter.

[tabalinas]

@kirilvit, what is about setting the option confirmDeleting: false and using custom confirmation in onItemDeleting callback, which can be canceled http://js-grid.com/docs/#onitemdeleting?

[atanana]

@tabalinas it's a really good solution but looks like it don't work with async confirmation (for example we need custom dialogs).

[kirilvit]

@atanana it's posible to make it work with async confirmations. But the code is not elegant :)
Here is how I implemented it:

confirmDeleting: false,
onItemDeleting: function (args) {
    if (!args.item.deleteConfirmed) { // custom property for confirmation
        args.cancel = true; // cancel deleting
        confirm.showConfirm('Are you sure?', function() {
            args.item.deleteConfirmed = true;
            $grid.jsGrid('deleteItem', args.item); //call deleting once more in callback
        });
    }
},

[atanana]

@kirilvit cool! I wouldn't have guessed such solution

[JeffMatthews2]

Beautiful handling! I had to change the code just a bit, but the concept was the key. Thanks!

[tpfilipe]

Hello, I am trying to implement that solution. Here is my code:

onItemDeleting: function (args) {
                    if (!args.item.deleteConfirmed) { // custom property for confirmation
                        args.cancel = true; // cancel deleting
                        var string = "The user \"" + args.item.Name + "\" will be deleted. Are you sure?";
                        $("#deleteDialog").dialog("open");
                        $("#deleteDialogText").text(string);
                        itemToDelete = args.item;
                    }
                }

(...)
deleteItem: function (item) {
                        console.log(item);
                        var dataObject = {
                            login: item.Login
                        };

                        $.ajax({
                            type: 'DELETE',
                            url: "controllers/UsersController/",
                            data: dataObject,
                            success: function() {
                                $("#dg_users").jsGrid("loadData");
                                console.log("success");
                            }
                        });
                    }
(...)
    $("#deleteDialog").dialog({
        autoOpen: false,
        width: 200,
        buttons: {
            "Confirm": function () {
                itemToDelete.deleteConfirmed = true;
                $("#dg_users").jsGrid("deleteItem", itemToDelete);
                $("#dg_users").jsGrid("loadData");
                $(this).dialog("close");
            },
            "Cancel": function () {
                $(this).dialog("close");
            }
        }
    });

It works fine, the deleteDialog open and when the user press "Confirm" the ajax request is sent and delete the item of repository. But the Jsgrid don't execute the loadData... I have to press F5 to refresh the users list of jsgrid. Anyone knows why that happen?

@tabalinas

[JeffMatthews2]

backpt, I did not try the delete functionality, but this is my guess:

It is possible that delete operations can be complex. For example, if you delete "red widget" from the grid, the actual delete operation might require that you delete all red widgets, and not just the one the user clicked to delete. If loading was automatic, how would jsGrid know what to load? Everything but the single, deleted record, or something less than that?

You already should have loading logic for when you initialize the grid. Move your load code to a function and call it after you delete. The grid should then contain whatever data you want.

I hope my guess helps.

[tpfilipe]

@JeffMatthews2

I have already a function to load:

loadData: function () {
                        return $.ajax({
                            type: "GET",
                            url: "controllers/UsersController/"
                        });
                    }

How can I tell the Grid to load data from an external function?

[JeffMatthews2]

Put your "return $.ajax..." into a function named something like "private void loadMyData()."

Then, remove the ajax from your loadData eventhandler in the jsGrid code. In its place, call your new "loadMyData()" function.

You can then also call "loadMyData()" in your delete eventhandler in the jsGrid code (or wherever it is you are handling the code to delete the record).

[tpfilipe]

@JeffMatthews2 The previous code it's working good, the issue was with the users ID that I implemented. Thanks anyway!

[gitdevcode]

Another example using jsgrid and bootbox for confirmation dialog

<script>
    $(function() {

        $("#jsGridItems").jsGrid({
            height : auto,
            width : auto,
            sorting : true,
            paging : false,
            autoload : true,
            confirmDeleting: false,
            onItemDeleting: function (args) {
                console.log("onItemDeleting");
                 if (!args.item.deleteConfirmed) { // custom property for confirmation
                    args.cancel = true; // cancel deleting
                    bootbox.confirm("Are you sure?", function(result) {  // bootbox js plugin for confirmation dialog
                        if(result == true){
                            args.item.deleteConfirmed = true;
                            $("#jsGridItems").jsGrid('deleteItem', args.item); //call deleting once more in callback
                        }
                    });
                 }
            },
            controller : {
                deleteItem: function(item) { 
                    // ajax call to delete record in backend
                },                      
                loadData : function() {
                    // ajax call to load data
                }
            },
            fields : [ {
                name : "itemCat",
                type : "text",
                title : "Title"
            },{
                name : "nameText",
                type : "text",                      
                title : "Name"
            },
            { 
             type: "control",
               itemTemplate: function(value, item) {
                   var $result = $([]);                            
                   $result = $result.add(this._createDeleteButton(item));
                   return $result;
               }
            } ],
            rowClick: function(args) {                      
                // js function to display details 
            }
        });
    });
</script>