MVC: Passing model from view to controller on saving IGGrid

Hello Stackoverflow community,

I have made a little sample application to illustrate my problem. Im using mvc 5 and the Infragistics Ignite UI igGrid. This is how the page looks like.

My model that I pass to the View is the class Company.

public class Company
{
     public int ID { get; set; }
     public string CompanyName { get; set; }
     public string Address { get; set; }
     public IQueryable<Employee> EmployeeList { get; set; }
}

And the Employee Class: 

public class Employee
{
      public int ID { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
}

This is how my controller looks like

    // GET: Company
    public ActionResult Index()
    {
        Company myCompany = new Company { ID = 1, CompanyName = "Cool Company", Address = "USA" };
        Employee employee1 = new Employee { ID = 10, FirstName = "Christiano", LastName = "Ronaldo" };
        Employee employee2 = new Employee { ID = 11, FirstName = "Sebastian", LastName = "Schweinsteiger" };

        List<Employee> employeeList = new List<Employee>();
        employeeList.Add(employee1);
        employeeList.Add(employee2);
        myCompany.EmployeeList = employeeList.AsQueryable();
        return View("Index", myCompany);

    }

    [HttpPost]
    public ActionResult SaveData()
    {

        GridModel gridModel = new GridModel();
        List<Transaction<Employee>> transactions = gridModel.LoadTransactions<Employee>(HttpContext.Request.Form["ig_transactions"]);
        // here im getting the changes of the employee table. This works fine. But how do I get the changes of my company?

        foreach (Transaction<Employee> t in transactions)
        {
            //do something.. 
        }

        JsonResult result = new JsonResult();
        Dictionary<string, bool> response = new Dictionary<string, bool>();
        response.Add("Success", true);
        result.Data = response;
        return result;
    }
}

and my View looks like this

I need to save the data from the company and from the employee table after clicking the "save" button. This has to be executed on one button click, since im doing some complex validations. I have no issuse saving the employee table, but i have problems saving the company attributes ( company name & company address).

Thank you very much.

You can trigger your own ajax request, in which you can include both the data from the igGrid’s transactions and the additional data from the input fields. The grid has a transactionsAsString method that directly returns the stringified data, ready to be send to the server. Here’s an example of what the code would look like:

$("#saveChanges").on("igbuttonclick", function () { 
            var companyName = $("#CompanyName").val();
            var address = $("#Address").val();

            var companyData = JSON.stringify({ "CompanyName": companyName, "Address": address });

            var gridTransactions = grid.igGrid("transactionsAsString");

            var opts = {
                type: "POST",
                url: "@Url.Action("SaveData")",
                data: { "ig_transactions": gridTransactions, "companyData": companyData },
                success: function (data, textStatus, jqXHR) {
                    //clear transaction log on success
                    grid.igGrid("allTransactions").clear();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            };
            $.ajax(opts);
});

It will hit the same Action in your controller. The code for de-serializing the transaction from the grid will be exactly same. To also deserialize the company data you can use a use a JavaScriptSerializer or some other means of de-serializing the passed data, for example:

JavaScriptSerializer serializer = new JavaScriptSerializer();
Company companyData = serializer.Deserialize<Company>(HttpContext.Request.Form["companyData"]);

Note that in the success function for the ajax call the old transactions of the grid should be cleared, as they’ve already been processed during the request.