JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" type="text/css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.blueopal.min.css" type="text/css" rel="stylesheet">
<div id="panelbar-images"></div>
CSS
.k-panelbar img.k-image
{
float: right;
padding:10px 0 0 2px;
-webkit-border-radius: 5px;
-mox-border-radius: 5px;
border-radius: 5px;
}
JavaScript
var additionalFiles = 3;
$("#panelbar-images").kendoPanelBar({
dataSource: [
{
text: "3 Additional Files Selected",
items: [
{ text: "C:\\bootmgr", imageUrl: "http://demos.kendoui.com/content/web/treeview/close.png" },
{ text: "C:\\hiberfil.sys", imageUrl: "http://demos.kendoui.com/content/web/treeview/close.png"},
{ text: "C:\\setup.log", imageUrl: "http://demos.kendoui.com/content/web/treeview/close.png"}
]
}]
});
$('#panelbar-images').on('click', 'img.k-image', function(e)
{
var selected = $(e.srcElement).parentsUntil('.k-item').parent()
$('#panelbar-images').data('kendoPanelBar').remove(selected);
updatePanelBar(--additionalFiles);
});
function updatePanelBar(numFiles)
{
$('#panelbar-images').find(".k-header").text(numFiles + " Additional Files Selected");
//If there are no additional files selected make the panel bar disabled
if (numFiles == 0)
{
var panelbar = $('#panelbar-images').data('kendoPanelBar');
panelbar.enable(panelbar.select(), false);
}
}