This is a migrated thread and some comments may be shown as answers.

ComboBox PHP Code Not Working

9 Answers 158 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

9 Answers, 1 is accepted

answered on 26 Mar 2013, 01:14 PM

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<?php
require_once '../kendouiphp/wrappers/php/lib/Kendo/Autoload.php';
?>

   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
    <script src="/content/shared/js/examples.js?20121115"></script>
    <script src="/content/shared/js/console.js"></script>
    <script src="/content/shared/js/prettify.js"></script>

<div id="tshirt-view" class="k-header">
    <h2>Customize your Kendo T-shirt</h2>
    <img id="tshirt" src="../kendouiphp/wrappers/php/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('input');
$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('select');
$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;
    width: 500px;
    margin: 30px auto;
    padding: 20px 20px 0 20px;
    background-position: 0 -255px;
}
#tshirt {
    float: left;
    margin: 30px 40px 30px 20px;
}
#options {
    padding: 30px;
}
#options h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 25px 0 8px 0;
}
#get {
    margin-top: 25px;
}

.k-readonly
{
    color: gray;
}
</style>

<script>
    $(document).ready(function() {
        // create ComboBox from select HTML element
        var input = $("#input").data("kendoComboBox");
        var select = $("#select").data("kendoComboBox");

        $("#get").click(function() {
            alert('Thank you! Your Choice is:\n\nFabric ID: '+input.value()+' and Size: '+select.value());
        });
    });
</script>

answered on 26 Mar 2013, 01:42 PM

Hi Christian,

Currently the code showed in the code viewer is not the complete code used to output the page. We will soon update it to include the <html> and <body> tags.

You need to include <html> and <body> in the exact same places as with any other HTML page:

<!DOCTYPE html>

<html>

<head>

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

</head>

<body>

<?php

require_once '../kendouiphp/wrappers/php/lib/Kendo/Autoload.php';

?>

<div id="tshirt-view" class="k-header">

<h2>Customize your Kendo T-shirt</h2>

<img id="tshirt" src="../kendouiphp/wrappers/php/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('input');

$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('select');

$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>

<style scoped>

#example h2 {

font-weight: normal;

}

#tshirt-view {

border-radius: 10px 10px 10px 10px;

border-style: solid;

border-width: 1px;

overflow: hidden;

width: 500px;

margin: 30px auto;

padding: 20px 20px 0 20px;

background-position: 0 -255px;

}

#tshirt {

float: left;

margin: 30px 40px 30px 20px;

}

#options {

padding: 30px;

}

#options h3 {

font-size: 1em;

font-weight: bold;

margin: 25px 0 8px 0;

}

#get {

margin-top: 25px;

}

.k-readonly

{

color: gray;

}

</style>

<script>

$(document).ready(function() {

// create ComboBox from select HTML element

var input = $("#input").data("kendoComboBox");

var select = $("#select").data("kendoComboBox");

$("#get").click(function() {

alert('Thank you! Your Choice is:\n\nFabric ID: '+input.value()+' and Size: '+select.value());

});

</script>

</body>

</html>

Kind regards,
Atanas Korchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 26 Mar 2013, 02:46 PM

kendouicomboboxtest_final.png

Okay I had to make two small changes:
     1. I had to increase the css style tshirt-view to 700px
     2. I added a <br> just before the customize button.

See the complete code below and the attached screen shot file of what the page looks like now:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
   <head>
       <link href="../kendouiphp/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
       <link href="../kendouiphp/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
       <script src="../kendouiphp/js/jquery.min.js"></script>
       <script src="../kendouiphp/js/kendo.web.min.js"></script>

       <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
       <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
       
   </head>
<body>

<?php

require_once '../kendouiphp/wrappers/php/lib/Kendo/Autoload.php';
?>


<div id="tshirt-view" class="k-header">
    <h2>Customize your Kendo T-shirt</h2>
    <img id="tshirt" src="../kendouiphp/wrappers/php/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('input');
$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('select');
$select->dataSource(array('X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'))
       ->placeholder('Select size ...')
       ->index(0);

echo $select->render();
?>
       <br>
        <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;
    width: 700px;
    margin: 30px auto;
    padding: 20px 20px 0 20px;
    background-position: 0 -255px;
}
#tshirt {
    float: left;
    margin: 30px 40px 30px 20px;
}
#options {
    padding: 30px;
}
#options h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 25px 0 8px 0;
}
#get {
    margin-top: 25px;
}

.k-readonly
{
    color: gray;
}
</style>

<script>
    $(document).ready(function() {
        // create ComboBox from select HTML element
        var input = $("#input").data("kendoComboBox");
        var select = $("#select").data("kendoComboBox");

        $("#get").click(function() {
            alert('Thank you! Your Choice is:\n\nFabric ID: '+input.value()+' and Size: '+select.value());
        });
    });
</script>
</body>
</html>

Thank you for your help Atanas.