} 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); }