Returning to Normal state afterinsert/inline edit

[Martin Moesby]

I've been scouring the forum for any answer to my problem, but so far, I have been unsuccessful.

Prereqs:
I have a view (Good, this is after all, Model-View-Controller design pattern :)
The View's model is a Master-detail datamodel representing only one object. The object has a List<object>.
In the view I have represented the Model's scalar properties using standard Html-helpers.
I also have a grid to represent the Model's List<object>-data.
This grid has been defined with 2 datakeys (id and linenumber)
The Grid have a ToolBar.Insert() function defined.
Each row in the grid have the traditional Edit/Delete commands.
The view renders fine and the grid is spot on.

My problems (or rather inconvenience):

• After inserting, the Grid stays in insert-mode, but the new row have been inserted correctly and shows up at the bottom of the list.
• After editing, the Grid stays in Edit-mode, but the edited row have been submitted to backend DB
• The "Cancel Edit" button removes the Model-id from the Url ("/ShowInvoice/123" becomes "/ShowInvoice"), unless a routekey have been defined, thus failing when trying to Exit mode.

So, by now, I am guessing, that you  would like some more details regarding the Controller and the Views...

OK, this is the View:

@model Models.InvoiceHeader

@{

ViewBag.Title = "Invoice Details";

var inv_id = Model.InvoiceId;

}

@helper DetailViewTemplate(WebViewPage page, Models.InvoiceHeader invoice)

{

}

<h2>Invoice @Html.DisplayFor(m=>m.InvoiceId), @Html.DisplayFor(m=>m.Date)</h2>

<div style="border: 1px solid #666; padding-top: 10px;">

<div style="width: 700px !important; float: left;">

<fieldset>

<legend>@Html.DisplayFor(m=>m.Name),

@Html.DisplayFor(m=>m.InvoiceEventParticipant.FirstName) @Html.DisplayFor(m=>m.InvoiceEventParticipant.LastName)</legend>

<div class="display-field">

@Html.DisplayFor(m=>m.CustomerId)

</div>

<div class="display-field">

@Html.DisplayFor(m=>m.Name)

</div>

<div class="display-field">

@Html.DisplayFor(m=>m.Adress)

</div>

<div class="display-field">

@Html.DisplayFor(m=>m.Adress2)

</div>

<div class="display-field">

@Html.DisplayFor(m=>m.Zip) @Html.DisplayFor(m=>m.City)

</div>

<div class="display-field">

<strong>Attention: @Html.DisplayFor(m=>m.ContactName)</strong>

</div>

</fieldset>

</div>

<div style="width: 200px; float: left;">

<fieldset>

<legend>Invoice status</legend>

<div class="display-field">

<span>Closed : @Html.DisplayFor(m=>m.Closed) </span>

</div>

<div>

<span>Closed date : @Html.DisplayFor(m=>m.ClosedDate) </span>

</div>

<div>

<span>Closed by : @Html.DisplayFor(m=>m.ClosedReference) </span>

</div>

</fieldset>

</div>

<div style="clear: both;" />

</div>

<fieldset>

<legend>Lines</legend>

@(Html.Telerik().Grid(Model.InvoiceLines)

.Editable(edit => edit.Enabled(false))

.PrefixUrlParameters(false)

.Name("GridLines")

.DataKeys(keys =>

{

keys.Add(m => m.InvoiceId).RouteKey("invoiceid");

keys.Add(m => m.Linenumber).RouteKey("linenumber");

})

.ToolBar(tools => { if (!Model.Closed) tools.Insert().ButtonType(GridButtonType.Image); })

.DataBinding(bind => bind.Server()

.Select("GetInvoiceline", "Invoice")

.Update("EditInvoiceLine", "Invoice")

.Insert("AddInvoiceLine", "invoice")

.Delete("DeleteInvoiceLine", "Invoice")

)

.Columns(col =>

{

col.Bound(i => i.Linenumber).Width(50).Title("#LNo").ReadOnly().Hidden();

col.Bound(i => i.InvoiceId).Width(50).Title("#INo").ReadOnly().Hidden();

col.Bound(i => i.Date).Width(190);

col.Bound(i => i.Description).Width(250);

col.Bound(i => i.Price).Width(150).Format("{0:N}").HtmlAttributes(new { style = "text-align:right" });

col.Command(cmd =>

{

cmd.Edit().ButtonType(GridButtonType.Image);

cmd.Delete().ButtonType(GridButtonType.Image);

}).Width(90).Visible(!Model.Closed);

})

.Sortable(sort =>

{

sort.OrderBy(order => order.Add(o => o.Linenumber));

sort.SortMode(GridSortMode.SingleColumn);

})

.RowAction(row =>

{

{

row.InEditMode = false;

row.InInsertMode = false;

}

})

)

<p>

@if (!Model.Closed)

{

@Html.ActionLink("Create Creditnote", "CreateCreditNote", "Invoice", new { id = Model.InvoiceId }, new { @class = "button" })

}

@Html.ActionLink("Back", "AllInvoices", "Invoice",null , new { @class = "button" })

</p>

</fieldset>


And this is the Controller (Selected actions only)

public ActionResult GetInvoiceLine(int id)
{
    return View("ShowInvoice", db.InvoiceHeaders.Find(id));
}

public ActionResult AddInvoiceLine(int id)
{
    InvoiceHeader header = db.InvoiceHeaders.Find(id);
    InvoiceLine line = new InvoiceLine() { InvoiceId = id };

    if (TryUpdateModel(line))
    {
        line.Linenumber = header.InvoiceLines.Max(x => x.Linenumber) + 10;
        header.InvoiceLines.Add(line);
        db.SaveChanges();
        ModelState.Clear();

    }
    return View("ShowInvoice", header);

}

public ActionResult DeleteInvoiceLine(int id, int linenumber)
{
    InvoiceLine line = db.InvoiceLines.Find(id, linenumber);
    db.InvoiceLines.Remove(line);
    db.SaveChanges();

    return View("ShowInvoice", db.InvoiceHeaders.Find(id));
}

[HttpPost]
public ActionResult EditInvoiceLine(int id, int linenumber)
{
    InvoiceLine line = new InvoiceLine();
    if (TryUpdateModel(line))
    {
        db.Entry(line).State = System.Data.EntityState.Modified;
        db.SaveChanges();
    }
    return View("ShowInvoice", db.InvoiceHeaders.Find(id));
}

So, now my Question is - WHERE did I mess up?

BTW, I have tried the ModelState.Clear()-command in both the "Add" and "Edit"-actions of the controller.

[Daniel]

Hello Martin,

In order to exit edit mode when the model is updated or inserted, you should clear the mode parameter by using a RedirectToAction result to the select action method. Please check the Server Editing demo for a sample.

Regards,
Daniel
the Telerik team