Related
I defined a kendo grid like that, and somehow after adding a row, the first edit click I do (before sending to the server) the row I just added is disappearing, and after refreshing its still there.
any suggestions why its happening?
$("#actionGrid").kendoGrid({
scrollable: true,
height: "200px",
toolbar: [{name: "create", text: "Add"}],
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "order", title: "Order", width: 80 },
{ field: "action", title: "Action name"},
{ command: ["edit", "destroy"], width: 100 }
],
dataSource: {
schema: {
model: {
id:"taskId",
fields: {
taskId: { type:"number" },
order: { type: "number", validation: { min: 0 } },
action: {}
}
}
},
transport: {
read: {
dataType: "json",
type: "GET",
contentType: "application/json",
url: "action/readByPId?pId=" + pId
},
destroy: {
dataType:"json",
type:"POST",
contentType:"application/json",
url: "action/delete"
},
update: {
dataType: "json",
type: "POST",
contentType: "application/json",
url: "action/update"
},
create: {
dataType: "json",
type: "POST",
contentType: "application/json",
url: "action/update"
},
parameterMap:function parameterMap(options,type) {
if(type !== "read"){
return JSON.stringify(options);
}
}
},
sort: { field: "order", dir: "asc" }
}
});
Kendo Grid have straight rules .Like whenever create new record ,have to return updated list to client side call . please make sure whether that updated record is returning or not.
IF you doing online offline feature of kendo UI . then follow this following demo.
https://demos.telerik.com/kendo-ui/grid/offline
you have not mentioned the data communication method . but if you are doing purly custom way then you have to update datasoure after doing any operation .Please put following code to get update with new data .
$('#GridName').data('kendoGrid').dataSource.read(); <!-- first reload data source -->
$('#GridName').data('kendoGrid').refresh(); <!-- refresh current UI -->
Here i my c sharp code of controller api class DefComapny whose value are always null while posting a data from kendo grid thats why not entering any thing to database?
[HttpPost]
public void SaveDefCompny()
{
var result = new List<DefCompany>();
using (var data = new RPDBEntities())
{
DefCompanyDTO productViewModel = new DefCompanyDTO();
var product = new DefCompany
{
//same problem of all entites getting no value from grid
Id = productViewModel.Id, // getting no value from grid
CurrentCurrencyCode = productViewModel.CurrentCurrencyCode,
ShortName= productViewModel.ShortName,
FullName= productViewModel.FullName,
ContactPerson= productViewModel.ContactPerson,
Address1= productViewModel.Address1,
CompanyCity= productViewModel.CompanyCity,
CompanyState= productViewModel.CompanyState,
CompanyCountry= productViewModel.CompanyCountry,
ZipPostCode= productViewModel.ZipPostCode,
TelArea= productViewModel.TelArea
};
result.Add(product);
data.DefCompanies.Add(product);
data.SaveChanges();
}
}
here is my viewmodel code
document.onreadystatechange = function () {
var viewModel = kendo.observable({
products: new kendo.data.DataSource({
schema: {
//data:"Data",
total: "Count",
model: {
Id: "Id",
fields: {
Id: { editable: true, type: "int" },
ShortName: { editable:true, type: "string" },
FullName: { editable: true, type: "string" },
ContactPerson: { editable: true, type: "string" },
CurrentCurrencyCode: { editable: true, type: "int" },
Adress1: { editable: true, type: "string" },
CompanyState: { editable: true, type: "string" },
CompanyCity: { editable: true, type: "string" },
CompanyCountry: { editable: true, type: "string" },
ZipPostCode: { editable: true, type: "string" },
TelArea: { editable: true, type: "string" }
}
}
},
batch: true,
transport: {
read: {
url: "/api/Companies/GetAllCompanies",
dataType: "json"
},
create:{
url: "/api/Companies/SaveDefCompny",
dataType: "json"
},
update: {
url: "/api/Companies/SaveDefCompny", // here you need correct api url
dataType: "json"
},
destroy: {
url: "/api/Companies/Delete", // here you need correct api url
dataType: "json"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data) {
return kendo.stringify(data) ;
}
}
}
})
});
kendo.bind(document.getElementById("example"), viewModel);
}
how should i pass my inline kendo grid values to my controller so that it save it in database?
Check Kendo documentation and see what kind of parameters SaveDefCompny should expect. You should then be able to read whatever you require using those parameters.
url: "/api/Companies/SaveDefCompny", dataType: "json"
This most likely is sending your controller method the required data in json format.
Again: your answer lies in the Kendo documentation.
EDIT:
See this and this.
From their example:
public ActionResult Products_Create([DataSourceRequest]DataSourceRequest request, ProductViewModel product)
{
if (ModelState.IsValid)
{
using (var northwind = new NorthwindEntities())
{
// Create a new Product entity and set its properties from the posted ProductViewModel
var entity = new Product
{
ProductName = product.ProductName,
UnitsInStock = product.UnitsInStock
};
// Add the entity
northwind.Products.Add(entity);
// Insert the entity in the database
northwind.SaveChanges();
// Get the ProductID generated by the database
product.ProductID = entity.ProductID;
}
}
// Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.
return Json(new[] { product }.ToDataSourceResult(request, ModelState));
}
I have Odata WebApi, and I want to populate my dropdownlist with data from there.
I have datasource:
var postsDataSource = new kendo.data.DataSource({
type: 'odata',
serverFiltering: true,
transport: {
read: {
url: "/odata/Posts",
dataType: "json"
},
},
schema: {
model: kendo.data.Model.define({
Id: "Id",
RegionId: "RegionId"
}),
data: function (res) {
debugger;//this code is inaccessible!
console.log(res);
return res.value;
}
},
});
and dropdownlist like this:
var posts = $("#searchPost").kendoDropDownList({
optionLabel: "Выберите регион...",
dataTextField: "NameRu",
dataValueField: "Id",
dataSource: postsDataSource,
}).data("kendoDropDownList");
This part of code executes odata query and return me the following json response in the firebug's console:
{
"odata.metadata":"http://localhost:11029/odata/$metadata#Posts","odata.count":"13","value":[
{
"Id":0,"Number":"Lenina45","RegionId":1,"NameRu":"\u041b\u0435\u043d\u0438\u043d\u0430 45","NameKz":"\u041b\u0435\u043d\u0438\u043d\u0430 45","ShortName":"\u041b\u0435\u043d\u0438\u043d\u0430 45","DateBegin":null,"DateEnd":null,"OptimisticLockField":null
},{
"Id":1,"Number":"Zhumabaeva15","RegionId":2,"NameRu":"\u0416\u0443\u043c\u0430\u0431\u0430\u0435\u0432\u0430 15","NameKz":"\u0416\u0443\u043c\u0430\u0431\u0430\u0435\u0432\u0430 15","ShortName":"\u0416\u0443\u043c\u0430\u0431\u0430\u0435\u0432\u0430 15","DateBegin":null,"DateEnd":null,"OptimisticLockField":null
},
.....
]
}
Right after this response I am getting the following strange error:
TypeError: d.d is undefined;
And dropdownlist doesn't show me above json response.
When I populated kendo grid with odata web api, the following code in datasource solved my problem:
schema: {
data: function (res) {
return res.value;
}
},
but now, when I use it for dropdownlist it doesn't work at all, it's inaccessible.
PS> Sorry for my bad English.
You Data Is on the inner object "value" on your response , your response consist on page size , metadata url so we need to prase the data that kendo dataSource can understand here is a exsample
: Note Remove "type: 'odata'" and check , since you are saying the dataSource where the Data is from the Data function no need of it as I think.
var postsDataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "/odata/Posts",
dataType: "json"
},
},
schema: {
model: {
Id: "Id",
fields: {
Id: { type: "number" },
NameRu: { type: "string" },
NameKz: { type: "string"},
ShortName: { type: "string" }
}
},
data: function (response) {
return response.value;
},
total: function(response) {
return response.odata.count;
}
},
});
try this hope this helps.
I've been trying to make the Specification Attributes in nopCommerce editable inline using kendo grid.
If you're not a nop person, just think of an existing kendo editing grid which has one non-editable column and I want to make that column editable using dropdowns. Because of the nature of the data I'm editing, the dropdown options will be different for each row.
The current state is that the column displays correctly when not in edit mode. When in edit mode it displays the correct values, but no value is ever selected. Updating does not seem to post back to the server, and sometimes (depending upon what I try) causes javascript errors deep inside kendo.
I know next to nothing about kendo, and need to get updating with this dropdown working. Below are some code fragments (the whole thing is too long):
grid = $("#specificationattributes-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductSpecAttrList", "Product", new { productId = Model.Id }))",
type: "POST",
dataType: "json"
},
update: {
url: "#Html.Raw(Url.Action("ProductSpecAttrUpdate", "Product"))",
type: "POST",
dataType: "json"
},
destroy: {
url: "#Html.Raw(Url.Action("ProductSpecAttrDelete", "Product"))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
//ProductId: { editable: false, type: "number" },
SpecificationAttributeName: { editable: false, type: "string" },
SpecificationAttributeOptionId: { editable: true, type: "number" },
CustomValue: { editable: true, type: "string" },
AllowFiltering: { editable: true, type: "boolean" },
ShowOnProductPage: { editable: true, type: "boolean" },
DisplayOrder: { editable: true, type: "number" },
Id: { editable: false, type: "number" }
}
}
},
.......................
columns: [{
field: "SpecificationAttributeName",
title: "#T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttribute")",
width: 200
}, {
field: "SpecificationAttributeOptionId",
title: "#T("Admin.Catalog.Products.SpecificationAttributes.Fields.SpecificationAttributeOption")",
width: 200,
editor: renderDropDown, template: "#= getOptionValue(SpecificationAttributeName, SpecificationAttributeOptionId) #"
},
The method "getOptionValue" isn't included, but basically converts a value to a display-friendly label when it's not in edit mode. "renderDropDown" creates a kendoDropDownList containing the correct options for the current row.
If you return a id, value pair e.g
"{\"SpecificationAttributeOptionId\":\"0\",\"SpecificationAttributeName\":\"XYZ\"},
{\"SpecificationAttributeOptionId\":\"1\",\"SpecificationAttributeName\":\"ABC\"}"
Then you need to specify dataTextField, dataValueField. Otherwise if you return a List of string as follows, then you don't need to specify dataTextField, dataValueField and kendo will take care the rest.
"{\"SpecificationAttributeName\":\"XYZ\"},
{\"SpecificationAttributeName\":\"ABC\"}"
Hope this helps.
$("#SpecificationAttributeOptionId").kendoDropDownList({
dataTextField: "SpecificationAttributeName",
dataValueField: "SpecificationAttributeOptionId",
dataSource: {
transport: {
read: {
url: "/ControllerName/GetDropDownValueFunction",
type: "POST",
contentType: "application/json",
dataType: "json"
}
}
},
height: 100
});
I have looked at an example Kendo grid here, and another one on Codeproject and a thread on this site, but I don't seem to find the error. I'm not very knowledgeable with javascript or HTML, so I expect it to be a simple mistake on my part.
Here is the code I have so far:
$(document).ready(function () {
var baseURL = "/api/LeaveTypes",
leaveTypes = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: baseURL + "?getAll=true",
dataType: "jsonp",
type: "GET"
},
update: {
url: baseURL,
dataType: "jsonp",
type: "POST"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {type: "number", editable: false, validation: { required: true } },
Description: { type: "string", editable: false, validation: { required: true } },
IsEssLeaveType: { type: "boolean", editable: true, },
ColourRGB: {type: "string", editable: true, nullable: true }
}
}
}
});
$(".leavetypesgrid").kendoGrid({
dataSource: leaveTypes,
toolbar: ["save"],
columns: [{
field: "Id",
title: "Leave Type ID"
}, {
field: "Description",
title: "Leave Type"
}, {
field: "IsESSLeaveType",
template: '<input type="checkbox" #= IsESSLeaveType ? "checked=checked" : "" # ></input>',
title: "Flagged for ESS",
}, {
field: "ColourRGB",
title: "Colour"
}
],
scrollable: false,
editable: {
update: true
}
});
});
I am trying to get it to work in JSFiddle, but since I'm quite new to it, I'm still struggling to get the data source disconnected from the Controller that I'm currently using to populate the grid with, and connecting it to sample data.
Here is the Controller's Post method:
public SimpleResult Post(List<LeaveCalendarLeaveType> leaveTypesList)
{
return ESSLeaveDataManager.SaveLeaveTypes(leaveTypesList);
}
Any help will be much appreciated! :)
The first thing that I noticed is that you have two data sources defined. One called dataSource and another called leaveTypes. You are only setting the datasource on your grid to leaveTypes.
Did you configure your MVC route so that it goes to the action named Post() when /api/LeaveTypes is called? Otherwise, the url for the update config should be /api/LeaveTypes/Post