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/kendomon.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="bobox" 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="bobox" 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:('<a href="=#=ID#" target="_blank">#=Remarks#</a>')},
{ mand: "destroy", title: "Delete", width: "100px" }],
editable: true
});
$("#").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
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.mon.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="bobox" 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="bobox" 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:('<a href="http://www.seoranksmart.?eid=#=ID#" target="_blank">#=Remarks#</a>')},
{ mand: "destroy", title: "Delete", width: "100px" }],
editable: true
});
$("#").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
Share Improve this question edited May 23, 2017 at 12:21 CommunityBot 11 silver badge asked Mar 14, 2012 at 9:35 user1089288user1089288 991 gold badge6 silver badges12 bronze badges1 Answer
Reset to default 3You can refer to this official example off the KendoUI demos to set the custom editor up correctly.