[Solved] Mvc grid inline editing in popup window

[Marco]

Hi everyone,

I'm running into a problem which is driving me nuts...
I have a view where I have an "Edit Data" button. Clicking this button opens up a window with a grid inside it and I would like to be able to do in-line editing of this grid but it doesn't work. I probably have to better explain how I'm operating to clarify things...
The button mentioned responds to the click event (wired through jQuery). In the click even handler, I have an Ajax call to an Mvc partial view which contains everything that needs to be displayed in the popup window (grid included, of course).
This is the click handler:

function openAddRmaWindow(orderID) {
    var window = $("#winAddRma").data("tWindow");
    $.ajax({
        url: '/Order/AddRma/?orderId=' + orderID,
        type: "Get",
        data: "{}",
        cache: false,
        success: function (data) {
            if (data.Message == undefined) {
                window.content(data);
                window.center().open();
            } else {
                alert(data.Message);
            }
        },
        fail: function () {
            alert('Communication Error!');
        }
    });
}

It seems to work fine, and the window is opened with the grid correctly displayed, but every time I click a grid row "Edit" button, the whole page reloads and all I get is the partial view result in my browser...

Any clue as to what I might be doing wrong? Or, let me put it another way: is what I'm trying to do even possible?

Thanks,
Marco

[David]

Hi Marco,

You need to ensure that your grid on the partial page is operated totally on the client side (ajax). 

David

[Marco]

Hi David,

actually it was not all Ajax - I'm now trying to get it to work completely Ajax-ed but I'm running into problems.
Basically if I only have the Select ajax binding, the grid loads fine. When I add the Update (in order to have the "Edit" button on every grid row) the grid does not load anymore (the action bound by the Select method is never called...).
Below is the partial view code:

@using Nimbus.Model
<p>Choose the items to return from the list below.</p>
@{
    Html.Telerik().Grid<OrderPackingList>()
        .Name("rmaDetailGrid")
        .HtmlAttributes(new {style = "font-size:90%;"})
        .DataKeys(keys => keys.Add(pl => pl.Id))
        .DataBinding(dataBinding => dataBinding.Ajax()
                                        .Select("GetRmaItem", "Order", new { orderId = ViewBag.OrderId })
                                        .Update("UpdateRmaItem", "Order"))
        .Columns(columns =>
            {
                columns.Bound(pl => pl.OrderPickTicketItemEntity.OrderItemEntity.VariantEntity.ProductEntity.Code).Width(70).ReadOnly();
                columns.Bound(pl => pl.OrderPickTicketItemEntity.OrderItemEntity.VariantEntity.ProductEntity.Name).Width(100).ReadOnly();
                columns.Bound(pl => pl.OrderPickTicketItemEntity.OrderItemEntity.VariantEntity.AttributesList).Width(200).ReadOnly();
                columns.Bound(pl => pl.PackedQty).Width(70).ReadOnly();
                columns.Bound(pl => pl.QtyToReturn).Width(70).ReadOnly(false);
                columns.Command(commands => commands.Edit()).Width(80);
            })
        .Editable(settings => settings.Mode(GridEditMode.InLine))
        .Pageable()
        .Scrollable(settings => settings.Height(200))
        .NoRecordsTemplate("<span class='grdtemplate-norecord'>No more items can be returned.</span>")
        .Render();
}
<p style="text-align: center">
    <input id="btnCreateRma" type="submit" value="Create RMA" class="t-button" />
    <button id="btnCancelRma" class="t-button t-button-icon" type="button">Cancel</button>
</p>

And here are the actions (the update for now returns an empty set - but it never gets called anyway)...

[GridAction]
public ActionResult GetRmaItem(int orderId)
{
    Order order = DataContext.GetById<Order>(orderId);
    List<OrderPackingList> availablePackingLists = new List<OrderPackingList>();

    if (order != null)
    {
        List<RmaOrderItem> alreadyReturnedItems = new List<RmaOrderItem>();
        foreach (Rma rma in order.Rmas)
        {
            alreadyReturnedItems.AddRange(rma.RmaOrderItems);
        }

        foreach (OrderPacking orderPacking in order.OrderPackings)
        {
            foreach (OrderPackingList orderPackingList in orderPacking.OrderPackingLists)
            {
                var returnedPackingLists = alreadyReturnedItems.FindAll(ri => ri.OrderPackingListId == orderPackingList.Id);
                int returnedQty = returnedPackingLists.Sum(returnedPackingList => returnedPackingList.ApprovedQty);

                if (orderPackingList.PackedQty > returnedQty)
                {
                    orderPackingList.ReturnedQty = returnedQty;
                    availablePackingLists.Add(orderPackingList);
                }
            }
        }
    }

    return View(new GridModel<OrderPackingList> {Data = availablePackingLists.AsEnumerable()});
}

[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult UpdateRmaItem(int id)
{
    return View(new GridModel<OrderPackingList> { Data = new List<OrderPackingList>() });
}

Any help will be greatly appreciated!
Thanks,
Marco