Jsgrid: [HELP WANTED] How can I prevent clearing the insert boxes on fail?

[sguryev]

Hello,

I have read the issue #190 and was able to replicate it. I'm using the PageLoadingStrategy and want to prevent grid from clearing the insert boxes on fail. I have replaced the finishInsert function.

But even after return something clears the insert boxes. I want to keep input values there and allow user to fix them instead of the typing them again.

Thank you!

[sguryev]

The same question regarding updating.
During updating I can return 400 (or 409) result with the message inside (in case of the duplication validation failed). Currently grid cancels the edit mode and leaves the updated row inside (so for user it looks like a successful updating). And I have no way ON THE CLIENT SIDE to access the OLD value of the updated item to resolve it as promise and show it. Also I don't want to reload the whole page. I think that the good solution would be to leave the edit mode active and this will notify user that updating is not finished.

I use the toast service for the notifications, But it's confusing when RED toast says: "Name should be unique" but the grid shows the updated row.

[tonisostrat]

Use onItemInserting() and onItemUpdating() callbacks instead and use args.cancel to stop the flow.

onItemInserting: function (args) {
  args.cancel = someKindOfCustomValidationFunction() // true if data valid, false otherwise
}

Relevant part in documentation + an issue here.

The idea here is that before sending the data to your backend it should already be validated and in the correct form so the only error scenarios that can happen are server-side exceptions that have nothing to do with the data itself.

[sguryev]

@tonisostrat
Thank you for the response.
As I remember events don't support the async callbacks. So I will not be able to make a server request. I don't want to get all the Names to make sure that the new one is unique on the client side. At least because this list will be outdated as soon as it will be received (it's a multi-user web app and someone can add new Customer with the same name during you input values).
So I'm expecting for something like:

I have checked your sample and args.cancel= true does the trick in SYNC context.
Also I have tried to do the same in the onItemInserted callback and it doesn't work.

[tabalinas]

@sguryev, did you check that you are getting inside finishInsert and what is the value of insertFailed (putting a break point or a debugger inside)?

[sguryev]

@tabalinas yes sir! And return prevents the page reloading. But input boxes are cleared anyway

[tabalinas]

https://github.com/tabalinas/jsgrid/blob/3ca96b5d87a417e1a64ef04bfc689e90ef2b6d3a/src/fields/jsgrid.field.control.js#L182

Basically, it's not a load strategy that clears the insert row, but the control field (insert button handler). So you can redefine the handler of this button, or just reject the insertion deferred instead of resolving it in case of failure.

[sguryev]

@tonisostrat as brilliant as simple. Thank you!

[tabalinas]

You are welcome!

[deepak-trimantra]

Hi @tabalinas can we do this for update also?
as you suggested i redefined insert and update button controller. For inserting when insert fails it prevents from clearing inputs. But i am not able to achieve this in case of update. When update fails if resolves previousItem but i want to do same as insert, don't want to clear the input.

**UPDATE FUNCTION :**
updateItem: function (updatingItem) {
                var d = $.Deferred();
                $.ajax({
                    url: url
                    type: "POST",
                    data: updatingItem,          
                }).done(function (response) {
                    display_notification(obj);
                    if (obj.flag)
                    {
                        grid.updateFailed = false;
                        d.resolve(response.data);
                    } else
                    {
                        grid.updateFailed = true;
                        d.resolve(previousItem);
                    }
                }).fail(function () {
                    d.resolve(previousItem);
                });
                return d.promise();

**EDIT CONTROL**
function getCustomEditControls() {
    return $("<input>").addClass("jsgrid-button")
            .addClass("jsgrid-update-button")
            .attr({
                type: "button",
                title: "Save"
            })
            .on("click", function () {
                grid2.updateItem().done(function () {
                    if (!grid.updateFailed)
                    {
                        grid2.clearInsert();
                        clear_errs();
                    }
                    else
                    {
                        grid.jsGrid("cancelEdit");  //???? nothing happens
                    }
                }).fail(function () {
                    grid.jsGrid("cancelEdit"); //??? nothing happens
                });
            })
            .add($("<input>")
                    .addClass("jsgrid-button")
                    .addClass("jsgrid-cancel-edit-button")
                    .attr({
                        type: "button",
                        title: "Cancel"
                    })
                    .on("click", function () {
                        if (!grid2.insertings)
                        {
                            grid.jsGrid("cancelEdit");
                        }
                    }));
}

can you help me out here?