This is my grid:
$(document).ready(function () {
datasource = new kendo.data.DataSource({
transport: {
read: {
url: '/Discount/Get',
dataType: "json",
},
update: {
url: '/Discount/Update',
dataType: "json",
type: "POST"
},
destroy: {
url: '/Discount/Delete',
dataType: "json",
type: "POST"
},
create: {
url: '/Discount/Add',
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
console.log(operation);
if (operation !== "read") {
return options;
}
}
},
schema: {
model: {
id: "Id",
fields: {
TopItemName: { type: "string" },
DiscountValue: { type: "number" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: datasource,
batch: true,
toolbar: ["create", "save", "cancel"],
height: 400,
navigatable: true,
pageable: true,
columns: [
{
field: "TopItemName",
editor: topItemDropDown,
template: "#=TopItemName#"
},
{
field: "DiscountValue",
format: "{0:p0}",
editor: function (container, options) {
$("<input name='DiscountValue'>")
.appendTo(container)
.kendoNumericTextBox(
{
min: 0,
max: 1.00,
step: 0.01
});
}
},
{
command: "destroy",
title: " ",
width: 150
}],
editable: true
});
function topItemDropDown(container, options) {
console.log(options);
$('<input required data-text-field="TopItemName" data-value-field="TopItemName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
serverFiltering: true,
transport: {
read: {
url: '/Discount/GetTopItemName',
dataType: "json",
type: "POST",
contentType: "application/json"
}
}
}
});
}
});
and somehow when I press the delete button it deletes the row from the grid but it never calls my action method so that the row gets removed from my database. But if I after i have pressed the delete button press add new record and then save changes then it calls my add action method and my delete action method. How can I make it call the delete action method when the delete button is pressed and not when save changes is pressed?
This is how the default editing works by default - the user has to click the "Save Changes" button to submit all changes to the server.
You can do one of the following
Set the autoSync option of the data source to true
Use a different editing mode - for example inline.
Handle the remove event of the grid and call this.dataSource.sync() to automatically sync the changes.
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 -->
I define a grid in my page :
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Grid/GetPerson",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'Get'
},
update: {
url: function (person) {
debugger;
return "/Grid/Update";
},
contentType: 'application/json; charset=utf-8',
type: "POST",
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number", editable: false, nullable: true },
Name: { validation: { required: true } },
Family: { validation: { required: true, min: 1 } },
Tel: {}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "Name", title: "نام" },
{ field: "Family", title: "فامیل" },
{ field: "Tel", title: "تلفن", width: "100px" },
{ command: [{ name: "edit", text: "ویرایش" }, { name: "destroy", text: "حذف" }], title: "عملیات", width: "160px" }],
messages: {
editable: {
cancelDelete: "لغو",
confirmation: "آیا مایل به حذف این رکورد هستید؟",
confirmDelete: "حذف"
},
commands: {
create: "افزودن ردیف جدید",
cancel: "لغو کلیهی تغییرات",
save: "ذخیرهی تمامی تغییرات",
destroy: "حذف",
edit: "ویرایش",
update: "ثبت",
canceledit: "لغو"
}
},
editable: "popup"
});
});
In person parameter in update function, i can access changed row by :
person.models[0]
it gives me :
Object {ID:1,Name:"pejman",Family:"kam",Tel:"098787887"}
SO i want to send this data to the server, so i have a action in GridController:
[HttpPost]
public void Update(TblPerson person)
{
//do update
}
for doing it, i try :
url: function (person) {
return "/Grid/Update/" + JSON.stringify(person.models[0])
},
in the update method, but it doesn't work, how can i do it?
NOTE: when i using above in Network tab of browser give me Bad Reuest error:
URL:http://localhost:2145/Grid/Update/%7B%22ID%22:1,%22Name%22:%22pejman%22,%22Family%22:%22kam%22,%22Tel%22:%22098787878%22%7D
Status Code:400 Bad Request
The problem is that kendo.stringify(options.models) sends your object in JSON string. So I believe that your js code can stay as it is. Just change your Update method in controller to something like:
[HttpPost]
public void Update(string models)
{
var values = JsonConvert.DeserializeObject<IEnumerable<TblPerson>>(models);
foreach (var value in values)
{
//Your action
}
}
The approach above just assume that you can send more models to update. Don't forget using Newtonsoft.Json
I start using Kendo UI editable grid, but I want to set my own datasource coming from php script which echoes a array of objects (copy/paste from the original Kendo UI datasource).
The thing is nothing populate the grid.
Here is the content of my html file.
` Back
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost/telererik-kendoui",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "../../datasource.php",
dataType: "json",
type:"GET",
contentType: "application/json; charset=utf-8",
cache: false
},
/* update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},*/
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 120 }],
editable: true
});
});
</script>
</div>`
The content of my datasource.php file is as follow
<?php
echo "[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]"?>
Any help on that?
im not really familier with php but with your data in the php file i have done a demo for you .
call the dataSource read as a function so you have much more flexibility to do anyting for the result you get.
read: function (options) {
var result=[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]
options.success(result);
}
http://jsfiddle.net/chanaka1/ank22b0n/
you may look the kendo doc for how to return a json from a php file here : http://docs.telerik.com/kendo-ui/php/widgets/combobox/remote-binding#create-php-file-which-returns-json
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 make a grid with remote data
$("#orderGrid").kendoGrid({
scrollable: false,
columns: [
{ field: "order_id", title: "ID", width:"30px",template:"<a href='<%=request.getContextPath()%>/order/edit/#=order_id#'>#=order_id#</a>" },
{ field: "order_date", title: "Дата",width:"65px"},
{ field: "order_customer", title: "Заказчик"},
{ field: "order_transport", title: "Перевозчик"}
],
dataSource: {
transport: {
read: {
url: "<c:url value="/order/json"/>",
dataType: "json",
data: someData
},
},
type: "odata",
schema: {
data: function (data) {
return data["data"];
},
total: function (data) {
return data["count"];
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: true,
sortable: true,
filterable: true,
});
And after I wanna make filter and update data
var grid = $("#orderGrid").data("kendoGrid");
grid.dataSource.read(filterData);
But after! when i paging grid it send old data (someData) to server and error occured....and i need filterData....
grid.refresh();
Do not help......
Answer
transport: {
read: {
url: "<c:url value="/order/json"/>",
dataType: "json",
data: function(){
return filterData;
}
},
},