Develop Reference

Kendo UI pass additional parameter when create, update and delete

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.

Bind search results in kendoGrid MVC

I need help here.I have kendogrid, which need to have a popup.Popup is loading from template(view1.cshtml) and everything is working perfectly.But when i add search in my page, and than add following 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"
},
in rest of the code in grid(search results are bind here to grid),search is working, popup is not working nothing and is showing when i click on the button to show up popup.What is here wrong?Thanks
<script>
$(function() {
$("#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: "#T("gp.Jobs.Fields.Status")",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "#T("gp.Job.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "#T("gp.Job.Fields.Customer")",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "#T("gp.Job.Fields.Name")"
},
#*{
field: "ShortDesc",
title: "#T("gp.Jobs.Fields.ShortDesc")"
},*#
{
field: "DateCompletition",
title: "#T("gp.Job.Fields.DateCompletition")"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: '#T("Common.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,
rowTemplate: kendo.template($("#jobRowTemplate").html()),
});
</script>

Change Value of kendo grid based on second datasource

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).

Kendo Grid Popup Edit mode not displaying ComboBox data

I have an issue displaying combobox data on the dropdown when I am in popup
edit mode in my kendo grid. When the editable parameter in the grid is changed to 'inline', the combobox behaves like it should. I think that the problem is in the custom popup template, but many changes have still produced no result.
Here's the script in the .cshtml file:
<script id="popup_editor" type="text/x-kendo-template">
<label for="name">Page Name</label>
<input name="name"
data-bind="name"
data-value-field="id"
data-text-field="name"
data-role="combobox" />
</script>
Here's the javascript:
var griddata = new kendo.data.DataSource({
transport: {
read: {
url: serviceRoot + "Approval/Get",
type: "POST",
contentType: jsonType,
cache: false
},
destroy: {
url: serviceRoot + "Approval/Delete",
type: "PUT",
complete: function(e) {
refreshData();
}
},
create: {
url: serviceRoot + "Approval/Create",
type: "PUT",
complete: function(e) {
refreshData();
}
},
update: {
url: serviceRoot + "Approval/Inline",
type: "PUT",
complete: function(e) {
refreshData();
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
scrollable: true,
height: 700,
schema: {
data: "list",
total: "total",
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
name: { editable: true, nullable: false, validation: { required: true }, type: "string" },
keyName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
countryName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: griddata,
selectable: "row",
allowCopy: true,
scrollable: true,
resizable: true,
reorderable: true,
sortable: {
mode: "single",
allowUnsort: true
},
toolbar: [{ name: "create", text: "Create New Content" }}],
edit: function(e) {
if (e.model.isNew() === false) {
$('[name="PageName"]').attr("readonly", true);
}
},
columns: [
{ field: "id", hidden: true },
{ field: "name", title: "Page Name", editor: PageNameComboBoxEditor, width: "200px" },
{
command: [
{ name: "edit" },
{ name: "destroy" }
],
title: " ",
width: "250px"
}
],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
pageable: {
refresh: true,
pageSizes: [5, 10, 15, 20, 25, 1000],
buttonCount: 5
},
cancel: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
});
function PageNameComboBoxEditor(container, options) {
ComboBoxEditor(container, options, "name", "id", "ApprovalPage/Get", options.model.id, options.model.name);
}
function ComboBoxEditor(container, options, textfield, valuefield, url, defaultid, defaultname) {
$("<input required data-text-field=\"" + textfield + "\" data-value-field=\"" + valuefield + "\" data-bind=\"value:" + options.field + "\"/>")
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataTextField: textfield,
dataValueField: valuefield,
text: defaultname,
value: defaultid,
select: function(e) {
var dataItem = this.dataItem(e.item);
var test = dataItem;
},
dataSource: {
transport: {
read: {
url: serviceRoot + url,
type: "GET"
}
}
}
});
}
Any direction would be appreciated!

First i noticed that you have typo and some double initialization and it's value specified different which cause problem (not sure if this is your problem so please try remove it),
<input name="name"
data-bind="name" -> typo maybe? no data-binding declaration like these
data-value-field="id" -> double init, you have it on your ComboBoxEditor function dataValueField: valuefield,
data-text-field="name" -> double init, you have it on your ComboBoxEditor function dataTextField: textfield,
data-role="combobox" />
But sure way to make it works i'm usually customize the edit function to declare the kendo widget for mode: popup like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="popup_editor" type="text/x-kendo-template">
<div>
<label for="name">Page Name</label>
<input id="combo_box" name="name" data-role="combobox" />
</div>
</script>
<script>
$(document).ready(function() {
var crudServiceBaseUrl = "http://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
}
}
}
}
}
});
dataSource.fetch();
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
edit: function(e) {
$("#combo_box").kendoComboBox({
autoBind: false,
dataTextField: 'ProductName',
dataValueField: 'ProductID',
filter: "contains",
text: e.model.ProductName,
value: e.model.ProductID,
dataSource: ({
type: "jsonp",
serverFiltering: true,
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
}
})
});
},
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"
}],
});
});
</script>
</div>
</body>
</html>

Kendo UI / set datasource from ajax call

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