我正在使用Kendo进行jQuery。我有一个网格，其中列的每个单元格都需要显示下拉控件或文本输入控件。我在SO上找到了一种方法，用于在给定列的所有单元格中显示一个或另一个，但不用于逐行、逐单元格地显示。
let searchValue = '';
let selectedTab = 0;
$(document).ready(function () {
// SET UP TAB
$("#tabstrip").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
}
});
// RETRIEVE GRID DATA
const pendingGridDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: `/pending/Index?searchValue=${searchValue}`,
contentType: "application/json",
dataType: 'json',
type: "POST",
data: JSON.stringify(options.data),
success: function (result) {
options.success(result);
}
})
},
create: function (options) {
$.ajax({
url: "/pending/Create",
contentType: "application/json",
dataType: 'json',
type: "POST",
data: JSON.stringify(options.data),
success: function (result) {
options.success(result);
}
})
},
update: function (options) {
$.ajax({
url: "/pending/Update",
contentType: "application/json",
dataType: 'json',
type: "POST",
data: JSON.stringify(options.data),
success: function (result) {
options.success(result);
}
})
},
destroy: function (options) {
$.ajax({
url: "/pending/Delete",
contentType: "application/json",
dataType: 'json',
type: "POST",
data: JSON.stringify(options.data),
success: function (result) {
options.success(result);
}
})
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
sort: { field: "work_date", dir: "desc" },
schema: {
model: {
id: "cost_index",
fields: {
client_name: { type: "string", editable: false },
matter: { type: "string", editable: false },
narrative: { type: "string", editable: false },
cost_type_description: { type: "string" },
business_purpose: { type: "string" },
venue: { type: "string" },
work_date: { type: "date" },
post_date: { type: "date" },
work_amt: { type: "number" },
partner_work_amt: { type: "number", editable: false },
timekeeper_name: { type: "string", editable: false }
}
}
},
sort: { field: "work_date", dir: "desc" }
});
// BUILD THE GRID
const pendingGrid = $("#pending").kendoGrid({
dataSource: pendingGridDataSource,
editable: true,
filterable: true,
sortable: true,
detailInit: pendingSubGrid,
schema: {
model: {
fields: {
narrative: {},
cost_type_description: {},
client_name: {},
matter: {},
business_purpose: {},
venue: {},
work_date: {},
post_date: {},
work_amt: {},
partner_work_amt: {},
timekeeper_name: {}, }
}
},
columns: [
{
field: "narrative",
title: "Narrative",
width: "300px",
},
{
//field: "cost_type_description",
//title: "Cost Type Description1",
field: "cost_type_description",
title: "Expense Type",
template: columnTemplateFunction,
filterable: {
operators: {
string: {
contains: "Contains",
eq: "Is equal to",
neq: "Is not equal to"
}
}
}
},
{
field: "client_name",
title: "Client",
width: "150px",
},
{
field: "matter",
title: "Matter Number",
width: "155px",
},
{
field: "business_purpose",
title: "Purpose",
},
{
field: "venue",
title: "Venue",
},
{
field: "work_date",
title: "Expense Date",
format: "{0:MM/dd/yyyy}",
width: "140px"
},
{
field: "post_date",
title: "Post Date",
format: "{0:MM/dd/yyyy}",
width: "130px"
},
{
field: "work_amt",
title: "Amount",
width: "120px",
format: "{0:c}"
},
{
field: "partner_work_amt",
title: "Partner Share",
width: "140px",
format: "{0:c}"
},
{
field: "timekeeper_name",
width: "140px",
title: "Timekeeper",
},
{ command: ["edit", "destroy", { text: "Approve", click: ApprovePending }, { text: "Reject", click: RejectPending }], width: "350px" }
],
dataBound: function (e) {
var grid = e.sender;
var items = e.sender.items();
items.each(function (e) {
var i = 0;
var dataItem = grid.dataItem(this);
var ddt = $(this).find('.dropDownTemplate');
//if (i == 0) {
$(ddt).kendoDropDownList({
enable: false,
value: getET(), //dataItem.value,
dataSource: ddlDataSource,
dataTextField: "displayValue",
dataValueField: "value",
change: onDDLChange
});
//}
i = i + 1;
});
},
editable: "inline"
}).data("kendoGrid");
// VALUES FOR THE DROPDOWNS
var ddlDataSource = [{
value: 1,
displayValue: "Select Expense Type"
},
{
value: 2,
displayValue: "Gifts"
},
{
value: 3,
displayValue: "MSG"
}
];
function getET() {
return "2"
};
function columnTemplateFunction(dataItem) {
var i = 1;
if (i == 0)
var input = '<input class="dropDownTemplate"/>'
else
return "<strong>" + kendo.htmlEncode(dataItem.name) + dataItem + "</strong>"
//return "<strong>" + dataItem + "</strong>"
return input
};
function onDDLChange(e) {
var element = e.sender.element;
var row = element.closest("tr");
var grid = $("#grid").data("kendoGrid");
var dataItem = grid.dataItem(row);
dataItem.set("value", e.sender.value());
};
});
不能使用您的最小工作示例，因为我没有这些端点。这里有一个例子，列的每个单元格都显示一个下拉列表或一个文本框。肉在editor函数中。在State列上，如果Reference大于999，则会显示下拉列表，否则会显示文本框。代码中应该足够清楚。我相信这就是你在寻找的，正如标题"；示出了网格列的每个单元格中的两个不同控件中的一个"；。在Telerik DOJO中尝试以下代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Different Input Control in Column</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $('#grid').kendoGrid({
persistSelection: true,
selectable: 'cell',
editable: true,
dataSource: [{
reference: 100,
state: 'Pending',
},{
reference: 1000,
state: 'Pending',
}],
columns: [{
editable: function() { return false; },
field: 'reference',
title: 'Reference',
width: 100,
},{
field: 'state',
title: 'State',
width: 200,
attributes: {
'title': 'Click to edit',
},
editor: function(container, options) {
if (options.model.reference > 999) {
$('<input name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
optionLabel: 'Select Expense Type',
dataSource: ['Gifts', 'MSG'],
});
} else {
$('<input name="' + options.field + '" />')
.appendTo(container)
.kendoTextBox({
});
}
},
}],
}).data('kendoGrid');
});
</script>
</div>
</body>
</html>