[Solved] Grid with inline edit as part of larger form

[Bob]

I have a form where I am modifying an Entity called "Company". The company has a 1 to many relationship on "Budget Versions". I want to be able to view/edit/add/remove budget versions in a view. 

I would like inline editing (no need to press an edit button). 

I would also like to be able to just have the grid submit with the rest of the form. 

I'm not quite sure how to set this up. If I turn on inlne editing it wasn't to do AJAX binding. But, I really don't want to grid adding records via ajax... since when creating the Company there is no correct way to add to the database.

How can I use the grid in this way?

BOb

[Petur Subev]

Hello Bob,

Batch editing (in cell) is only supported using the Ajax binding. If you use Batch Editing, all the changes made to the Grid during the batch(in cell) editing can be found in the changeLog (i.e inserted/updated/deleted items). 
I attached a demo project which shows simple implementation how to get and display all the changes made to the Grid by add/delete/edit operations.

Best wishes,
Petur Subev
the Telerik team

[Bob]

Ah ok thanks for the sample.

Can I get access to the change log from the post if I submit this? Or do I have to put it into a hidden input field?

Also, is there an edit mode that will make the grid work like a spread sheet which would allow the user to move through the grid with the arrow/tab keys? Or at least be able to tab from field to field? 

BOb

[Petur Subev]

Hello Bob,


When you submit the changes made to the Grid when using batch editing, back in the controller you get a collection for each of the changes made to the grid (i.e. inserted/updated/deleted) as shown in this demo. 
About your second question, you can enable the keyboard navigation to achieve the desired result.


Kind regards,
Petur Subev
the Telerik team

[Bob]

Ok, but I don't want a submit limited to the grid. I want the grid to be in a form and when the whole from is submitted I want to know what was add/deleted/changed in this grid as well. I don't seem to be getting any values from the grid when I do this.

A simple example would be an Invoice create screen where there are fields for the header and then a grid to create the line items. When the invoice is saved I want it to post the header fields and the grid info in the same request. (not exactly what I am doing but the same idea).

BOb

[Bob]

Keyboard navigation seems to only apply to the grid when it is not in edit mode. When I am editing a field and I tab, it does move to the next field, however, it doesn't put it into edit mode. Is there an option that can enable this, or do I need to write some type of client side code to get this to work?

BOb

[Petur Subev]

Hi Bob,

The Grid itself is not an input element and cannot be submitted with a form.
What you can do instead is to pass all the other input elements as additional values when the Grid is submitting its data. To do so you need to hook a function to the OnSubmitChanges client event and add the values like this:

function AddExtraValues(e) {
        e.values.extraParam1 = 'hi';
        e.values.extraParam2 = $('#someinput').val();
    }

Then in your update action method add the parameters to the method signature using the same names(i.e. string extraParam1,string extraParam2).

As for your second question, yes there is an option called EditOnTab you can enable it like shown below:

.KeyboardNavigation(config=>config.EditOnTab(true))

Kind regards,
Petur Subev
the Telerik team

[Bob]

Thanks for the EditOnTab info. I didn't see anything in the docs about this in the grid config topic. I did find EditOnTab in the reference once I knew it's name. Is it there and I missed it?

Also, are there any better docs on the ForeignKey (look-up) support? Can you use an autocomplete textbox within the grid in cell edit mode? Would I have to set up an edit template to do this?

I think rather than adding the form info to the grid submit (there are hundreds of fields) I will add the grid info to a hidden field via grid change events. That might work. But I'd like to see an easier way to use the grid to edit child data as part of a larger form. This is a common use case we have for grids in our web app. 

BOb
 

[Petur Subev]

Hello Bob,

The documentation about the KeyBoardNavigation can be found here.
Yes you will have to modify the editor template for the Foreign Column to achieve such custom functionality as AutoComplete.

Greetings,
Petur Subev
the Telerik team

[Alex]

Petur,

Is there a sample project implementing batch editing where the grid is part of a larger form?  It's good that we can make it work with the AddExtraValues method that you describe, but I have a few concerns about how it would work.

1. Can form input elements be validated with unobtrusive client validation based on their model attributes?
2. What about applying validation attributes server side?
3. Do we have to use the submit button from the Grid?  It would make more sense visually to have a submit button for the entire form, since the grid is visually an element of the form, not the other way around.

On a side note, is there no way to bind the ChangeLog of the grid with the form submission?  It would be nice to be able to submit the form with the Grid acting like another input of the form, instead of the grid submitting the form.  Is that something that may be supported in the future?

Thank you.
Alex

[Petur Subev]

Hello Alex,

There is no sample project implementing such scenario. Here are some guidelines and answers to your questions:

1. Yes you can validate using the validate method 
   e.g. 
   

   var form = $(document.forms[0]);
   if (form.data('unobtrusiveValidation').validate()) {
           //perform submit
   }

2. When you apply attributes in your model the validation attributes will be available in the HTML and using the method above will validate and display the validation messages if needed.
3. You can use the client side method submitChanges to submit the data of the Grid manually.

There are utility methods to deal with the updated/deleted/isnerted items, but As I replied in my previous post the Grid is not an input element and sending its data to the server should be handled manually. 

Regards,
Petur Subev
the Telerik team

[Bob]

Alex,

It's kind of messy. What I did was create 3 hidden fields on my form. In the document ready function I have this code:

$("form").submit(function () {
    var grid = $("#BudgetVersions").data("tGrid")
    //grid.submitChanges();
    $("#BudgetVersionInserted").val(JSON.stringify(grid.changeLog.inserted));
    $("#BudgetVersionUpdated").val(JSON.stringify(grid.changeLog.updated));
    $("#BudgetVersionDeleted").val(JSON.stringify(grid.changeLog.deleted));
});

In the view model I exclude those three fields so the model binder won't try to bind them to the collections. 

[Bind(Exclude = "BudgetVersionDeleted,BudgetVersionInserted,BudgetVersionUpdated")]

Then in the controller in the edit POST action I have:

JavaScriptSerializer jss = new JavaScriptSerializer();
           model.BudgetVersionDeleted = jss.Deserialize<List<EntityBudgetVersionViewModel>>(Request["BudgetVersionDeleted"]);
           model.BudgetVersionInserted = jss.Deserialize<List<EntityBudgetVersionViewModel>>(Request["BudgetVersionInserted"]);
           model.BudgetVersionUpdated = jss.Deserialize<List<EntityBudgetVersionViewModel>>(Request["BudgetVersionUpdated"]);

That populates those three collections and in my mapping I use them to add/change/remove the records in the entity. 

The form validation works fine. 

I would stick with this but there are some issues.

1. You can't add a row at the bottom without your own js hack.
2. If there is an error when the model is validated, since the grid uses AJAX binding (required for batch incell editing) any changes made in the grid are lost. 
3. Some bugs in the grid wrt editontab and dirty indicator showing even on no change.

So, I have asked the KendoUI team if their grid can do this, and he sent me a sample but it takes alot of code as well. http://www.kendoui.com/account/support-tickets/view-ticket.aspx?threadid=502782 While it will work with the normal form submit stuff you have to wire up all the validation yourself.

At this point I think I am just going to write my own jQuery plug in that wraps a table element with indexed ids. This would also allow the model binder to properly deal with the collection data. If I go that way we will probably not go with the Telerik controls and I will look at one of the open source grids like slickgrid or jq grid for my readonly grids...although I do like the way the Telerike MVC grid works for that use case.

BOb

[Alex]

Petur,

Thank you very much for your response.  Perhaps you misunderstood my 2nd question.  I was asking about server side validation.  Typically there is code like if(!ModelState.IsValid) return View(myModel);  How should this be handled for the grid and form elements combined?  A complete example project with the following would be most helpful:

1. A form with a few input elements and a Telerik Grid with batch editing
2. A form button (not grid's) to submit
3. Model has validation attributes
4. Client side unobtrusive validation for form's input elements and for the grid - based on model attributes
5. Server side validation for form's input elements and for the grid - based on model attributes

Regarding the grid not functioning as an input element of the form, I understand this.  What I am trying to say is that it would be great if there was a Telerik ChangeLog<MyModelForGrid> object submitted with the form (or simply an IEnumerable<MyModelForGrid> and let us figure out what was inserted/updated/deleted).  I think this would make the grid's usage much more flexible and easier to use when part of a form with other inputs.  It would also allow for multiple grids in batch mode on one form to be submitted with one button and processed together (I don't see how that is currently possible since the grid has to submit itself).  Please consider this for a future enhancement to the grid.  Thank you.

Bob,

Thank you very much for your example.  What I decided to do for the moment is to split up the form from the grid - just seems cleaner and simpler to implement.  The end users of my application may raise an eyebrow when they see this, but hopefully won't mind the segregation.  Have you considered using DataTables plugin to do the editing?  It doesn't look as nice and easy to use with MVC as Telerik's grid, but at it may help avoid writing a lot of custom code.

[Petur Subev]

Hello again Alex,

I attached a sample projects which implements the key notes you asked for. One disadvantage is when you have some invalid entries in the Grid but not in the other input fields, you are able to press the submit button and lose all changes.

I hope this helps you, use it as a start point for more complex scenarios.

Regards,
Petur Subev
the Telerik team

[Vladimir]

I think it is obvious - to make a single post of associated data. How, for example, can I get the invoice id in its rows if the user creates new invoice? I tried to use the following code:

$.post("@Url.Content("~/Requests/AddManualRequest")",
{
      orgId: $('#OrgID'),
      dateFrom: $('#DateFrom').val(),
      dateTo: $('#DateTo').val(),
      inserted: grid.insertedDataItems(),
      updated: grid.updatedDataItems(),
      deleted: grid.deletedDataItems()
},
function (data) {
      $('#ID').val(data.id);
});

But on the server I cannot properly deserialize the IEnumerable collection of rows. Collections are populated, but all fields are null. If I try to use any string serialization/deserialization techiques there are several errors with DateTime deserialization etc. Can you give advise or code how to solve this problem?

[HttpPost]
public JsonResult AddManualRequest(string orgId, DateTime dateFrom, DateTime dateTo,
    IEnumerable<RequestLineViewModel> inserted,
    IEnumerable<RequestLineViewModel> updated,
    IEnumerable<RequestLineViewModel> deleted
    )
{
    //IEnumerable<RequestLineViewModel> insertedItems = Deserialise<IEnumerable<RequestLineViewModel>>(inserted);
    int newId = 1;
    return Json(new { id = newId }, String.Empty, Encoding.GetEncoding(1251), JsonRequestBehavior.AllowGet);
}

[Bob]

Vlad,

See my post about. The model binder doesn't know how to handle this out of the box. You have to prevent those values from being bound automatically and use the Jason Serialize manually to populate your collections.

BTW: I abandoned the grid for this use case and wrote my own jQuery plug in. This was all too much of a pita for me to continue with.

BOb

[Vladimir]

Bob, than you very much.
It's worked in chain:

javascript: "inserted: JSON.stringify(detailsGrid.insertedDataItems())
" -> On controller Action: "JavaScriptSerializer.Deserialize(inserted)"

[Rajesh]

Hello Bob,

I have a similar requirement as outlined by you. In addition to the approach outlined in the sample project, one feasible is approach is partial saves - this esp. makes sense for complex nested objects
--- as the user may not be able to define the entire object in one session
--- allow multiple users to define different parts of the objects

Going with this approach, when the user creates a new object - i would pre-create a record in the data store. The user will submit the grid changes separately. In your case, pre-create the invoice header, allow the user to submit the line item data separately/or submit the same when the user saves the invoice. Invoice Header validations will be performed only on invoice save.

I would perform partial validations with partial saves. So, if the user submits just line items, you validate only the line items.

Of course, deletes would need to be cascaded.

This approach virtually mandatory for me, as one of my complex objects spans across 7-8 tabs (around 11-12 grids) all sharing a common header. Providing all the input could easily take a couple of hours -- and the risk of losing unsaved changes is too big to defer persistence till the user has provided all the input.

I know this doesnt address the technical issue you raised (i am struggling using Telerik Grids myself), but hopefully this approach will be useful.

[Alex]

submitChanges works fine if there are changes in the grid, but it doesn't call the server's action if there are no changes in the grid.  The client event OnSubmitChanges is also not fired.  How can I force submitChanges to always fire the OnSubmitChanges event and call the server action?  This is needed to process other fields with AddExtraValues function, as Petur suggested.

ANSWER:
I figured out the answer and posted it here.  Good thing source code was available for me to look inside the submitChanges function :)