PHP Kendo\UI\ComboBox Examples

Example #1

File: keyboard-navigation.php Project: neevan1e/Done

<?php

require_once '../lib/DataSourceResult.php';
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
    <h3>T-shirt Size</h3>
<?php 
$comboBox = new \Kendo\UI\ComboBox('select');
$comboBox->placeholder('Select size ...')->attr('style', 'width: 200px')->attr('accesskey', 'w')->value('Large')->dataSource(array('X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'));
echo $comboBox->render();
?>
</div>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">
            <span class="key-button leftAlign wider"><a target="_blank" href="http://en.wikipedia.org/wiki/Access_key">Access key</a></span>
            +
            <span class="key-button">w</span>
        </span>
        <span class="button-descr">
            focuses the widget
        </span>
    </li>
</ul>

<ul class="keyboard-legend">
    <li>
        <span class="button-preview">

Example #2

File: index.php Project: neevan1e/Done

<div id="tshirt-view" class="k-header">
    <h2>Customize your Kendo T-shirt</h2>
    <img id="tshirt" src="../content/web/combobox/tShirt.png" />
    <div id="options">
        <h3>T-shirt Fabric</h3>
<?php 
$fabrics = new \Kendo\Data\DataSource();
$fabrics->data(array(array('text' => 'Cotton', 'value' => 1), array('text' => 'Polyester', 'value' => 2), array('text' => 'Cotton/Polyester', 'value' => 3), array('text' => 'Rib Knit', 'value' => 4)));
$input = new \Kendo\UI\ComboBox('fabric');
$input->dataSource($fabrics)->dataTextField('text')->dataValueField('value')->filter('contains')->placeholder('Select fabric ...')->suggest(true)->index(3);
echo $input->render();
?>
        <h3>T-shirt Size</h3>
<?php 
$select = new \Kendo\UI\ComboBox('size');
$select->dataSource(array('X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'))->placeholder('Select size ...')->index(0);
echo $select->render();
?>
        <button class="k-button" id="get">Customize</button>
    </div>
</div>
<style scoped>
#example h2 {
    font-weight: normal;
}
#tshirt-view {
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;

Example #3

File: api.php Project: neevan1e/Done

    </div>
    <div class="config-section">
    <span class="configHead">Select</span>
    <ul class="options">
        <li>
            <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>
    </ul>
    </div>
</div>
<div class="demo-section">
<?php 
$comboBox = new \Kendo\UI\ComboBox('movies');
$comboBox->dataTextField('text')->dataValueField('value')->attr('style', 'width: 250px')->dataSource(array(array('text' => '12 Angry Men', 'value' => 1), array('text' => 'Il buono, il brutto, il cattivo.', 'value' => 2), array('text' => 'Inception', 'value' => 3), array('text' => "One Flew Over the Cuckoo's Nest", 'value' => 4), array('text' => 'Pulp Fiction', 'value' => 5), array('text' => "Schindler's List", 'value' => 6), array('text' => 'The Dark Knight', 'value' => 7), array('text' => 'The Godfather', 'value' => 8), array('text' => 'The Godfather: Part II', 'value' => 9), array('text' => 'The Shawshank Redemption', 'value' => 10), array('text' => 'The Shawshank Redemption 2', 'value' => 11)));
echo $comboBox->render();
?>
</div>
<script>
$(function() {
    $("#filter").kendoDropDownList({
        change: filterTypeOnChanged
    });

    var combobox = $("#movies").data("kendoComboBox"),
        setValue = function(e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                combobox.value($("#value").val());
        },

Example #4

File: cascadingcombobox.php Project: neevan1e/Done

    <p>
        <label for="products">Products:</label>
<?php 
$read->url('cascadingcombobox.php?type=products');
$transport->read($read);
$products = new \Kendo\UI\ComboBox('products');
$products->dataSource(array('transport' => $transport, 'schema' => $schema, 'serverFiltering' => true))->autoBind(false)->cascadeFrom('categories')->dataTextField('ProductName')->dataValueField('ProductID')->attr('style', 'width:300px')->filter('contains')->placeholder('Select product ...');
echo $products->render();
?>
    </p>
    <p>
        <label for="orders">Orders:</label>
<?php 
$read->url('cascadingcombobox.php?type=orders');
$transport->read($read);
$products = new \Kendo\UI\ComboBox('orders');
$products->dataSource(array('transport' => $transport, 'schema' => $schema, 'serverFiltering' => true))->autoBind(false)->cascadeFrom('products')->dataTextField('OrderID')->dataValueField('OrderID')->attr('style', 'width:300px')->filter('contains')->placeholder('Select order ...');
echo $products->render();
?>
    </p>
    <button class="k-button" id="get">View Order</button>
</div>
<script>
    $(document).ready(function () {
        var categories = $("#categories").data("kendoComboBox"),
            products = $("#products").data("kendoComboBox"),
            orders = $("#orders").data("kendoComboBox");

        $("#get").click(function () {
            var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
                productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",

Example #5

File: serverfiltering.php Project: neevan1e/Done

    $result = new DataSourceResult('sqlite:..//sample.db');
    echo json_encode($result->read('Products', array('ProductID', 'ProductName'), $request));
    exit;
}
require_once '../include/header.php';
$transport = new \Kendo\Data\DataSourceTransport();
$read = new \Kendo\Data\DataSourceTransportRead();
$read->url('serverfiltering.php')->contentType('application/json')->type('POST');
$transport->read($read)->parameterMap('function(data) {
              return kendo.stringify(data);
           }');
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->transport($transport)->schema($schema)->serverFiltering(true);
$comboBox = new \Kendo\UI\ComboBox('products');
$comboBox->dataSource($dataSource)->dataTextField('ProductName')->dataValueField('ProductID')->filter('contains')->ignoreCase(false)->attr('style', 'width:250px');
?>

<div class="demo-section">
    <h2>Products</h2>
<?php 
echo $comboBox->render();
?>
</div>
<style scoped>
    .demo-section {
        width: 250px;
        margin: 35px auto 50px;
        padding: 30px;
    }

Example #6

File: events.php Project: neevan1e/Done

<?php

require_once '../lib/DataSourceResult.php';
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$comboBox = new \Kendo\UI\ComboBox('combobox');
$comboBox->dataTextField('text')->dataValueField('value')->dataSource(array(array('text' => 'Item 1', 'value' => '1'), array('text' => 'Item 2', 'value' => '2'), array('text' => 'Item 3', 'value' => '3')))->dataBound('onDataBound')->select('onSelect')->change('onChange')->close('onClose')->open('onOpen');
?>
<div class="demo-section">
    <h3 class="title">ComboBox
    </h3>
<?php 
echo $comboBox->render();
?>
</div>

<script>
    function onOpen() {
        if ("kendoConsole" in window) {
            kendoConsole.log("event: open");
        }
    }

    function onClose() {
        if ("kendoConsole" in window) {
            kendoConsole.log("event: close");
        }
    }

    function onChange() {
        if ("kendoConsole" in window) {

Example #7

File: right-to-left-support.php Project: neevan1e/Done

<?php

require_once '../lib/DataSourceResult.php';
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
    <div class="k-rtl">
        <h2>RTL ComboBox</h2>
<?php 
$comboBox = new \Kendo\UI\ComboBox('combobox');
$comboBox->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 $comboBox->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';

Example #8

File: template.php Project: neevan1e/Done

    exit;
}
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);
$comboBox = new \Kendo\UI\ComboBox('customers');
$comboBox->minLength(1)->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
);
echo $comboBox->render();
?>
</div>

<div class="demo-section">
    <h2>Information</h2>
    <p>
        Open the ComboBox to see the customized appearance of the items.