$item = new \Kendo\UI\TreeViewItem($text);
$item->spriteCssClass($spriteCssClass);
$item->id = $id;
return $item;
}
$documents = TreeViewItem(1, 'My Documents', 'rootfolder');
$documents->expanded(true);
$kendoproject = TreeViewItem(2, 'Kendo UI Project', 'folder');
$kendoproject->expanded(true);
$kendoproject->addItem(TreeViewItem(3, 'about.html', 'html'))->addItem(TreeViewItem(4, 'index.html', 'html'))->addItem(TreeViewItem(5, 'logo.png', 'image'));
$newsite = TreeViewItem(6, 'New Web Site', 'folder');
$newsite->expanded(true);
$newsite->addItem(TreeViewItem(7, 'mockup.jpg', 'image'))->addItem(TreeViewItem(8, 'Research.pdf', 'pdf'));
$reports = TreeViewItem(9, 'Reports', 'folder');
$reports->expanded(true);
$reports->addItem(TreeViewItem(10, 'February.pdf', 'pdf'))->addItem(TreeViewItem(11, 'March.pdf', 'pdf'))->addItem(TreeViewItem(12, 'April.pdf', 'pdf'));
$documents->addItem($kendoproject, $newsite, $reports);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->data(array($documents));
$treeview->dataSource($dataSource);
echo $treeview->render();
?>
<script>
// Delete button behavior
$(document).on("click", ".delete-link", function(e) {
e.preventDefault();
var treeview = $("#treeview").data("kendoTreeView");
treeview.remove($(this).closest(".k-item"));
});
</script>
$item = new \Kendo\UI\TreeViewItem($text);
$item->spriteCssClass($spriteCssClass);
return $item;
}
$site = TreeViewItem('My Web Site', 'folder');
$images = TreeViewItem('images', 'folder');
$images->expanded(true);
$images->addItem(TreeViewItem('logo.png', 'image'))->addItem(TreeViewItem('body-back.png', 'image'))->addItem(TreeViewItem('my-photo.jpg', 'image'));
$pdfs = TreeViewItem('pdf', 'folder');
$pdfs->expanded(true);
$pdfs->addItem(TreeViewItem('brochure.pdf', 'pdf'))->addItem(TreeViewItem('prices.pdf', 'pdf'));
$resources = TreeViewItem('resources', 'folder');
$resources->expanded(true);
$resources->addItem($pdfs)->addItem(TreeViewItem('zip', 'folder'));
$site->expanded(true);
$site->addItem($images)->addItem($resources)->addItem(TreeViewItem('about.html', 'html'))->addItem(TreeViewItem('contacts.html', 'html'))->addItem(TreeViewItem('index.html', 'html'))->addItem(TreeViewItem('portfolio.html', 'html'));
$treeview->addItem($site);
echo $treeview->render();
?>
</div>
<style scoped>
.demo-section {
width: 200px;
}
#treeview .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
{
$item = new \Kendo\UI\TreeViewItem($text);
$item->spriteCssClass($spriteCssClass);
return $item;
}
$documents = TreeViewItem('My Documents', 'rootfolder');
$documents->expanded(true);
$kendoproject = TreeViewItem('Kendo UI Project', 'folder');
$kendoproject->expanded(true);
$kendoproject->addItem(TreeViewItem('about.html', 'html'))->addItem(TreeViewItem('index.html', 'html'))->addItem(TreeViewItem('logo.png', 'image'));
$newsite = TreeViewItem('New Web Site', 'folder');
$newsite->expanded(true);
$newsite->addItem(TreeViewItem('mockup.jpg', 'image'))->addItem(TreeViewItem('Research.pdf', 'pdf'));
$reports = TreeViewItem('Reports', 'folder');
$reports->expanded(true);
$reports->addItem(TreeViewItem('February.pdf', 'pdf'))->addItem(TreeViewItem('March.pdf', 'pdf'))->addItem(TreeViewItem('April.pdf', 'pdf'));
$documents->addItem($kendoproject, $newsite, $reports);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
$dataSource->data(array($documents));
$treeview->dataSource($dataSource);
echo $treeview->render();
?>
</div>
<style scoped>
#treeview-sprites .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }