Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Grid batch editing and MS MVC3

0 Answers 115 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 14 Sep 2012, 01:52 PM
Hi,

We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.

We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.

Who can help us?

Regards
Paul Sinnema

Here's the manually coded view that we use:
<script src="@Url.Content("~/DataSources/ProjectOnderhoudDataSource.generated.js")" type="text/javascript"></script>
<div id="projectEditForm">
<input id="DatumAanvang" data-bind="value: selectedProject.DatumAanvang" />
<hr />
<div id="projectRegelGrid" class="k-content"/>
<script type="text/javascript">
$(function ()
{
$("#DatumAanvang").width(220).kendoDatePicker();
ProjectOnderhoudDataSource.bind("change", function (data)
{
ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]); // not nice yet
});
ProjectOnderhoudDataSource.read();
kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel);
ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1;
$("#projectRegelGrid").kendoGrid
({
dataSource: ProjectOnderhoudProjectRegelListDataSource,
navigatable: true,
// deletable: true,
pageable: true,
// sortable: true,
height: 400,
toolbar: ["create", "save", "cancel"],
columns:
[
{ field: "Aantal", title: "Aantal" },
{ field: "Prijs", title: "Prijs", format: "{0:c}" },
{ field: "BTW", title: "BTW", format: "{0:c}" },
{ field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' },
{ field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" },
{ command: ["destroy"], title: " ", width: "110px" }
],
editable: true
});
});
</script>
</div>

And the DataSource we generate:
var ProjectOnderhoudDataSource = new kendo.data.DataSource
({
transport:
{
read:
{
url: "../ProjectOnderhoud/Get"
},
update:
{
url: function(item)
{
return "../ProjectOnderhoud/Update/" + item.Id;
},
type: "POST"
},
destroy:
{
url: function(item)
{
return "../ProjectOnderhoud/Delete/" + item.Id;
},
type: "DELETE"
},
create:
{
url: "../ProjectOnderhoud/Create",
type: "POST"
},
parameterMap: function (data, operation)
{
if(operation === "update")
{
var date;
date = new Date(data.DatumAanvang);
data.DatumAanvang = kendo.toString(new Date(data.DatumAanvang), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.DatumFaktuur);
data.DatumFaktuur = kendo.toString(new Date(data.DatumFaktuur), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.CreatedOn);
data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.ChangedOn);
data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss");
}
return data;
}
},
schema:
{
model:
{
id: "Id",
fields:
{
DatumAanvang:
{
type: "date",
validation: { required : true }
},
DatumFaktuur:
{
type: "date",
validation: { required : true }
},
Name:
{
type: "string",
validation: { required : true }
},
Id:
{
type: "int",
validation: { required : true }
},
CreatedOn:
{
type: "date",
validation: { required : true }
},
CreatedBy:
{
type: "int",
validation: { required : true }
},
ChangedOn:
{
type: "date",
validation: { required : true }
},
ChangedBy:
{
type: "int",
validation: { required : true }
}
}
}
}
});
var ProjectOnderhoudViewModel = new kendo.observable
({
projectSource: ProjectOnderhoudDataSource,
selectedProjectOnderhoud: null
});
var ProjectOnderhoudProjectRegelListDataSource = new kendo.data.DataSource
({
transport:
{
read:
{
url: function()
{
var parentId = ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId;
return "../ProjectOnderhoud/GetProjectRegelList/" + parentId;
},
parentId: null
},
update:
{
url: function(item)
{
if(item != null && item.Id != undefined)
{
return "../ProjectRegel/Update/" + item.Id;
}
return "../ProjectRegel/Update/-1";
},
type: "POST"
},
destroy:
{
url: function(item)
{
return "../ProjectRegel/Delete/" + item.Id;
},
type: "DELETE"
},
create:
{
url: "../ProjectRegel/Create",
type: "POST"
},
parameterMap: function (data, operation)
{
if(operation === "update")
{
var date;
date = new Date(data.CreatedOn);
data.CreatedOn = kendo.toString(new Date(data.CreatedOn), "dd-MM-yyyy HH:mm:ss");
date = new Date(data.ChangedOn);
data.ChangedOn = kendo.toString(new Date(data.ChangedOn), "dd-MM-yyyy HH:mm:ss");
}
return data;
}
},
batch: true,
pageSize: 15,
schema:
{
model:
{
id: "Id",
fields:
{
Aantal:
{
type: "int",
validation: { required : true },
editable: true
},
Prijs:
{
type: "float",
validation: { required : true },
editable: true
},
BTW:
{
type: "float",
validation: { required : true },
editable: true
},
Id:
{
type: "int",
validation: { required : true },
editable: true
},
CreatedOn:
{
type: "date",
validation: { required : true },
editable: true
},
CreatedBy:
{
type: "int",
validation: { required : true },
editable: true
},
ChangedOn:
{
type: "date",
validation: { required : true },
editable: true
},
ChangedBy:
{
type: "int",
validation: { required : true },
editable: true
}
}
}
}
});

And finally the controller we generate:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Net.Http.Formatting;
using System.Net.Http;
using MVC3DOViewmodel;
using System.Web;
using System.Web.Mvc;
using Xtensive.Orm;
using Xtensive.Orm.Web;
using System.Net;
 
namespace MVC3DOApp.Controllers
{
    public partial class ProjectOnderhoudController : MainController
    {
        public ActionResult Index()
        {
            return this.View();
        }
 
        public object Get() // List<PCProjectOnderhoud>
        {
            if(HasId)
            {
                return Json(VMProjectOnderhoud.GetById(this, Id), JsonRequestBehavior.AllowGet);
            }
            else
            {
                return Json(VMProjectOnderhoud.AllVMProjectOnderhoudList(this), JsonRequestBehavior.AllowGet);
            }
        }
 
        public HttpResponseMessage Update(int id)
        {
            HttpResponseMessage response = new HttpResponseMessage();
 
            if (id == -1) // Batch update
            {
                response.StatusCode = HttpStatusCode.OK;
            }
            else
            {
                using (var entity = VMProjectOnderhoud.GetById(this, Id))
                {
                    entity.DatumAanvang = Convert.ToDateTime(Request["DatumAanvang"]);
                    entity.DatumFaktuur = Convert.ToDateTime(Request["DatumFaktuur"]);
                    entity.Name = Request["Name"];
                    entity.CreatedOn = Convert.ToDateTime(Request["CreatedOn"]);
                    entity.CreatedBy = Convert.ToInt32(Request["CreatedBy"]);
                    entity.ChangedOn = Convert.ToDateTime(Request["ChangedOn"]);
                    entity.ChangedBy = Convert.ToInt32(Request["ChangedBy"]);
 
                    SaveChanges();
 
                    response.StatusCode = HttpStatusCode.OK;
                }
            }
 
            return response;
        }
 
        public object Delete(int id)
        {
            HttpResponseMessage response = new HttpResponseMessage();
 
            using(var entity = VMProjectOnderhoud.GetById(this, Id))
            {
                entity.Delete();
 
                SaveChanges();
 
                response.StatusCode = HttpStatusCode.OK;
            }
 
            return response;
        }
 
        public object Create()
        {
            return null;
        }
 
        public object GetProjectRegelList (int id)
        {
            VMProjectOnderhoud entity = VMProjectOnderhoud.GetById(this, id);
 
            entity.LoadProjectRegelList();
 
            return Json(entity.ProjectRegelList, JsonRequestBehavior.AllowGet);
        }
    }
}





No answers yet. Maybe you can help?

Tags
Data Source
Asked by
Paul
Top achievements
Rank 1
Share this question
or