Jsgrid: Prevent Item Inserting after sent to ajax insertItem

[tiagoschaffer]

Hi,
I read issues #95 and #54 and i still don't know how to put things work.

Here is my scenario: I use in-line grid insertion and I implement onItemInserting to validate some blank fields. Then, i send data to my service via ajax. In service, i do some validations in database, if true i insert ok, else i have to cancel insertion and alert user.
This is ajax call:

insertItem: function (item) {
$.ajax({type: "POST",url: '@Url.Action("InsertBox", "UnidadeBox")',data: item, dataType: "json"
}).done(function (response) { 
     if (response.Success){ 
     }
     else{  
     'what i supouse to do here to set value to insertFailed and use on strategies defined below? '  }
});
},

and this is Controller called by ajax:

  [HttpPost]
  public JsonResult InsertBox(UnidadeBoxViewModel model)
        {
            try
            {
               model.Id = _service.Add(box);
                var jsonResult = new
                {
                    Success = true,
                    Model = model
                };
                return Json(jsonResult, JsonRequestBehavior.AllowGet);
            }
            catch (Exception error)
            {
                var jsonResult = new
                {
                    Success = false,
                    Message = error.InnerException != null ? error.InnerException.Message : error.Message
                };
                return Json(jsonResult, JsonRequestBehavior.AllowGet);
            }
        }

I define a finish strategy and its works but i dont know how to declare and put result on 'insertFailed'!

var origFinishInsert = jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert;
jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert = function(insertedItem) {
    if(insertFailed) { // define insertFailed on done of delete ajax request in insertFailed of controller
        return;
    }
origFinishInsert.apply(this, arguments);
}

Please, help!
thanks

[tabalinas]

What I don't understand is why you redefine DirectLoadingStrategy.prototype.finishDelete for insertion? Do you mean DirectLoadingStrategy.prototype.finishInsert?

[tiagoschaffer]

Sorry, i just copy exemple from issue #54. Now i paste de right code. ;)

[tabalinas]

Oh, I see now.
Well, you can do something like the following using closure:

// grid creation
var grid = $(".js-grid").jsGrid({
    ...
    controller: {
        insertItem: function(...) {
             ...
                 grid.insertFailed = true;
             ...
        }
    }
    ...
}).data("JSGrid");

// load strategy
var origFinishInsert = jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert;
jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert = function(insertedItem) {
    if(this._grid.insertFailed) { // define insertFailed on done of delete ajax request in insertFailed of controller
        return;
    }
    origFinishInsert.apply(this, arguments);
}

[tiagoschaffer]

Ok. Thanks man. I'll do this and asap i'll give you a feed back!

[]'s

[tiagoschaffer]

Hi. I tried code using your example but it seems to not have appropriate behavior (or i don't know how to proceed)!
When i insert a new box, jsGrid calls insertItem and then call my asp.Net MVC controller using ajax. I verify if the new box i want insert already exists. If exists i don't insert on db and return an error:

  insertItem: function (item) {
                    item.wwww= wwww;
                    $.ajax({
                        type: "POST",
                        url: '@Url.Action("xxxxx", "yyyyy")',
                        data: item,
                        dataType: "json"
                    }).done(function (response) {
                        grid.insertFailed = !response.Success
                        alert(response.Message);
                    });
                },

and loadStrategies:

  var origFinishInsert = jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert;
        jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishInsert = function (insertItem) {
            if (this._grid.insertFailed) { // define insertFailed on done of insert ajax request in insertFailed of controller
                return;
            }
            origFinishInsert.apply(this, arguments);
        }

But, what i noticed is after I call insert, the loadStrategies is undefinied on the first time. On the second time i call insert, on the loadStrategies it got data about the first insert, on the third time, the data about second insert, and so on.

What am I doing wrong?

[tabalinas]

Do you have a page with external access to see the issue?
Or maybe you could modify this basic example to demonstrate the issue?
There is no need in real ajax query, you could put just setTimeout instead and resolve promise with data usually coming from server.

[tiagoschaffer]

Here is my example. See that loadStrategies run before i finish insert item and set grid.insertFailed = true;

exemple.zip

[tabalinas]

Thank you for the good example.
The reason why it happens: insertion is asynchronous, so you need to return a promise, so that finishInsert can be called, when loading is finished.

In your example it could be:

insertItem: function (item) {
    var d = $.Deferred();

    setTimeout(function () {
        console.log('insertItem');
    grid.insertFailed = true;
        d.resolve();
    },2);
    return d.promise();
}

Note: resolving the promise with actually inserted item allows to redefine data on the server and display the actual item.

[tiagoschaffer]

His tabalinas!
This solution works very well my friend!
Thanks a lot and sorry for very late response!

[tabalinas]

You are welcome!

[bala29000]

I need to get the edited value when I click Save button which is out of grid.
For Eg : I have 10 rows and 5 columns in each row (2 columns filled and remaining unfilled)
When i click a particular row, 3 remaining columns will change into text boxes where i need to enter some values in it.

Now A Save button is placed outside of Grid, So when clicked I need to get the edited values in a list.

Please help out.