grid kendo ui edit create delete

Question

I have page mvc cshtml

it contains an begin beginform:

@using (Html.BeginForm("ValiderLeChangement", "FichePersonnel", FormMethod.Post , new { id = "FormValider" }  ))
{
}

inside this form i have put grid kendo ui in this kendo grid i want to use

create add and delete like example in Kendo UI DEMO ( http://demos.kendoui.com/web/grid/editing-inline.html)

i ve probleme with the action of create or delete or edit don't fire on server

my code is :

@(Html.Kendo().Grid(Model.ListeContact)
    .Name("Grid")
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .ToolBar(toolbar => toolbar.Create())
    .Columns(columns =>
    {
        columns.Bound(p => p.Nom).Title("Nom").Width(20);
        columns.Bound(p => p.Prenom).Title("Prenom").Width(20);

        //columns.Bound(p => p.Lien.Libelle).Title("Lien").Width(20).ClientTemplate(????? );
        columns.Bound(p => p.Lien.Libelle).Title("Lien").Width(20);

        columns.Bound(p => p.Tel).Title("Telephone").Width(20);

        columns.Command(command => { command.Edit(); }).Width(30);
        columns.Command(command => { command.Destroy(); }).Width(30);
      /////////  columns.Bound(p => p.IdContact).ClientTemplate("#= Delete(data) #").Title("Supprimer").Width(5);
    })
    .Sortable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(true)
    .Events(events => events.Error("error_handler"))
    .Read(Read => Read.Action("ListeContact_Read", "FichePersonnel"))
        .Model(model => model.Id(p => p.IdContact))
        .Create(create => create.Action("EditingInline_Create", "FichePersonnel"))
        .Update(update => update.Action("EditingInline_Update", "FichePersonnel"))
        .Destroy(delete => delete.Action("EditingInline_Destroy", "FichePersonnel"))

    )
)

Stargazer Stargazer · Accepted Answer · 2013-08-06T08:58:07

How have you implemented your controller action method? Does it handles the request and return properly? It should be something like this:

public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ProductViewModel product)
    {
        if (product != null && ModelState.IsValid)
        {         
            SessionProductRepository.Insert(product);                                 
        }

        return Json(new [] { product }.ToDataSourceResult(request, ModelState));
    }

Note the first argument DataSourceRequest and teh return type Json. Maybe that's what you're missing. Also I noticed that you're indicating ServerOperation(true). As far as I understand, you should not need that if you are using AJAX Binding as you are.

EDIT: And so for the controller code, something like this:

    public partial class TextosController : EditorImageBrowserController
{
    public ActionResult ReadTextos([DataSourceRequest]DataSourceRequest request)
    {
        CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

        IQueryable<Texto> textos = modelo.Textos;
        DataSourceResult resultado = textos.ToDataSourceResult(request);
        ViewData["Textos"] = textos;
        return Json(resultado, JsonRequestBehavior.AllowGet);
    }
    public ActionResult CreateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
    {
        if (ModelState.IsValid)
        {
            CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

            // Create a new Product entity and set its properties from the posted ProductViewModel
            Texto entity = new Texto
            {
                TextoID = texto.TextoID,
                Titulo = texto.Titulo,
                Corpo = texto.Corpo,
                IsPrivado = texto.IsPrivado,
                TipoTextoID = texto.TiposTexto != null ? texto.TiposTexto.TipoTextoID : texto.TipoTextoID,
                TiposTexto = texto.TiposTexto
            };
            modelo.AddToTextos(entity);
            // Insert the entity in the database
            modelo.SaveChanges();
            // Get the ProductID generated by the database
            texto.TextoID = entity.TextoID;
            return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
        }
        // Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.
        return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
    }

    public ActionResult UpdateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
    {
        if (ModelState.IsValid)
        {
            CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

            // Create a new Product entity and set its properties from the posted ProductViewModel
            var entity = new Texto
            {
                TextoID = texto.TextoID,
                Titulo = texto.Titulo,
                Corpo = texto.Corpo,
                IsPrivado = texto.IsPrivado,
                TipoTextoID = texto.TiposTexto != null ? texto.TiposTexto.TipoTextoID : texto.TipoTextoID,
                TiposTexto = texto.TiposTexto
            };
            // Attach the entity
            modelo.AttachTo("Textos", entity);
            modelo.UpdateObject(entity);
            // Update the entity in the database
            modelo.SaveChanges();
            return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
        }
        // Return the updated product. Also return any validation errors.
        return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
    }

    public ActionResult DestroyTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
    {
        if (ModelState.IsValid)
        {
            CostSimulatorModel modelo = new CostSimulatorModel(new Uri(@"http://localhost:53212/CostSimulatorModelService.svc/"));

            // Create a new Product entity and set its properties from the posted ProductViewModel
            var entity = new Texto
            {
                TextoID = texto.TextoID
            };
            // Attach the entity
            modelo.AttachTo("Textos", entity);
            // Delete the entity
            modelo.DeleteObject(entity);

            // Delete the entity in the database
            modelo.SaveChanges();
            return Json(new[] { entity }.ToDataSourceResult(request, ModelState));
        }
        // Return the removed product. Also return any validation errors.
        return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
    }
}

grid kendo ui edit create delete

1 Answers