[Solved] @Telierik: How to Fire Batch Edit Submit from Outside Grid?

[Radu]

Hi all,

I'm on 2011.1.315;

I'd like to submit a batch edited grid by clicking a button on the form outside the grid (ie: not the built-in .SubmitChanges() command). I want to do this in order to submit other form values along with the edited grid values.

I've read (tried, and failed) the following thread which is enormously hack-ish: http://www.telerik.com/community/forums/aspnet-mvc/grid/batch-editing-with-other-form-fields.aspx 

@Telerik: can you guys propose a cleaner way of achieving this?

Many thanks,

Radu

[venky]

I am also interested to know on how to do this. Thanks

[Kenneth]

Me three!

I'm looking to use a Grid for BatchEdting within a Wizard-type javascript dialog.  I want the wizard's "next" button to be used to move beyond the wizard step without calling an AJAX POST, and not a built-into-the-table "submit changes" button.

Essentially, I want to be able to BatchEdit without the control handling the submission.  I'd like to handle that all myself in javascript, fetching the inserted/deleted/updated values from the grid in javascript, (I can see how that's doable in documentation by handling the client-side event and calling e.preventDefault()) and calling a POST, later, for handling of batch edits.

Thanks!

[Atanas Korchev]

Hello,

 You can omit the SubmitChanges button and call the submitChanges JavaScript method manually:

var grid = $("#Grid").data("tGrid");

grid.submitChanges();

Regards,
Atanas Korchev
the Telerik team

[Radu]

Hi Atanas,

And thanks for the reply. However, the problem I (and everyone else subscribed to this thread) need to solve is to be able to post other form values at the same time as the editable grid items, so .SubmitChanges() doesn't quite cut it since it does the same as clicking the grid's Save button.

Let me ask the question differently: Is it possible to extend the grid's OnSubmitChanges event the same way as, say the OnDataBinding event?

For example,

//Grid setup
.ClientEvents(events => events
        .OnSubmitChanges("OrderLineItemsGrid_onSubmitChanges"))

// Client side event handler:
function OrderLineItemsGrid_onSubmitChanges(e) {

    var extendedDataValue = 'Extended Data Value';

    e.data = $.extend(e.data,

    {

        'ExtendedDataValue': extendedDataValue   
      });

}

// Controller POST method:
[AcceptVerbs(HttpVerbs.Post)]

[GridAction]

public ActionResult SaveAvailableOrderLineItems(

    [Bind(Prefix = "inserted")]IEnumerable<EditableOrderLineItem> insertedLineItem,

    [Bind(Prefix = "updated")]IEnumerable<EditableOrderLineItem> updatedLineItem,

    [Bind(Prefix = "deleted")]IEnumerable<EditableOrderLineItem> deletedLineItem,

    string ExtendedDataValue )

{...}

This example seems adequate, but unfortunately, it doesn't seem to follow the grid's other ClientEvent models. The ExtendedDataValue comes up null.

Thanks for any insight you can offer.

[venky]

As a workaround I ended up adding the form fields I needed to my viewmodel and updating them in the onsubmitchanges in the inserted/updated collections. I agree it would be nice if we could extend the onsubmitchanges event as we can do with the onsave event

        function onSave(e) {
            e.values = $.extend(e.values, {foo: "bar"});
        }

 

[Radu]

Hi Venky,

Very interesting technique. Could you please post an example of how you achieve this. In particular, how you read these values in your callback method?

If I understand correctly, your viewmodel includes a foo property which is updated with a form value at every OnSave event. Then when changes are submitted, you read the foo property's value from any given updated/inserted row element. Is this correct?

Second, and this question is for Atanas, when calling the SubmitChanges() from my own button, as you suggested:

var grid = $("#Grid").data("tGrid");
grid.submitChanges();

I get an "Object doesn't support this method" error. My function is declared above the grid. Does the declaration's location matter, or it there something else I need to do/reference?

Thanks again to you all. 

[Atanas Korchev]

Hello Radu,

 Sending additional values is done via the OnSave event.

 I cannot tell why you are getting this JavaScript error based on your description. I need more details. You can paste some code or even a sample project so we can troubleshoot.

Regards,
Atanas Korchev
the Telerik team

[venky]

Hi Radu,
This is what I did.
ViewModel has a property "foo" that will be updated with a form control value.
function OnSubmitChanges(e) {
    var inserted = e.inserted;
    for (var i = inserted.length -1; i >=0; --i) {
        inserted[i].foo = <form control value>
    }
    var updated = e.updated;
    ...
}
Thanks, Venky