There is a dropdownlist DiscountType in this kendo grid. There are two options in that dropdownlist which are Amount and Percentage. I want one of these options as selected by default while create new entry.
view
#{
Layout = Request.IsAjaxRequest() ? null :
"~/Views/Shared/_AdminLayout.cshtml";
}
<!--Kendo Scripts and Style Start------------------------------------------- -------------------------------------->
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.aspnetmvc.min.js">
</script>
<!--Kendo Scripts and Style End-->
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
height: 400,
columns: [
{ field: "Coup_Code", title: "Coupon Code"},
{ field: "Coup_Discription", title: "Coupon Discription" },
{ field: "DiscountType", title: "Discount Type", editor: PlaceDropDownEditor1 },
{ field: "DiscountAmount", title: "Discount Amount" },
{field: "ExpiredOn",format: "{0: yyyy-MM-dd}"},
{command: [ "edit" , "destroy"], width: 180 }
],
toolbar: ["create"],
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Coupon/Coupon_Read"
},
create: {
url: "/Coupon/Coupon_Create"
},
update: {
url: "/Coupon/Coupon_Update"
},
destroy: {
url: "/Coupon/Coupon_Destroy"
}
},
schema: {
data: "Data",
model: {
id: "CoupID",
fields: {
CoupID: { type: "number", editable: false, nullable: false },
Coup_Description: { type: "string" },
ExpiredOn: { type: "date", validation: { required: true, required: { message: "required" } } },
DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },
DiscountAmount: { type: "number", validation: { required: true, required: { message: "required" }, min: 0 } },
} }
},
serverPaging: true,
serverSorting: true,
},
editable: "inline",
scrollable: true
})
function PlaceDropDownEditor1(container, options) {
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataTextField: "Text",
dataValueField: "Value",
dataSource: {
type: "json",
transport: {
read: "/Coupon/GetDicountType"
}
}
});
}
</script>
ActionResult GetDicountType
public ActionResult GetDicountType()
{
List<SelectListItem> listItems = new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Percentage",
Value = "Percentage"
});
listItems.Add(new SelectListItem
{
Text = "Amount",
Value = "Amount",
Selected = true
});
return Json(listItems, JsonRequestBehavior.AllowGet);
}
You are missing the 'default' value directive in your model definition. Add something like:
defaultValue: { Value: "Percentage", Text: "Percentage"}
To the line:
DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },
Related
Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?
I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.
The most problem is to add field to grid.dataSource.schema.model.fields.
let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});
$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});
addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};
$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});
You can use setOptions to redefine the columns of the grid.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>
I have the following code snippet which is invoked when edit button in grid is clicked a window pops up
edit: function(e) {
$('input[name="prods"]').each(function()
{
var textarea = $(document.createElement('textarea'));
textarea.text($(this).val());
$(this).after(textarea).remove();
});
}
A text box input type is converted to textarea which works fine.
Once it is converted to textarea, how do I assign the value of textarea to $('input[name="prods"]')
when save button is clicked of popup window?
Please try with the below code snippet.
We have to retrieve value from the textArea and assigned its value into model property.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
</div>
<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 } }
}
}
}
});
$("#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",
edit: function (e) {
$('input[name="ProductName"]').each(function () {
var textarea = $(document.createElement('textarea'));
textarea.attr("id", "txtProductName");
textarea.text($(this).val());
$(this).after(textarea).remove();
});
},
save: function (e) {
e.model.ProductName = $('#txtProductName').val();
}
});
});
</script>
</body>
</html>
Let me know if any concern.
Could this be a mix of val and text? textarea.text seems wrong, that would normally be textarea.val('whatever')
Here this is covered:
jQuery get textarea text
You can use this method as well ..
<div class="ref">
<input type="text" name="prod" value="TEST"/>
</div>
jQuery('.edit').click(function(){
var val = jQuery('input[name="prod"]').val()
jQuery('.ref').html('<textarea name="prod">'+val+'</textarea>');
});
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 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.