I have a problem to configure the Kendo-Ui with Combo-box with custom values. I have seen this question How to use ComboBox as Kendo UI grid column? but we are unable to configure the whole ...
Please look at the codes.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.js"></script>
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function (){
// var crudServiceBaseUrl = "http://localhost/kendo-prac/",
dataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost/kendo-prac/data/employees.php",
dataType: "jsonp"
},
update: {
url: "http://localhost/kendo-prac/data/update.php",
dataType: "jsonp"
},
destroy: {
url:"http://localhost/kendo-prac/data/delete.php",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ID",
fields: {
Name: { editable: false, nullable: false },
Title: { editable: true, nullable: false },
URL: { editable: true, nullable: false },
FTP: { editable: true, nullable: false },
// date: { editable: false, nullable: false },
Status: { type: "string", editable:false},
Remarks: { editable: false, nullable: false }
}
}
}
});
// template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 650,
scrollable: true,
sortable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "Name", width: "60px" },
{ field: "URL", width: "350px" },
{ field: "Title", width: "150px" },
{ field: "FTP", width: "150px" },
// { field: "Date", width: "150px" },
// { field: "Status", width: "100px" },
{field: "Status", width:"150px", template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')},
// { field: "Action", width: "100px" },
// { field: "Code", width: "100px" },
{ field: "Remarks", width: "50px",template:('#=Remarks#')},
{ command: "destroy", title: "Delete", width: "100px" }],
editable: true
});
$("#com").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
});
</script>
</div>
</body>
</html>
We have not implement able to configure the Combobox. we can simply built the select box with following options. We just update the Status from Combobox.
Thanks
Alen
You can refer to this official example off the KendoUI demos to set the custom editor up correctly.
Related
i am trying to expand row on select and collapse same row on click by using Kendo Grid for Mvc UI ,, How to Check the CSS class of the arrow icon in the selected row - k-plus status ,, in the other words i would like to check if selected row is expanded or not.
Use this script:
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
It checks if the row is expanded by looking after an element with aria-expanded.
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
],
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
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 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>
I am struggling to get the functionality of CRUD using the Kendo UI? My create and Update options dont seem to work but my read does, any help? I have been through plenty of tutorials but simply just cant get this to work.Thanks in advance.
Here is my code, this is my Index.php file:
<!DOCTYPE html>
<html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
batch: true,
transport: {
read: "data/ussd.php"
},
update: {
url: "data/ussd.php",
type: "POST"
},
create: {
url: "data/create.php",
type: "PUT"
},
parameterMap: function(options, operation){
if(operation !== "read" && option.models){
return{models : kendo.string(options.models)}
}
},
pageSize: 20,
schema: {
data: "data",
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
msisdn: {editable: true, type: "number"},
company: {editable: true},
description: {editable: true},
ussd: {editable: true},
updated: {editable: true, type: "date"},
added: {editable: true, type: "date"}
}
}
},
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
sortable: true,
height: 500,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: "45px" },
{ field: "msisdn", title: "MSISDN", width: "75px" },
{ field: "company", title: "Company", width: "100px" },
{ field: "description", title:"Description", width: "100px" },
{ field: "ussd", title: "USSD", width: "100px" },
{ field: "updated", title: "Updated", width: "100px" },
{ field: "added", title: "Added", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "140px" }],
schema: {
model: { id: "id" }
},
editable: "inline",
navigable: true
});
});
</script>
</div>
</body>
</html>
This is what i changed, basically URL and type was incorrect and not following the correct path
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: "data/whitelist.php?type=read",
update: {url:"data/whitelist.php?type=update", type:"POST"},
create: {url:"data/whitelist.php?=create",type:"POST"},
destroy: {url:"data/whitelist.php?type=destroy",type:"POST"}
},
batch: false,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: {editable: false, nullable: true},
msisdn: {editable: true, type: "number"},
company: {editable: true},
description: {editable: true},
ussd: {editable: true},
updated: {editable: true, type: "date"},
added: {editable: true, type: "date"}
}
}
},
serverFiltering: true,
serverSorting: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
sortable: true,
height: 430,
toolbar: [{name: "create", text: "Add New"}, "save", "cancel"],
columns: [
{ field: "id", title: "ID", width: "26px" },
{ field: "msisdn", title: "MSISDN", width: "50px" },
{ field: "company", title: "Company", width: "65px" },
{ field: "description", title:"Description", width: "65px" },
{ field: "ussd", title: "USSD", width: "50px" },
{ field: "updated", title: "Updated", width: "70px" },
{ field: "added", title: "Added", width: "70px" },
{ command: [{text:"Edit", name:"edit"}, {text:"Delete",name:"destroy"}], title: " ", width: "80px" }],
editable: "inline",
navigable: true
});
});
{ read: "data/ussd.php"
},
update: {
url: "data/ussd.php",
type: "POST"
},
create: {
url: "data/create.php",
type: "PUT"
}
Your Read and update both are using same php file.
and what is type PUT in create?
Just change the update url to other php file and get the posted values to run the query in the database.
and change the type of create also to POST as u are using POST for others too..
Under the Update section change this
url: "data/ussd.php",
in to
url: "data/update.php",
and try to get the posted values as i said before. see if works for you.
I'm currently implementing a kendo grid and i'm populating it with local data.
That is; I have generated a JSON string from my action and supplying that string on the view page.
In the end i would like to know if it is possible to implement full CRUD functions with local data?
here's a sample of the code written so far;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
I have realise that for the datasource, you have to declare transport to implement the CRUD. However, I need to declare "data". I tried declaring both transport and data. That doesn't seem to work.
Yes you can Here is JSFiddle Hope this will help you.
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});
When binding local data, the Grid widget utilizes an abstraction that represents a local transport. Therefore, it does not require a custom transport; modifications made in the grid are reflected to the bound data source. This includes rollbacks through a cancellation.
There is fully functional example of this in telerik documentation
What you need is define transport block in dataSource object with custom CRUD funtions which update local source.
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}