We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to save edited grid values in batch mode on a view with a complex model and two submit buttons

I'm quite new to the Web development, so please bear with me if I talk rubbish.
I have a view with three data grids - sort of like a dashboard. There is a submit button under the first grid and another one under the second. The third grid is purely informational.
I'm passing my data sources (DataTable) for all three of them using a model. Then I declare grids like this (using different DataTables of course):

.Datasource((System.Data.DataTable)Model.AllImports)

I'd like to be able to edit values in one column on the second grid inline in a batch mode and then click an external submit button to save the values and re-load the form, because based on the entered values the content of the first grid can change.

I tried different methods using your knowledge base, documentation and forum search, but I can't make it work.

Here is my view (since I don't have issues with the first and the third grid I left only the second grid definition ("DeferredMapFlatGrid") intact and as you can see from commented out lines I tried a few things there):

@model  CART.Models.Imports

<div id="ImportsToReconcile">
    <h3> Imports to be reconciled </h3>

    @(Html.EJ().Grid<object>("HierarchyImportsGrid")
            .Datasource((System.Data.DataTable)Model.UnrecedImports)
...
    )

    <br />
    <div>
        @using (Html.BeginForm())
        {
            @Html.EJ().Button("btnReconcileSelected").Text("Reconcile Selected").Size(ButtonSize.Large).Type(ButtonType.Submit).ShowRoundedCorner(true).ContentType(ContentType.TextAndImage).PrefixIcon("e-righttick").Width("170px").ClientSideEvents(e => e.Click("btnReconcileSelected_Clicked"))
            @Html.HiddenFor(m => m.ListOfIDs)
        }
    </div>
</div>

<div id="MissingSedols">
    <h3> Missing SEDOLs Mapping </h3>
    @(Html.EJ().Grid<object>("DeferredMapFlatGrid")
            //.Datasource(datasource => datasource.Json((System.Data.DataTable)Model.DeferredMapMissingOnly).BatchURL("Home/MDBatchUpdate").Adaptor(AdaptorType.UrlAdaptor))
            //.Datasource((System.Data.DataTable)Model.DeferredMapMissingOnly)
            //.Datasource(ds => ds.BatchURL("MDBatchUpdate").Adaptor(AdaptorType.UrlAdaptor))
            //.Datasource(ds => ds.Json((System.Data.DataTable)Model.DeferredMapMissingOnly).UpdateURL("NormalUpdate").Adaptor(AdaptorType.RemoteSaveAdaptor))
            .Datasource((System.Data.DataTable)Model.DeferredMapMissingOnly)
            .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.Batch); })
            .AllowSorting()
            .AllowSelection(true)
            .Columns(col =>
            {
                col.HeaderText("#").TextAlign(TextAlign.Center).Template("{{:~index + 1}}").Width(15).Add();
                col.Field("id").HeaderText("ID").IsPrimaryKey(true).Width(0).Add();
                col.Field("output_sedol").HeaderText("Mismatched Sedol").AllowEditing(false).Width(60).Add();
                col.Field("notes").HeaderText("Mismatched Security Name").AllowEditing(false).Width(120).Add();
                col.Field("headstock_sedol").HeaderText("Map To Sedol").EditType(EditingType.String).Width(60).Add();
                col.Field("insert_date").HeaderText("Inserted On").AllowEditing(false).Width(45).Format("{0:dd-MMM-yy}").Add();
                col.Field("comments").HeaderText("Comments").AllowEditing(true).Width(200).Add();
            })
    )
</div>
@using (Html.BeginForm("IndexSaveMap", "Home"))
{
    @Html.EJ().Button("btnUpdateMappings").Text("Update Mappings").Size(ButtonSize.Large).Type(ButtonType.Submit).ShowRoundedCorner(true).ContentType(ContentType.TextAndImage).PrefixIcon("e-save").Width("170px").ClientSideEvents(e => e.Click("btnUpdateMappings_Clicked"))
}
<br />
<div id="ImportHistory">
    <h3>History Of Imports</h3>
    @(Html.EJ().Grid<object>("ImportHistoryFlatGrid")
            .Datasource((System.Data.DataTable)Model.AllImports)
...
    )
</div>

@section scripts
{
    <script type="text/javascript">
           
    function btnUpdateMappings_Clicked() {
        $("#ListOfIDs").val("Mappings Updated");
        var obj = $("#DeferredMapFlatGrid").ejGrid("instance")
        obj.batchSave()
    }

    </script>
}


Here is the controller:

using System.Collections.Generic;
using System.Web.Mvc;
using CART.Models;

namespace CART.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            Imports imports = new Imports();

            return View(imports);
        }

        [HttpPost]
        public ActionResult Index(Imports imports)
        {
            string selected = imports.ListOfIDs;

            if (selected != null)
            {
                if (selected == "Mappings Updated")
                {
                    string newvalue = imports.DeferredMapMissingOnly.Rows[0]["headstock_sedol"].ToString();
                }
                else
                {
                    imports.ReconcileImportsByIDs(selected);
                }
            }

            Imports _imports = new Imports();

            return View(_imports);
        }

        [HttpPost]
        public ActionResult IndexSaveMap(Imports imports)
        {
            string newvalue = imports.DeferredMapMissingOnly.Rows[0]["headstock_sedol"].ToString();

            Imports _imports = new Imports();

            return View(_imports);
        }

        public ActionResult MDBatchUpdate(List<object> changed, List<object> added, List<object> deleted)
        {
            Imports imports = new Imports();
            string s;
            if (changed != null)
                s = "c";
            //OrderRepository.Update(changed);
            if (deleted != null)
                s = "d";
            //OrderRepository.Delete(deleted);
            if (added != null)
                s = "a";
            //OrderRepository.Add(added);
            var data = imports.DeferredMapMissingOnly;
            return Json(data, JsonRequestBehavior.AllowGet);
        }

    }
}



Can you please help?



3 Replies

VN Vignesh Natarajan Syncfusion Team September 5, 2017 01:18 PM UTC

Hi Yevgeniy, 

Thanks for using Syncfusion products. 

Before we proceed with your requirement, we need the following details 

1.Do you want to reload the data of First Grid based on the changed value of the Second Grid?  
 
2. Have you used any adaptors in First Grid? 

       3. Share more information regarding the requirement.    

So kindly provide above details, so that we can help you at the earliest. 

Regards, 
Vignesh Natarajan. 



YD Yevgeniy Detsik September 5, 2017 10:48 PM UTC

1.Do you want to reload the data of First Grid based on the changed value of the Second Grid?  

The data in the first grid may change based on what was entered in the second one. The changes to the second grid's data need to be saved in the database on the button click. 
Since on page reload the first grid is always gets "fresh" data from a database, either the first grid can be reloaded or the whole page, whatever is easier.
  
2. Have you used any adaptors in First Grid?

      No, I only need IDs of the selected rows which I store in the hidden field @Html.HiddenFor(m => m.ListOfIDs) and update the value there on the first button click event:

    function btnReconcileSelected_Clicked(e){
        var gridInstance = $("#HierarchyImportsGrid").ejGrid("instance");
        var selected = gridInstance.getSelectedRecords();
        var txtboxlist = "";
        $.each(selected, function (i, s) {
            txtboxlist += s["ImportId"] + ",";
        }
        )
        $("#ListOfIDs").val(txtboxlist);
    }

Because ListOfIDs is a property of the model, the controller gets the selected IDs like this:

 [HttpPost]
        public ActionResult Index(Imports imports)
        {
            string selected = imports.ListOfIDs;

//Some actions for selected IDs
...
//Reload Index page

          }

I hope this explanation makes more sense. If not, please let me know.

Thanks!


VN Vignesh Natarajan Syncfusion Team September 6, 2017 05:14 PM UTC

Hi Yevgeniy, 
 
Thanks For your patience. 
 
We have analyzed your query and we suspect that you want the make changes in database while updating through batch editing in second grid. So we have achieved your requirement through remotesaveadaptor and in actionComplete event of the second grid we updated the first grid using dataSource method of ejGrid. 
 
Please refer the code snippet below. 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .AllowScrolling() 
                              . 
                              . 
                              . 
   @Html.EJ().Button("btnReconcileSelected").Text("Reconcile Selected").Type(ButtonType.Submit).ShowRoundedCorner(true).ClientSideEvents(e => e.Click("btnReconcileSelected_Clicked"))  
       @(Html.EJ().Grid<object>("FlatGrid1")  
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource1).BatchURL("BatchUpdate").Adaptor(AdaptorType.RemoteSaveAdaptor)) // second grid with remotesaveadaptor to save the value changed in database              . 
              . 
              . 
     .ClientSideEvents(eve=>eve.ActionComplete("complete"))) 
    @Html.EJ().Button("btnUpdateMappings").Text("Update Mappings").Type(ButtonType.Submit).ShowRoundedCorner(true).ClientSideEvents(e => e.Click("btnUpdateMappings_Clicked")) 
              . 
              . 
              . 
              . 
function btnUpdateMappings_Clicked(args) { 
            var grid = $("#FlatGrid1").ejGrid("instance"); 
            grid.batchSave();           
 
        } 
        function complete(args) { 
                      if(args.requestType == "batchsave") { 
            var grid = $("#FlatGrid").ejGrid("instance"); // firstGrid 
            grid.dataSource(this.model.dataSource.dataSource.json); 
                     } 
        } 
 
    In the second Grid button click event, we have called batchSave( ) method which will call batch url and update the datasource of second grid. In actionComplete event we have check the condition with and updated the datasource using dataSource() method. 
 
For your convenience, we have prepared a sample. please refer the below for the sample 
Please refer our online documentation for your reference about removesaveadaptor and actioncomplete event  
 
Regards, 
Vignesh Natarajan 




Loader.
Live Chat Icon For mobile
Up arrow icon