#jquery #dynamic #kendo-ui #controls #creation
Вопрос:
Я использую кендо для 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" amp;amp; 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());
};
});
Комментарии:
1. Не могли бы вы, пожалуйста, поделиться каким-нибудь кодом о том, что вы сделали до сих пор?
2. пытаясь. он продолжает говорить, что я только публикую код.
3. хорошо, есть ошибка на SO…it помечает неправильно отформатированный код и продолжает отмечать его как таковой даже после того, как вы его исправили. вы должны начать все сначала и снова вставить исправленный код.
Ответ №1:
Не могу использовать ваш минимальный рабочий пример, так как у меня нет этих конечных точек. Итак, вот пример, где в каждой ячейке столбца отображается либо раскрывающийся список, либо текстовое поле. Мясо находится в editor функции. В столбце Состояние, если ссылка превышает 999, отображается раскрывающийся список, в противном случае отображается текстовое поле. Должно быть достаточно ясно в коде. Я полагаю, что это то, что вы ищете, как указано в заголовке «показать один из двух разных элементов управления в каждой ячейке столбца сетки». Попробуйте код ниже в ДОДЗЕ Телерика.
<!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> Комментарии:
1. Администраторы отметили этот вопрос как ответ, и это действительно было так. Спасибо за помощь мне… Я надеюсь… произвожу хорошее впечатление на своей новой должности!
2. @cmabe Это здорово. Если этот ответ полезен, пожалуйста, повысьте голос и/или отметьте его как принятый ответ.