[Solved] Batch Editing with Other Form Fields

[Nick]

I am looking into using your ASP.NET MVC grid as part of an application that allows the user to track invoices.  The grid would hold the various line items contained on the invoice to be entered.  But, on the page there would be other form fields like the invoice number, the vendor, sales tax, etc.  Is it possible to use your ASP.NET MVC grid in batch editing mode but have the batched updates contained within another encompassing object such as Invoice.  Possibly have an object Invoice as shown below:

public class Invoice
{
     public string InvoiceNumber;
     public decimal SalexTax;
     ...
     public IEnumerable<LineItem> insertedLineItems;
     public IEnumerable<LineItem> updatedLineItems;
     public IEnumerable<LineItem> deletedLineItems;
} 

And then have an action as follows:

public ActionResult SaveInvoice(Invoice invoice)
{
     .....
}

This action would accept an Invoice object that contains the various updates that need to be made to the LineItems.

Is something like this possible?  I wouldn't necessarily want the user to be able to update the Grid without submitting the entire Invoice to the SaveInvoice method.  If this isn't possible, is there an alternative approach I could use with your ASP.NET MVC controls to accomplish the desired result?

Thank you.

Nick

[Nick]

No response on this from anyone?

[Venkatesh]

Hi,

  Did you able to find the solution for your requirement ?
We are also have same kind of requirement. Do you have any suggestion ?

Thanks in Advance

[Nick]

I did not ever get a response nor did I ever figure out a way to do this. Sorry.

Nick

[Raymond]

I'm just starting now and have a similar issue.

I don't think the grid can support what you are asking, as the invoice header items are NOT part of the grid.

If I were to do this without the Telerik Grid, it should work because every input element would be part of my forms collection... but the Telerik Grid uses AJAX.

So, my planned workaround is to have the form collection on just the invoice header items
and then use ajax and telerik grid for the batch editing of the other items.

Obviously, the invoice "header" has to exist in the database before you can update/add/delete the child items.

[Nick]

This was my proposed solution as well.  I was just hoping to get around have to save the "header" information first and then allow for the line items to be entered.

Oh well.

[Venkatesh]

Hi Nick / Raymond,

     Thanks for sharing your thoughts and solution.

For my case, i have to maintain transaction to save header and grid items hence i prefer to save in single shot. So i did following steps and it resolved my requirement.

Step1: In the telerik grid declare OnRowDataBound Cilent side event.

@(Html.Telerik().Grid<TelerikMvcApplication1.ViewModels.SampleEntity>().Name("Grid").DataKeys(keys => keys.Add(p => p.uid))

    .ToolBar(commands =>

    {

        commands.Insert();

    })

        .DataBinding(dataBinding =>

                        dataBinding.Ajax()

                            .Select("_GetData", "Home")

                            .Update("_SaveData", "Home")

                     )

        .Columns(columns =>

        {

            columns.Bound(p => p.uid);

            columns.Bound(p => p.uname).EditorTemplateName("Combo");

            columns.Bound(p => p.udate).EditorTemplateName("Date");

            columns.Bound(p => p.umoney).Format("{0:c}");

            columns.Bound(p => p.udesc);

        })

            .ClientEvents(events => events.OnError("Grid_onError")

                                          .OnRowDataBound("OnRowDataBound")

                                      )

        .Editable(editing => editing.Mode(GridEditMode.InCell).DefaultDataItem(new TelerikMvcApplication1.ViewModels.SampleEntity()))

        .Pageable()

        .Scrollable()

        .Sortable()

        .Selectable()

        .Name("Grid1")

    )

Step2 : When click save button (which is outside the grid), In button onlcick event, i will call submitChanges() (which is telerik grid event) from client side. This is much similar to click save changes button. 

function SaveAll()
{
var grid = $('#Grid1').data('tGrid');
grid.SubmitChanges() ;
}

Step3: It will automatically call Grid save function in controller. Here we can get the Grid changes. From here return the latset data (which includes add, edit and deleted data) in Json format.

[HttpPost]

        [GridAction]

        public JsonResult _SaveData([Bind(Prefix = "inserted")]IEnumerable<SampleEntity> insertedProducts,

            [Bind(Prefix = "updated")]IEnumerable<SampleEntity> updatedProducts,

            [Bind(Prefix = "deleted")]IEnumerable<SampleEntity> deletedProducts)

        {

            List<Sample> objSample = new List<Sample>();

            objSample.Add(new Sample { insertedData = Server.HtmlEncode(SerializeMyData(insertedProducts)), insertedProducts = insertedProducts, updatedProducts = updatedProducts, deletedProducts = deletedProducts });

            string s = SerializeMyData(objSample);

            return Json(objSample);

        }

public class Sample

    {

       

        public IEnumerable<SampleEntity> insertedProducts { get; set; }

        [XmlIgnore]

        public IEnumerable<SampleEntity> updatedProducts { get; set; }

        [XmlIgnore]

        public IEnumerable<SampleEntity> deletedProducts { get; set; }

        public string insertedData { get; set; }

    }

Step4: Now it goes to OnRowDataBound Event. Here you can get Grid's changed data. Now you can submit the page and simply you can get it from Form collection

function OnRowDataBound(e) {

        //debugger;

       

        if (e.dataItem.insertedProducts) {

            $('#hdn1').val(e.dataItem.insertedProducts);

            $('#hdn2').val(e.dataItem.insertedData);

            $('#Save').click();

        }

    }

[Nick]

Interesting approach.  I haven't tested it but I presume it works!  I will mark it as the answer as it most fits the original problem. 

Thanks for sharing.

[Radu]

/* Edit : Unless my understanding of this is totally botched, this solution doesn't work.

This doesn't work (Step #3).
     function SaveAll()
    {
        var grid = $('#Grid1').data('tGrid');
        grid.SubmitChanges() ;
    }

I get an " Object doesn't support this property or method" error. I also tried it again after adding the in-grid SubmitChanges button with the same result.

@Nick: Have you had any luck with this? Any insight you could share?

Thanks again!

Edit */


Hey Venkatesh,

I'm a little confused by your proposed solution. Maybe you could clarify?

What I unserstand is you have a form with 

    1) a button to your form (#Save) which, on the onclick calls the js SaveAll() and subsequently, the grid's SubmitChanges().

    2) SubmitChanges() calls the Controller action specified in the grid's DataBinding Update event, thus processing the grid's changed fields.

    3) The controller action then returns , and fires the grid's OnRowDataBound event.

    4) Finally, OnRowDataBound will call $('#Save').click() to submit the entire form.

[Venkatesh]

Hi Nick,

   For point1: you can use one hidden variable to check. When page loaded set it as 0,  Under rowdatabound just update hiddenval =1 and and then trigger button click event. This would resolve circular reference.

For point2: Yes it will trigger on Onload as well as on each row bind.

For point3: Serialized data required if we need to store it in hidden field. Becuase we can not store object on client side.


 

[FinallyInSeattle]

Venkatesh - Is there a small sample you could post?

Thanks in advance!

[Bo]

Hello Venkatesh,

We are facing similar situation, if you have a sample code project to share more details.

Thanks a lot.

Bo Zhang

[Praveen]

Hi,
My requirement is i have grid and submit button.but submit button is outside the grid .the grid and submit button inside the form.how to do batch editing when i am clicking on submit button.

[Praveen]

I have a submit button outside the grid.how to do batch editing when am i clicking on submit button.please send sample code...i saw ur example.how the action method is binding when clicking on submit button.but u wrote dat action method in update event ,submit button is outside the grid.when u click on submit button how it fires the update event in grid.