}
require_once '../include/header.php';
?>
<div class="demo-section">
<h2>Customers</h2>
<?php
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('template.php')->type('POST');
$transport = new \Kendo\Data\DataSourceTransport();
$transport->read($read);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)->schema($schema);
$dropDownList = new \Kendo\UI\DropDownList('customers');
$dropDownList->dataTextField('ContactName')->dataSource($dataSource)->attr('style', 'width:400px')->headerTemplate(<<<TEMPLATE
<div class="dropdown-header"><span class="k-widget k-header">Photo</span><span class="k-widget k-header">Contact info</span></div>
TEMPLATE
)->template(<<<TEMPLATE
<span class="k-state-default"><img src="../content/web/Customers/#= CustomerID #.jpg" alt="#= CustomerID #" /></span><span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>
TEMPLATE
)->valueTemplate(<<<TEMPLATE
<img class="selected-value" src="../content/web/Customers/#= CustomerID #.jpg" alt="#= CustomerID #" />
<span>#:data.ContactName#</span>
TEMPLATE
);
echo $dropDownList->render();
?>
</div>
<div class="demo-section">
<h2>Information</h2>
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
<div class="k-rtl">
<h2>RTL DropDownList</h2>
<?php
$dropDownList = new \Kendo\UI\DropDownList('input');
$dropDownList->dataTextField('text')->dataValueField('value')->dataSource(array(array('text' => 'Item 1', 'value' => '1'), array('text' => 'Item 2', 'value' => '2'), array('text' => 'Item 3', 'value' => '3')));
echo $dropDownList->render();
?>
</div>
</div>
<style scoped>
.demo-section {
width: 250px;
margin: 35px auto 50px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>
<?php
require_once '../include/footer.php';
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$dropDownList = new \Kendo\UI\DropDownList('dropdownlist');
$dropDownList->dataTextField('text')->dataValueField('value')->dataSource(array(array('text' => 'Item1', 'value' => '1'), array('text' => 'Item2', 'value' => '2'), array('text' => 'Item3', 'value' => '3')))->dataBound('onDataBound')->select('onSelect')->change('onChange')->close('onClose')->open('onOpen');
?>
<div class="demo-section">
<h3 class="title">DropDownList</h3>
<?php
echo $dropDownList->render();
?>
</div>
<div class="demo-section">
<h3 class="title">Console log</h3>
<div class="console"></div>
</div>
<script>
function onOpen() {
if ("kendoConsole" in window) {
kendoConsole.log("event: open");
}
}
function onClose() {
if ("kendoConsole" in window) {
kendoConsole.log("event: close");
}
}
<input id="index" value="0" class="k-textbox" style="width: 40px; margin: 0;" /> <button id="select" class="k-button">Select by index</button>
</li>
<li>
<input id="value" value="1" class="k-textbox" style="width: 40px; margin: 0;" /> <button id="setValue" class="k-button">Select by value</button>
</li>
<li>
<input id="word" value="Pulp" class="k-textbox" style="width: 100px; margin: 0;" /> <button id="find" class="k-button">Select item starting with</button>
</li>
</ul>
</div>
</div>
<div class="demo-section">
<?php
$dropDownList = new \Kendo\UI\DropDownList('movies');
$dropDownList->dataTextField('text')->dataValueField('value')->attr('style', 'width: 250px')->dataSource(array(array('text' => 'The Shawshank Redemption', 'value' => 1), array('text' => 'The Godfather', 'value' => 2), array('text' => 'The Godfather: Part II', 'value' => 3), array('text' => "Il buono, il brutto, il cattivo.", 'value' => 4), array('text' => 'Pulp Fiction', 'value' => 5), array('text' => "12 Angry Men", 'value' => 6), array('text' => "Schindler's List", 'value' => 7), array('text' => "One Flew Over the Cuckoo's Nest", 'value' => 8), array('text' => 'Inception', 'value' => 9), array('text' => 'The Dark Knight', 'value' => 10)));
echo $dropDownList->render();
?>
</div>
<script>
$(document).ready(function() {
var dropdownlist = $("#movies").data("kendoDropDownList"),
setValue = function(e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
dropdownlist.value($("#value").val());
},
setIndex = function(e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
var index = parseInt($("#index").val());
dropdownlist.select(index);
}
