Kendo for jQuery：在网格列的每个单元格中显示两个不同控件之一
Posted
技术标签:
【中文标题】Kendo for jQuery：在网格列的每个单元格中显示两个不同控件之一【英文标题】：Kendo for jQuery: show one of two different controls in each cell of a grid column 【发布时间】：2021-12-18 23:36:43 【问题描述】：我将 Kendo 用于 jQuery。我有一个网格，其中列的每个单元格都需要显示下拉控件或文本输入控件。我在这里找到了一种方法，用于在给定列的所有单元格中显示一个或另一个，但不能逐行、逐个单元格地执行此操作。
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());
;
);
【问题讨论】：
你能分享一些你到目前为止所做的代码吗？ 正在尝试。它一直说我只是发布代码。 好的，SO 上有一个错误...它会标记格式不正确的代码，并且即使在您更正之后也会继续标记它。您必须重新开始并再次插入更正后的代码。 【参考方案1】：由于我没有这些端点，因此无法使用您的最小工作示例。下面是一个示例，其中列的每个单元格都显示下拉列表或文本框。肉在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>【讨论】：
管理员将此标记为已回答，确实如此。谢谢你帮助我……我希望……在我的新职位上给人留下好印象！ @cmabe 太好了。如果此答案有用，请点赞和/或将其标记为已接受的答案。以上是关于Kendo for jQuery：在网格列的每个单元格中显示两个不同控件之一的主要内容，如果未能解决你的问题，请参考以下文章