Hi there,
I would like to use the MultiSelect to set the value of a cell in a TreeList.
My code almost works, but once the MultiSelect closes the values displayed in the grid are not what I expected.
I tried using a template to display selected values, but it doesn't look right.
Here is a dojo link https://dojo.telerik.com/OdAFErap/11 and below the code of that dojo
Thanks in advance,
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.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="treelist"></div>
<script type="text/kendo" id="alertsTemplate">
# if (Alerts) { #
<ul>
# for(var i = 0; i< Alerts.length; i++){ #
<li>#: Alerts[i].name #</li>
# } #
</ul>
# } #
</script>
<script>
$(document).ready(function () {
var AlertsList = [
{ code: '9', name: 'Black' },
{ code: '5', name: 'Red' },
{ code: '5', name: 'Yello' },
{ code: '3', name: 'Blue' },
{ code: '1', name: 'Green' }
];
var alertsEditor = (container, options) => {
$('<input name="Alerts">')
.appendTo(container)
.kendoMultiSelect({
dataValueField: "code",
dataTextField: "name",
dataSource: AlertsList
});
};
var dataSource = new kendo.data.TreeListDataSource({
data: [
{ id: 1, Name: "Daryl Sweeney", Alerts: null, parentId: null },
{ id: 2, Name: "Guy Wooten", Alerts: null, parentId: 1 },
{ id: 32, Name: "Buffy Weber", Alerts: null, parentId: 2 },
{ id: 11, Name: "Hyacinth Hood", Alerts: null, parentId: 32 },
{ id: 60, Name: "Akeem Carr", Alerts: null, parentId: 11 },
{ id: 78, Name: "Rinah Simon", Alerts: null, parentId: 11 },
{ id: 42, Name: "Gage Daniels", Alerts: null, parentId: 32 },
{ id: 43, Name: "Constance Vazquez", Alerts: null, parentId: 32 },
{ id: 46, Name: "Darrel Solis", Alerts: null, parentId: 43 },
{ id: 47, Name: "Brian Yang", Alerts: null, parentId: 46 },
{ id: 50, Name: "Lillian Bradshaw", Alerts: null, parentId: 46 },
{ id: 51, Name: "Christian Palmer", Alerts: null, parentId: 46 },
{ id: 55, Name: "Summer Mosley", Alerts: null, parentId: 46 },
{ id: 56, Name: "Barry Ayers", Alerts: null, parentId: 46 },
{ id: 59, Name: "Keiko Espinoza", Alerts: null, parentId: 46 },
{ id: 61, Name: "Candace Pickett", Alerts: null, parentId: 46 }
],
schema: {
model: {
id: "id",
expanded: true,
fields: {
Name: { type: "string", editable: false },
Alerts: { type: "string", editable: true }
}
}
}
});
$("#treelist").kendoTreeList({
dataSource: dataSource,
height: 540,
batch: true,
editable: "inline",
columns: [
"Name",
{
field: "Alerts",
editor: alertsEditor,
template: $("#alertsTemplate").html()
},
{ command: ["edit"] }
]
});
});
</script>
</div>
</body>
</html>
1 Answer, 1 is accepted
Hello, Reinaldo,
Thank you for providing an example that demonstrates the problem.
Here is the modified version and the changes I made:
1. Improve the if statement in the template:
<script type="text/kendo" id="alertsTemplate">
# if (Alerts !== null && Alerts.length) { #
<ul>
# for(var i = 0; i< Alerts.length; i++){ #
<li>#: Alerts[i].name #</li>
# } #
</ul>
# } #
</script>2. The Alerts field in the model should not be of type string:
schema: {
model: {
id: "id",
expanded: true,
fields: {
Name: { type: "string", editable: false },
//Alerts: { type: "string", editable: true }
}
}
}Let me know if you have any further questions.
Regards,
Martin
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.