Kendo UI Grid Ajax Destroy Success

Question

I am really new to KENDO UI, I am also a little confused because I am using VB.Net with Kendo and the translation is a little weird, so with all that stated lets get to the question.

I am using a Kendo Grid in a ASP.Net MVC page as follows:

    @(Html.Kendo().Grid(Of Portal.ProductList).Name("Grid2") _
    .DataSource(Function(ds) ds.Ajax() _
    .Model(Sub(model) model.Id(Function(p) p.ItemID)) _
    .Read(Function(read) read.Action("GetAjaxItems", "ShoppingCartItems").Data("gridParms")) _
    .Destroy(Function(destroy) destroy.Action("DeleteAjaxItems", "ShoppingCartItems", New With {.ShoppingCartID = ViewData("ShoppingCartID")})) _
                                                ) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.ItemCodeOrdering).Title("Item")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Quantity).Title("Quantity").ClientTemplate("<input type='text' style='width:40px;' id='QTY#= ItemID #' value='#= Quantity #' /> &nbsp;<input type='button' id='UPD#= ItemID#' value='Update' onclick='updateItemQty(this)' /> ")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Price).Title("Unit Price").ClientTemplate("<div id='price#=ItemID#'>$#=Price.toFixed(2)#</div>")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Quantity).Title("Total Price").ClientTemplate("<div id='total#=ItemID#'>$#= (Price * Quantity).toFixed(2) #</div>")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.ItemID)) _
    .Columns(Function(modelItem) modelItem.Command(Sub(cmd) cmd.Destroy()))
    )

I am returning a value from the Destroy Ajax Call. I need to be able to retrieve that value and update another div on the page with the order total say from the Success event from the AJAX call, but I cannot determine how to intercept this event.

Essentially this grids shows line items ordered and it has a order total at the bottom of the page. When we return from deleted an item on the order I want to update the total from the value return from the controller. I hope this makes sense...

Controller

    <HttpPost()>
    Function DeleteAjaxItems(<DataSourceRequest()> request As DataSourceRequest, Optional ShoppingCartID As Integer = 0, Optional ItemID As Integer = 0) As ActionResult
        Dim sci = db.ShoppingCartItems.Where(Function(c) c.ShoppingCartID = ShoppingCartID And c.ItemID = ItemID)

        If Not IsNothing(sci.FirstOrDefault) Then
            db.ShoppingCartItems.Remove(sci.FirstOrDefault)
            db.SaveChanges()
        End If

        Dim ShoppingCartItems = db.ShoppingCartItems.Include(Function(s) s.ShoppingCart).Where(Function(s) s.ShoppingCartID = ShoppingCartID)
        Dim ShoppingCartItemsTotal = ShoppingCartItems.Sum(Function(item) item.DealerPrice * item.Quantity)

        Return New JsonResult With {.Data = Format(ShoppingCartItemsTotal, "c")}
        'Return Nothing

    End Function

score 5 · Accepted Answer · answered Jan 15 '13 at 07:22

5

You can use the requestEnd event. It is raised when server response is returned.

answered Jan 15 '13 at 07:22

Atanas Korchev

30,562
8
59
93

I added the event, but the event never gets fired. @(Html.Kendo().Grid(Of MHPPortal.ProductList) _ .Name("Grid2") _ .DataSource(Function(ds) ds.Ajax() _ .Model(Sub(model) model.Id(Function(p) p.ItemID)) _ .Read(Function(read) read.Action("GetAjaxItems", "ShoppingCartItems").Data("gridParms")) _ .Destroy(Function(destroy) destroy.Action("DeleteAjaxItems", "ShoppingCartItems", New With {.ShoppingCartID = ViewData("ShoppingCartID")})) _ .Events(Function(e) e.RequestEnd("OnRequestEnd")) ) _ – user1979215 Jan 17 '13 at 14:42
OK I added RequestStart and it fires when my grid loads, but after deleting a line item from the Grid the RequestEnd Never fires? – user1979215 Jan 17 '13 at 15:33
1

The correct answer is to use requestEnd, although I could never get this to work, the event never fired. I found another solution that bypassed allowing the grid to handle the destroy and I manually managed the destroy. – user1979215 Jan 18 '13 at 17:06

Kendo UI Grid Ajax Destroy Success

1 Answers1