CODEWITHSUNDEEP
javascriptajaxkendo-gridasp.net-ajaxkendo-asp.net-mvc
NoviceDeveloper
NoviceDeveloper

Reputation: 1290

Add CSS element after kendogrid refresh

I have an ajax call that sends to MyAction in MyController.. it returns me with result of success and an Id for an element to which I want to attach some CSS.

the Id is returned, and the css is added but the refreshGridData happens afterwards removing the css I just added to the element.

Is there a way to wait for refreshGridData to finish and then add the css?

I did try the done for ajax.. it did not work.

    $.ajax({
        url: "@Url.Action("MyAction", "MyController")",
        type: "POST",
        data: postData,
        success: function (result) {
            if (result.Success) {
                alert("success");
                refreshGridData();
            }
        },
        error: function (result) {
            alert("Error!");
        }
        AddMyCSSToThis(result.Id);
       // done: AddMyCSSToThis(result.Id);
    }); 

    function refreshGridData() {
        var ajaxContainer = $(".grid-wrap");
        kendo.ui.progress(ajaxContainer, true);
        refreshGrid();
        kendo.ui.progress(ajaxContainer, false);
    }

Upvotes: 2

Views: 182

Answers (2)

Keith
Keith

Reputation: 4147

Why don't you pass in the Id you want to add the change into your refreshGridData() function like:

 $.ajax({
    url: "@Url.Action("MyAction", "MyController")",
    type: "POST",
    data: postData,
    success: function (result) {
        if (result.Success) {
            alert("success");
            var savedId = result.Id;
            refreshGridData(savedId);
        }
    },
    error: function (result) {
        alert("Error!");
    }
    AddMyCSSToThis(result.Id);
   // done: AddMyCSSToThis(result.Id);
}); 

function refreshGridData(savedId) {
    var ajaxContainer = $(".grid-wrap");
    kendo.ui.progress(ajaxContainer, true);
    refreshGrid(savedId); // I'm assuming this function is what adds the css
    kendo.ui.progress(ajaxContainer, false);
}

Upvotes: 1

Martin D.
Martin D.

Reputation: 2090

You could create a global variable and use it in the grid dataBound event to add the CSS.

_addCssToResultId = null;
$.ajax({
    url: "@Url.Action("MyAction", "MyController")",
    type: "POST",
    data: postData,
    success: function (result) {
        if (result.Success) {
            alert("success");
            _addCssToResultId = result.Id;
            refreshGridData();
        }
    },
    error: function (result) {
        alert("Error!");
    }
});

// add a dataBound handler to your grid
$("#grid").kendoGrid({
  dataBound: function(e) {
    if(_addCssToResultId) {
       AddMyCSSToThis(_addCssToResultId);
       _addCssToResultId = null;
    }
  }
});

Upvotes: 0

Related Questions