Grid updated partially!

Title:

I have a grid with 4 coulumns: Name, Email, Phone number and Group which are properties of a Employee model. I use a popup when I want to edit a employee or add a new employee. The Edit button works just fine. After I edited and click save, all the grid is updated properly. But when I use create button to create a new employee, when I clicked save button on the popup, the database is updated but the grid is updated only partialy. Only Email and Phone number are shown up, the fields for Name and Group are empty. When I click refresh the page, all new data are shown up. What's wrong have I been doing? I really think the problem came from my itemCreated function but I dont know how to improve it. Any advice??
Here is my create action method:
        [HttpPost]
        public ActionResult Create(EmployeeViewModel viewmodel)
        {
            if (ModelState.IsValid)
            {
                var employee = new Employee
                {
                    FirstName = viewmodel.FirstName,
                    LastName = viewmodel.LastName,
                    PhoneNumber = viewmodel.PhoneNumber,
                    EmailAddress = viewmodel.EmailAddress,
                    ObjectState = ObjectState.Added
                };
                _context.Employees.Add(employee);
               _context.SaveChanges(true);
                viewmodel.Id = employee.Id;
                var listOfChecklistType = viewmodel.ChecklistType.ToList();
               ...
                return Json(viewmodel);
            }
            else
            {
                var errResponse = new JsonResponse("Unable to update the employee. Please try again.", false);
                return Json(errResponse);
            
            }
            
        }


Here is my Index.cshtml:
                    <div class="row">
                        <div class="row-sub">
                            @Html.Awe().InitPopupForm().Name("createEmployee").Url(Url.Action("Create", "Employee")).Success("itemCreated('EmployeeGrid',getUnitNameHandler)").OkText("Add").Title("Add Group")
                        </div>
                        <div class="row-sub">

                            @Html.Awe().InitPopupForm().Name("editGroup").Url(Url.Action("Save", "Employee")).Success("itemUpdated('EmployeeGrid',getUnitNameHandler)").OkText("Save").Title("Edit Group")
                        </div>

                    </div>


And here is the itemCreated function:

function itemCreated(gridId, handler) {
    return function (item) {
        var $grid = $("#" + gridId);

        if (typeof (handler) == "function") {
            handler(item);
        }

        var $row = $grid.data('api').renderRow(item);
        $grid.find(".awe-tbody").prepend($row);
        
        $row.addClass("awe-changing").removeClass("awe-changing", 1000);

    };
}
Here my GetItems:

        public ActionResult GetItems(GridParams g, string name,
            string phoneNumber, string email, string groupList)
        {
            name = (name ?? "").ToLower();
            phoneNumber = (phoneNumber ?? "");
            groupList = (groupList ?? "").ToLower();

            ...
            var query =
                employeeList.Where(
                    o =>
                        o.FirstName.ToLower().Contains(name) && o.PhoneNumber.ToLower().Contains(phoneNumber) &&
                        o.GroupList.ToLower().Contains(groupList))
                    .AsQueryable()
                ;


            var id = Convert.ToInt32(g.Key);
            return Json(new GridModelBuilder<EmployeeViewModel>(query
                .OrderBy(o => o.FirstName)
                .AsQueryable(), g)
            {
                Key = "Id",
                Map = o => new
                {
                    o.Id,
                    FullName = o.FirstName + " " + o.LastName,
                    o.EmailAddress,
                    o.GroupList,
                    o.PhoneNumber
                }
                ,
                GetItem = () => employeeList.FirstOrDefault(x => x.Id == id)
            }
                .Build());
        }

Minh Nguyen

asked at 09 Mar 2015

Answers

the itemCreated js function uses grid.api.renderRow(item), where "item" is returned from the server in the POST Create action, and it needs to be the same type (structure/properties) as the GridModel which you probably create as an anonymous type when you use the GridModelBuilder.Map so you need to use the same Map function in the POST create action when you return the model this is something that wasn't shown in the current demo but recently a new small demo (minimum setup mvc5 razor) was created where you can see this being done you can download it from here: http://awesome.codeplex.com/downloads/get/1435235 this is the part you need from the demo mentioned above: public class DinnersGridCrudController : Controller { private static object MapToGridModel(Dinner o) { return new { o.Id, o.Name, o.Date, ChefName = o.Chef.FirstName + " " + o.Chef.LastName, Meals = string.Join(", ", o.Meals.Select(m => m.Name)) }; } public ActionResult GridGetItems(GridParams g) { return Json(new GridModelBuilder<Dinner>(Db.Dinners.AsQueryable(), g) { Key = "Id", // needed for api select, update, tree, nesting, EF GetItem = () => Db.Get<Dinner>(Convert.ToInt32(g.Key)), // called by the grid.api.update ( edit popupform success js func ) Map = MapToGridModel }.Build()); } public ActionResult Create() { return PartialView(); } [HttpPost] public ActionResult Create(DinnerInput input) { if (!ModelState.IsValid) return PartialView(input); var dinner = Db.Insert(new Dinner { Name = input.Name, Date = input.Date.Value, Chef = Db.Get<Chef>(input.Chef), Meals = Db.Meals.Where(o => input.Meals.Contains(o.Id)) }); return Json(MapToGridModel(dinner)); // returning grid model, used in grid.api.renderRow }
Omu

answered at 09 Mar 2015
- I updated my question above adding my Getitems function. As you can see, I use the same viewmodel EmployeeViewModel for Create and Grid. Do I still have to using the mapping technique above?
  
  at 09 Mar 2015 Minh Nguyen
- You don't use the same viewmodel, because you're using Map, and the resulting type has FullName property which the returned viewmodel in the Create action doesn't have
  
  at 09 Mar 2015 Omu
- I found a bit easier way to fix it as well. Just adding extra properties to EmployeeViewModel that makes viewmodel passed to Create and Grid are the same. I think your way is very orginized and perfectly applicable to complex grid, for my simple grid this is just ok. Anw Thanks a lot!
  
  at 09 Mar 2015 Minh Nguyen

please Sign In to leave an answer