How do I nest widgets in kendoui using PHP wrapper? - php

Question

I wrote a code so as in manual with treeview.
div id="treview-back">
<?php
$treeview = new \Kendo\UI\TreeView('treeview');
// helper function that creates TreeViewItem with imageUrl
function ImageTreeViewItem($text) {
$item = new \Kendo\UI\TreeViewItem($text);
return $item;
}
$msg = ImageTreeViewItem('Message');
$msg->addItem(
ImageTreeViewItem('New Message'),
ImageTreeViewItem('Replay')
);
$msg->expanded(true);
$inbox = ImageTreeViewItem('Home');
$inbox->expanded(TRUE);
$inbox->addItem($msg);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
// add root-level nodes as datasource data
$dataSource->data(array($inbox));
$treeview->dataSource($dataSource);
echo $treeview->render();
?></div>
I need to add a Splitter widget, how do I have to do it? I didn't find it at manual.
Why, if I add this code
<script type="text/javascript">$("#treeview").kendoTreeView({
checkboxes: true
});</script>
The TreeView disappears.

Answer 1

The structure of the code is pretty much the same that you were doing for a tree.
<div id="outer-splitter">
<?php
$treeview = new \Kendo\UI\TreeView('treeview');
// helper function that creates TreeViewItem with imageUrl
function ImageTreeViewItem($text) {
$item = new \Kendo\UI\TreeViewItem($text);
return $item;
}
$msg = ImageTreeViewItem('Message');
$msg->addItem(ImageTreeViewItem('New Message'), ImageTreeViewItem('Replay'));
$msg->expanded(true);
$inbox = ImageTreeViewItem('Home');
$inbox->expanded(TRUE);
$inbox->addItem($msg);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
// add root-level nodes as datasource data
$dataSource->data(array($inbox));
$treeview->dataSource($dataSource);
// Create Left Pane
$leftPane = new \Kendo\UI\SplitterPane();
$leftPane->attr("id", "left-pane")->collapsible(true)->size(220)->content($treeview->render());
// Create Right Pane
$rightPane = new \Kendo\UI\SplitterPane();
$rightPane->attr("id", "right-pane")->collapsible(true)->size(220)->startContent();
?>
<div>
Right pane
</div>
<?php
$rightPane->endContent();
// create outer splitter
$splitter = new \Kendo\UI\Splitter('splitter');
$splitter->orientation("horizontal");
$splitter->addPane($leftPane);
$splitter->addPane($rightPane);
echo $splitter->render();
?>
</div>
You need to use \Kendo\UI\Splitter for configuring the Splitter, setting itscontent`. Here I used:
orientation for setting the orientation of the pane. horizontal means that they are tiled horizontally.
addPane Allows you to add \Kendo\Ui\SplitterPane.
In \Kendo\Ui\SplitterPane, I've used content for adding the another widget definition inside and startContent and endContent for delimiting the begin and end of an HTML block.
You can find very good information in here.
Your code makes the splitter disappear since that's a different way of using Kendo UI widgets (pure-JavaScript, not using PHP wrappers) and in that piece of code you are not defining the content of the new TreeView.