This is a migrated thread and some comments may be shown as answers.

[Solved] Problems re-binding the grid after ajax update.

6 Answers 143 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Mike asked on 19 Jul 2011, 06:29 PM

error.png

SGDA.zip

Hi,

I have a problem with the rebinding of my grid after insert/update/delete ajax actions.
I am using ajax-based select and update, and am using view models to avoid circular references.
Here is my model:


using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
 
namespace SGDA.Models
{
    public class tblContratsType
    {
        [Key]
        public int ContratTypeNum { get; set; }
 
        [Required]
        public string ContratType { get; set; }
        
        public virtual ICollection<tblContrat> tblContrats { get; set; }
    }
}

 







 




using System;
using System.ComponentModel.DataAnnotations;
 
namespace SGDA.Models
{
    public class tblContrat
    {
        [Key]
        public int ContratNum { get; set; }
 
        [Required]
        public int StatutNum { get; set; }
 
        [Required]
        public int ContratTypeNum { get; set; }
 
        public DateTime? DateSignature { get; set; }
 
        public DateTime? DateDebutVigueur { get; set; }
 
        public DateTime? DateEcheance { get; set; }
 
        public int? NbPeriodeReconduction { get; set; }
 
        public int? PeriodeReconduction { get; set; }
 
        public int? JourDenoncer { get; set; }
 
        public string Remarques { get; set; }
 
        public DateTime? DateDepotSODRAC { get; set; }
 
        public DateTime? DateDepotSOCAN { get; set; }
 
        public DateTime? DateResiliation { get; set; }
 
        public virtual tblContratsType tblContratsType { get; set; }
    }
}


And here is my view model:

namespace SGDA.ViewModels
{
    public class tblContratsTypeViewModel
    {
        public int ContratTypeNum { get; set; }
        public string ContratType { get; set; }
    }
}


Context class:

using System.Data.Entity;
using SGDA.Models;
 
namespace SGDA.DAL
{
    public class SgdaContext : DbContext
    {
        public DbSet<tblContratsType> tblContratsTypes { get; set; }
        public DbSet<tblContrat> tblContrats { get; set; }
    }
}


Controller:



using System.Linq;
using System.Web.Mvc;
using SGDA.DAL;
using SGDA.Models;
using SGDA.ViewModels;
using Telerik.Web.Mvc;
 
namespace SGDA.Controllers
{
    public class HomeController : Controller
    {
        private SgdaContext db = new SgdaContext();
 
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";
 
            return View();
        }
 
        //Used for the Ajax binding
        [HttpPost]
        [GridAction]
        public ActionResult _AjaxBinding()
        {
            var model = from ct in db.tblContratsTypes
                        select new tblContratsTypeViewModel
                        {
                            ContratTypeNum = ct.ContratTypeNum,
                            ContratType = ct.ContratType
                        };
 
            return View(new GridModel { Data = model });
        }
 
        [HttpPost]
        [GridAction]
        public ActionResult Insert()
        {
            tblContratsType tblContratsType = new tblContratsType();
 
            if (TryUpdateModel(tblContratsType))
            {
                db.tblContratsTypes.Add(tblContratsType);
                db.SaveChanges();
            }
 
            //Rebind the grid
            var model = from ct in db.tblContratsTypes
                        select new tblContratsTypeViewModel
                        {
                            ContratTypeNum = ct.ContratTypeNum,
                            ContratType = ct.ContratType
                        };
 
            return View(new GridModel { Data = model });
        }
 
        [HttpPost]
        [GridAction]
        public ActionResult Update(int id)
        {
            tblContratsType tblContratsType = db.tblContratsTypes.Find(id);
 
            if (tblContratsType != null)
            {
                if (TryUpdateModel(tblContratsType))
                {
                    db.SaveChanges();
                }
            }
 
            //Rebind the grid
            var model = from ct in db.tblContratsTypes
                        select new tblContratsTypeViewModel
                        {
                            ContratTypeNum = ct.ContratTypeNum,
                            ContratType = ct.ContratType
                        };
 
            return View(new GridModel { Data = model });
        }
 
        [HttpPost]
        [GridAction]
        public ActionResult Delete(int id)
        {
            tblContratsType tblContratsType = db.tblContratsTypes.Find(id);
 
            if (tblContratsType != null)
            {
                db.tblContratsTypes.Remove(tblContratsType);
            }
 
            //Rebind the grid
            var model = from ct in db.tblContratsTypes
                        select new tblContratsTypeViewModel
                        {
                            ContratTypeNum = ct.ContratTypeNum,
                            ContratType = ct.ContratType
                        };
 
            return View(new GridModel { Data = model });
        }
 
        public ActionResult About()
        {
            return View();
        }
    }
}


And finally the view:

@model IEnumerable<tblContratsTypeViewModel>
           
@{
    ViewBag.Title = "Home Page";
}
 
<h2>@ViewBag.Message</h2>
 
@(
    Html.Telerik().Grid(Model)
        .Name("tblContratsTypesGrid")
        .DataKeys(dataKeys => dataKeys.Add(ct => ct.ContratTypeNum))
        .ToolBar(commands => commands.Insert())
        .Columns(columns =>
        {
            columns.Bound(ct => ct.ContratTypeNum);
            columns.Bound(ct => ct.ContratType);
            columns.Command(commands =>
            {
                commands.Edit().ButtonType(GridButtonType.Text);
                commands.Delete().ButtonType(GridButtonType.Text);
            }).Width(180).Title("Commandes");
        })
        .DataBinding(dataBinding => dataBinding
            //Ajax binding
            .Ajax()
            .OperationMode(GridOperationMode.Client) // <-- set the operation mode
            .Select("_AjaxBinding", "Home")
            .Insert("Insert", "Home")
            .Update("Update", "Home")
            .Delete("Delete", "Home")
        )
        .Pageable()
        .Sortable()
        .Filterable()
        .Groupable()
)
 
<br />
 
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>



@{
    Html.Telerik().ScriptRegistrar().Scripts(scripts => scripts.AddSharedGroup("jQueryValidation"));
}




The ScriptRegistrar is well defined in the layout page, and I have defined a group containing the jQuery validation files.

The problem is that after I edit a row in the grid and save it, the grid is well refreshed on screen and the DB is updated.

But when I click again on edit then I click on cancel, I get an error saying that "ContratTypeNum" is null, as if the grid has

lost its model (see attached picture, sorry it is in french!)





Attaching the project also (MVC3). Sorry for entering too much details, but I'm stuck here :)

















Thanks

Mike

6 Answers, 1 is accepted

answered on 20 Aug 2011, 05:54 PM

Hi Mike,

You'll notice that if you remove the line

.OperationMode(GridOperationMode.Client)

you'll then be able to delete without errors...the problem you will encounter though is that your grouping no longer works and your Grid will either throw an error on binding or will show no results. So remove the line

.Groupable()

You'll see now that your delete works without any errors...but of course now you've lost your Grouping functionality.

I've been trying to find a way to get Grouping, GridOperationMode.Client and Ajax Insert/Updates/Deletes all to work at the same time but haven't been able to. Hopefully the guys at Telerik can help us put together a working solution.