When doing a create, update or delete, I need to save other form and get a id of that save function and pass that id as a additional parameter with these events create, update, delete
How can
I have my grid script as below
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
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,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
I found something here but this doesn't look right
I need to post it to
[HttpPost]
public JsonResult Add(Product product, int categoryId)
{
}
Just simply inside parameterMap change return statement to this so that it would return categoryId
return kendo.stringify({
models: options.models,
categoryId: categoryIdFromSomewhere
)};
Small note, I use JSON.stringify, but quite surte if that will make any difference.
Related
https://jsfiddle.net/sshetye08/1uh6m6wj/4/
Steps to reproduce.
Click on "Add new record".
Click on sort icon of any column.
Observe the grid data.
Bug : Record getting saved though I haven't clicked "save" icon.
Does anyone have any solution for this.
index.html
<base href="http://demos.telerik.com/kendo-ui/grid/editing">
<body>
<div id="example">
<div id="grid"></div>
</div>
</body>
script.js
$(document).ready(function () {
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
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,
sortable: true,
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: 150 }],
editable: true
});
});
The record isn't being saved, it's only added to the grid. There is in fact a bug that makes the "dirty" annotation (the small red triangle) disappear after you sort but if you click on the "CANCEL CHANGES" button, the added row will be removed while rows that were saved with the "SAVE CHANGES" button will remain.
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 want to use use a popup menu for registration and I have to use radio button on it somewhere. It should have multiple choices and just one is able to chosen.
Here is my code:
Here is my PersonModel.js
define([
'kendo/kendo.data.min', 'robe/Validations'], function () {
var PersonModel = kendo.data.Model.define({
id: "oid",
fields: {
oid: {
editable: false,
nullable: true,
type: "string"
},
lastUpdated: {
editable: true,
nullable: true,
type: "string"
},
tckNo:{
editable:true,
nullable:false,
type:"string",
validation :getValidations("tckNo","T.C. Kimlik Numarası",true,false,11,11,"[0-9]")
},
name: {
editable: true,
nullable: false,
type: "string"
},
surname: {
editable: true,
nullable: false,
type: "string"
},
birthday: {
editable: true,
nullable: false,
type: "date"
},
isSingle:{
editable:true,
nullable:false,
type:"boolean"
}
}
});
return PersonModel;});
Here is PersonDataSource.js
define(['common/SingletonDataSource', './PersonModel'], function (SingletonDataSource, personModel) {
var personDataSource = SingletonDataSource.define({
name: "personDataSource",
parameters: {
transport: {
read: {
type: "GET",
url: AdminApp.getBackendURL() + "person/all",
dataType: "json",
contentType: "application/json"
},
update: {
type: "POST",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
destroy: {
type: "DELETE",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
create: {
type: "PUT",
url: AdminApp.getBackendURL() + "person",
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
if (operation !== "read") {
return kendo.stringify(options);
}
}
},
batch: false,
pageSize: 25,
schema: {
model: personModel
}
}
});
return personDataSource;});
And here is PersonManagement.js :
define([
'text!./PersonManagement.html',
'./PersonDataSource',
'kendo/kendo.grid.min',
'robe/view/RobeView'],
function(view,PersonDataSource){
var PersonManagementView = require('robe/view/RobeView').define({
name:"PersonManagementView",
html:view,
containerId:"container",
initialize:function(){
var grid = $("#personGrid").kendoGrid({
dataSource: PersonDataSource.get(),
sortable: true,
autoBind: false,
pageable: {
refresh: true
},
toolbar: [
{
name: "create",
text: "Yeni Kişi"
}
],
columns: [
{
field:"tckNo",
title:"TC Kimlik Numarası",
format:"{0:n0}"
},
{
field: "name",
title: "Ad"
},
{
field: "surname",
title: "Soyad"
},
{
field: "birthday",
title: "Doğum Günü"
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
}
});
}
});
return PersonManagementView;
}
);
Can you help me please?
You have too use checkboxes.
Radio-Buttons don't allow multiple selection.
I am very new to both kendo and javascript so excuse any lapses in knowledge. I have a kendo grid with a field called TicketStatusID. I have another independent datasource with TicketStatusID and TicketStatusName. Is there a way to replace TicketStatusID in my grid with TicketStatusName from my other datasource?
here is my grid:
var commentsDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
//url: sBaseUrl,
url: baseUrl + "TicketIssueComment",
type: "get",
dataType: "json",
contentType: "application/json"
},
create: {
url: baseUrl + "TicketIssueComment",
type: "post",
dataType: "json",
ContentType: 'application/json',
success: refresh
},
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "TicketCommentID",
fields: {
TicketCommentID: { type: "number" },
TicketID: { type: "number" },
TicketCommentValue: { type: "string" },
TicketCommentCreatedBy: { type: "string", defaultValue: "z13tas", editable: false },
TicketCommentCreatedTS: { type: "date", editable: false },
TicketStatusID: { type: "number", editable: false },
//TicketStatusName: { type: "string", editable: false }
}
}
},
filter: { field: "TicketID", operator: "eq", value: filterValue },
pageSize: 50,
serverPaging: true,
serverFilering: true,
serverSorting: true,
sort: { field: "TicketID", dir: "asc" },
});
//-----------------KENDO GRID-----------------
$("#gridComments").kendoGrid({
dataSource: commentsDatasource,
pageable:
{
refresh: true,
pageSizes: [10, 25, 50, 100],
buttonCount: 5
},
//height: 300,
width: 300,
//sortable: true,
toolbar: ["create", "save", "cancel"],
scrollable: true,
reorderable: true,
editable: true,
selectable: "row",
resizable: true,
edit: function edit(e) {
if (e.model.isNew() == false) {
$('input[name=TicketCommentValue]').parent().html(e.model.TicketCommentValue);
}
},
columns: [
{ field: "TicketCommentValue", title: "Comment", width: "500px" },
{ field: "TicketStatusID", title: "Status", width: "100px" },
{ field: "TicketCommentCreatedBy", title: "Created By", width: "100px" },
{ field: "TicketCommentCreatedTS", title: "Created Date", width: "150px", format: "{0:MM-dd-yyyy hh:mm tt}" }
]
});
and here is my second datasource:
var StatusDatasource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
dataType: "json",
url: baseUrl + "TicketIssueStatusView",
}
},
schema: {
data: "value",
total: function (data) {
return data['odata.count'];
},
model: {
id: "TicketStatusID",
fields: {
TicketStatusID: { type: "number" },
TicketStatusName: { type: "string" },
TicketStatusDescription: { type: "string" },
TicketStatusUpdatedTS: { type: "date" },
TicketStatusUpdatedBy: { type: "string" },
}
}
},
serverFilering: true,
optionLabel: "--Select Value--"
});
I think I may be onto something with this solution here - http://demos.telerik.com/kendo-ui/grid/editing-custom - but Telerik's documentation offers no explanation of how to implement. Thanks
Do it from this example.
Add this field where you want to change kendo grid.
$.ajax({
cache: false,
type: "POST",
url: "#Html.Raw(Url.Action("assing", "Customer"))",
data: postData,
complete: function (data) {
//reload antoher grid
var grid = $('#Customer-grid').data('kendoGrid');
grid.dataSource.read();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
traditional: true
});
from below code your problem is solve..try it first.
var grid = $('#Customer-grid').data('kendoGrid');
grid.dataSource.read();
{
field: "TicketStatusID",
title: "Status",
width: "100px",
template: #= StatusDatasource.get(data.TicketStatusID).TicketStatusName #
}
Remember your StatusDatasource should be top level, I mean available as windows.StatusDatasource, and both initialized and read data before grid initialization (without first condition there will be an error, and without second you will see undefined inside a column).
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