kendoui grid only use create (no delete or update) - asp.net-mvc

$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
$.ajax( {
url: "/api/mygetfunction",
data: options.data,
success: function(result) {
options.success(result);
}
});
},
update: function (options) {
$.ajax({
url: "/api/myupdatefunction",
data: options.data,
success: function (result) {
options.success(result);
}
});
},
destroy: function (options) {
$.ajax({
url: "/api/mydestroyfunction",
data: options.data,
success: function (result) {
options.success(result);
}
});
},
create: function (options) {
$.ajax({
url: "/api/mycreatefunction",
type: 'POST',
data: ...
});
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return JSON.stringify(options);
}
}
},
schema: {
id: "Id",
model: {
fields: {
Id: { type: "string" },
Description: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false,
batch: false
},
toolbar: ["create"],
filterable: true,
sortable: true,
pageable: true,
columns: [
{
field: "Description",
title: "Description"
},
{ command: ["edit", "destroy"], title: " ", width: "210px" }
],
editable: "inline"
});
The grid has 3 rows. When I click on edit, I change the description column. Then I Click Update, and the grid caals the 'create' of the transport configuration. I've set batch to false, and strangely, there are 3 create's instead of the changed row.
What's the reason the editing of the grid causes a create instead of update?

This may happen if your records don't have an Id field properly set. The data source considers all records that don't have id to be "new".

Related

Kendo Column chart not showing any column,after publishing website on IIS

Im getting crazy over this issue,on my browser and my computer I can see the chart and and its columns ,but after publishing on IIS ,data is there but ,empty chart!,its not a complicated thing but i am wondering why this happen,im sending data as a JSON,i have also checked there if all my javascript file has been copied in the IIS ,all is ok,here is my controller:
List<FaultStatErrorIdViewModel> erro_id = new List<FaultStatErrorIdViewModel>();
foreach (DataRow dr in dt_error.Rows)
{
FaultStatErrorIdViewModel _error = new FaultStatErrorIdViewModel();
_error.cur_year = dr["cur_year"].ToString();
_error.error_dur = dr["error_duration_this_year"].ToString();
_error.m_error_id = dr["m_error_id"].ToString();
erro_id.Add(_error);
}
return Json(erro_id, JsonRequestBehavior.AllowGet);
Here is my chart:
$.ajax({
dataType: "json",
type: "POST",
url: "#Url.Action("faultStatErrorId","Ranking")",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "regionalManager": tmpString,"error_name":itemname, "dtFrom": dtFrom, "dtTo": dtTo }),
success: function (rslt) {
$("#error_id_Chart").kendoChart({
dataSource: {
data: rslt
},
title: {
text: "Main-Group:" + itemname,
position: "bottom",
},
chartArea: {
background: "#fcfcfc",
width: 700,
},
series: [{
// data: finaldata,
type: "column",
name: "DURATION",
color: "blue",
field: "error_dur",
categoryField: "m_error_id",
}],
legend: {
visible: false
},
valueAxes: {
name: "Duration",
title: { text: "Duration (Hrs)" },
majorGridLines: {
visible: false
},
line: {
visible: true
},
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
}
});

How to use data from Model to bind as kendo datasource

i have an empty div that i want to initialize into a kendo grid using data from Model..it should be something like the following but i am unable to load data
$("#mapsDiv").kendoGrid({
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
About.cshtml
#model List<KendoExample.Entities.ShortStudent>
<div class="row">
<div class="col-md-12 table-responsive" id="mapsDiv">
</div>
My Home Controller is as follows
List<ShortStudent> students = new List<ShortStudent>();
ShortStudent student1 = new ShortStudent();
student1.birthdate = new DateTime(1999, 4, 30);
student1.classname = "1B";
student1.firstname = "Fredie";
student1.surname = "Fletcher";
student1.studentid = 1;
ShortStudent student2 = new ShortStudent();
student2.birthdate = new DateTime(2010, 5, 4);
student2.classname = "1B";
student2.firstname = "Lee";
student2.surname = "Hobbs";
student2.studentid = 2;
students.Add(student1);
students.Add(student2);
return View(students);
I have seen examples using json but not odata...
Also, there are examples to use it like
#(Html.Kendo().Scheduler<MeetingViewModel>()
.Name("scheduler")
.Editable(false)
.DataSource(ds => ds
.Custom()
.Batch(true)
.Schema(schema => schema
.Model(m =>
{
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("Title");
m.Field("start", typeof(DateTime)).From("Start");
m.Field("end", typeof(DateTime)).From("End");
m.Field("description", typeof(string)).From("Description");
m.Field("recurrenceID", typeof(int)).From("RecurrenceID");
m.Field("recurrenceRule", typeof(string)).From("RecurrenceRule");
m.Field("recurrenceException", typeof(string)).From("RecurrenceException");
m.Field("isAllDay", typeof(bool)).From("IsAllDay");
m.Field("startTimezone", typeof(string)).From("StartTimezone");
m.Field("endTimezone", typeof(string)).From("EndTimezone");
}))
.Transport(new {
//the ClientHandlerDescriptor is a special type that allows code rendering as-is (not as a string)
read = new Kendo.Mvc.ClientHandlerDescriptor() {HandlerName = "customRead" }
})
)
)
which i am unable to understand/implement so please ignore this kind of a solution.
Currently i see a grid footer that says (1 - 2 of 4852 items) without any header or content(datarows) on my screen. What am I doing wrong?
UPDATE
var dataSource = new kendo.data.DataSource(
{
transport: {
read: {
url: '#Url.Action("About", "Home")',
contentType: "application/json",
dataType: "json"
}
},
schema: {
model: {
fields: {
firstname: { type: "string" },
surname: { type: "string" },
birthdate: { type: "date" },
classname: { type: "string" }
}
}
},
type: "json",
serverPaging: false,
serverFiltering: true,
serverSorting: false
}
);
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read: dataSource
},
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field: "age",
}]
});
HomeController
public ActionResult About()
{
....
return View(students);
}
Now the grid with header is there but no data is present..
If i change action to json, it returns plain json on the page
public ActionResult About()
{
....
return Json(students, JsonRequestBehavior.AllowGet);
}
Have you tried adding the fields to the grid?
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
columns: [
{
field: "classname",
title: "Class Name"
},
{
field: "firstname",
title: "First name"
},
{
field: "surname",
title: "Last name"
}
],
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
I just visit demo of telerik. Try following. Hope to help, my friend. Or you can visit this link to refer more: http://demos.telerik.com/kendo-ui/grid/remote-data-binding.
$("#mapsDiv")
.kendoGrid(
{
sortable: true,
dataSource: {
transport: {
read:"/Home/About",
dataType: "odata"
},
pageSize: 5
},
schema: {
model: {
fields: {
studentid: { type: "number" },
birthdate : { type: "date" },
classname : { type: "string" },
firstname : { type: "date" },
surname : { type: "string" }
}
}
},
pageable: true,
resizable: true,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell"
});
So here is what i found what should have been straight forward :)
var values = #Html.Raw(Json.Encode(#Model));
$("#MapDetails")
.kendoGrid(
{
sortable: true,
dataSource: {
data:values,
pageSize: 2
},
pageable: true,
resizable: false,
columnMenu: true,
scrollable:true,
navigatable: true,
editable: "incell",
columns:[{
field: "firstname",
},{
field: "surname",
},{
field: "classname",
},{
field
: "age",
}]
});

Bind data to grid after page load MVC

I have problem here.With kendo grid i'm loading data from some action in controller.But in the last column i have link which should fire another action in same controller.When i delete this piece of code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
last column is working perfect,bit when is present this piece of code, last column is not working>please here some help, i;m new to mvc.Below is the code:
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "Status",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "jobNumber",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "Customer",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "Id"
},
#*{
field: "ShortDesc",
title: "ShortDesc"
},*#
{
field: "DateCompletition",
title: "DateCompletition"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: 'Edit'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true
});
});
</script>
It seems you want to add a command to the grid, The way to add a command as described here is as follows
var grid = $("#jobs-grid").kendoGrid({
dataSource: {
pageSize: 20,
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
},
pageable: true,
height: 550,
columns: [
{ field: "JobNumber", title: "JobNumber", width: "140px" },
{ field: "CustomerId", title: "Customer", width: "140px" },
{ field: "Id", title:"Id" },
{ field: "DateCompletition", title:"DateCompletition" },
{ command: { text: "Edit",
click: function(e){
// here you can add your code
}},
title: " ",
width: "180px" }]
}).data("kendoGrid");
You might have a look on the documentation of the kendo grid here
Hope this will help you

kendo ui Grid "Popup mode" ,Edit And Delete Button, Not firing the Controller Action

This is My view with kendo ui grid, It's Read function firing just fine, but the problem just begins when I want to update,
The update Function in my controller Not even Firing,
<script>
$(document).ready(function () {
var dataSource = {
transport: {
type: "json",
read: {
url: "#Html.Raw(Url.Action("CommentList", "Comment"))",
type: "POST",
dataType: "json"
},
update: {
url: "#Html.Raw(Url.Action("CommentUpdate", "Comment"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "#Html.Raw(Url.Action("CommentDelete", "Comment"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Id: { type: "number" },
ProductName: { editable: false, type: "string"},
ProductPicture: { editable: false, type: "string"},
Text: { editable: false, type: "string"},
AdminConfirm: { editable: true, type: "boolean", validation: { required: true } }
}
}
},
requestEnd: function (e) {
if (e.type === "create" || e.type === "update") {
this.read();
}
},
error: function (e) {
alert("something wrong!");
// Cancel the changes
this.cancelChanges();
},
pageSize: 15,
serverPaging: true,
serverFiltering: true,
serverSorting: true
};
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: {
refresh: true,
pageSizes: [10, 15, 20, 30, 50]
},
height: 550,
columns: [
{
field: "ProductName",
title: "product name",
width: "90px"
},
{
field: "ProductPicture",
title: "picture",
width: "100px",
},
{
field: "Text",
title: "comment",
width: "180px"
},
{
field: "AdminConfirm",
title: "adminconfirm",
width: "70px",
},
{
command: [
{
name: "edit" , text: { // sets the text of the "Edit", "Update" and "Cancel" buttons
edit: "edit",
update: "update",
cancel: "cancel"
}
}
],
title: " ", width: "250px"
}
],
editable : {
mode : "popup",
window : {
title: "confirmation form"
}}
});
});
</script>
</div>
This is My first line of update Function
[HttpPost]
public ActionResult CommentUpdate(DataSourceRequest request, CommentViewModel comment)
Anybody Know Why?
Thanx in Advance

Kendo UI Grid update event is not firing

I have Kendo UI inline Grid. It read and populate the grid properly. but when i press edit and changes in any column and press update then update event is not firing.
and it also not calling controller method.
Hope someone can help me point out what I am doing wrong here.
following is my grid binding.
dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
type: 'POST',
url: "./GetIngredients",
dataType: "json",
success: function (result) {
options.success(result);
}
});
},
update: function (options) {
$.ajax({
type: 'POST',
url: "./UpdateData",
dataType: "json",
contentType: "application/json; charset=utf-8"
});
},
parameterMap: function (options, operation) {
alert('1');
if (operation !== "read" && options.models) {
alert('2');
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Division: { type: "string", editable: true, nullable: false },
GroupName: { type: "string", validation: { required: true } },
CategoryName: { type: "string" },
TypeName: { type: "string" },
ItemName: { type: "string" }
}
}
}
});
var grid = $("#grid").kendoGrid(
{
dataSource: dataSource,
height: 430,
scrollable: true,
pageable: true,
navigatable: true,
columns: [
{ field: "Division", title: "Division", width: "80px" },
{ field: "GroupName", title: "Group Name", width: "70px" },
{ field: "CategoryName", title: "Category Name", width: "110px" },
{ field: "TypeName", title: "Type Name", width: "100px" },
{ field: "ItemName", width: "140px" },
{ command: ["edit", "destroy"], title: " ", width: "170px" }],
editable: "inline"
}).data("kendoGrid");
following is the method in Homecontroller.
[HttpPost]
public JsonResult GetIngredients()
{
IngredientData ingredientData = new IngredientData();
ingredientData.Id = 1;
ingredientData.DivisionId = 1;
ingredientData.Division = "Division Abc";
ingredientData.GroupId = 2;
ingredientData.GroupName = "Group -A";
ingredientData.CategoryId = 3;
ingredientData.CategoryName = "Category -D";
ingredientData.FoodTypeId = 4;
ingredientData.TypeName = "Type One";
ingredientData.ItemId = 5;
ingredientData.ItemName = "Item One";
return Json( ingredientData , JsonRequestBehavior.AllowGet);
}
[HttpPost]
public void UpdateData()
{
// logic for update data in database.
}
Did you realize that you have batch set to true? When in batch mode, you have to invoke sync on dataSource or saveChanges in Grid definition.
Try adding a toolbar command for invoking saveChanges as follow:
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
height: 430,
scrollable: true,
pageable: true,
navigatable: true,
toolbar: [ "save" ],
columns: [
{ field: "Division", title: "Division", width: "80px" },
{ field: "GroupName", title: "Group Name", width: "70px" },
{ field: "CategoryName", title: "Category Name", width: "110px" },
{ field: "TypeName", title: "Type Name", width: "100px" },
{ field: "ItemName", width: "140px" },
{ command: ["edit", "destroy"], title: " ", width: "170px" }],
editable: "inline"
}).data("kendoGrid");
or simply remove batch mode.
I have faced same issue. But I have solved using this.
To fire create/delete/update we need to specify schema in dataSource( in schema we should mention atleast what is id field).
schema: {
model: {
id: "StudentID"
}
}
Code:
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
alert("read");
},
create: function (options) {
alert("create");
},
update: function (options) {
alert("update"); },
destroy: function (options) {
alert("destroy"); }
},
schema: {
model: {
id: "StudentID"
}
}

Resources