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

ComboBox PHP Code Not Working

9 Answers 53 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 26 Mar 2013, 12:57 PM
Hello,

I downloaded the Kendo UI PHP free version last night. I just started to learn Kendo last night at my job.

I cannot get the ComboBox PHP code to work properly. I cannot get the page to render as shown here in your example: http://demos.kendoui.com/web/combobox/index.html

Here is my page I am building the Kendo UI PHP ComboBox code:
http://192.168.2.50/pub/MetroRelations/kendouiprojects/kendouicomboboxtest.php

Please help me get this to work.

Thank you.

Christian Lombardo

9 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 26 Mar 2013, 01:09 PM
Hello Christian,

 The URL you have provided is not accessible. Could it be your local IP address which isn't accessible outside of your network? If this is the case you can insert your PHP code in this forum thread so we can check it out.

 In addition to the examples you can refer to the getting started instructions.

Greetings,
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!
0
Christian
Top achievements
Rank 1
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>
0
Atanas Korchev
Telerik team
answered on 26 Mar 2013, 01:26 PM
Hi Christian,

 This page doesn't have <body> and <html> tags. What happens when you add them? Those elements are vital for every HTML page.

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!
0
Christian
Top achievements
Rank 1
answered on 26 Mar 2013, 01:32 PM
I thought the Kendo UI will generate the html and body tags? Since on the example ComboBox PHP code there is no html and body tags. This means the example PHP code is incomplete on the Kendo website: http://demos.kendoui.com/web/combobox/index.html

So where am I supposed to put the <html> <body> </body> </html>  tags, where in between the PHP code?
0
Atanas Korchev
Telerik team
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>
</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!
0
Christian
Top achievements
Rank 1
answered on 26 Mar 2013, 02:00 PM
Thank you Atanas. Okay it seems to work now, the only thing is the formatting, see the screen capture of the test page shown below:







everything below the the "T-shirt Fabric" section has been shifted down to the left which is NOT the same as shown at the ComboBox example page: http://demos.kendoui.com/web/combobox/index.html

What is causing this formatting issue?

Christian




0
Christian
Top achievements
Rank 1
answered on 26 Mar 2013, 02:07 PM
Here is the screen capture:
0
Atanas Korchev
Telerik team
answered on 26 Mar 2013, 02:26 PM
Hi Christian,

 The example you are referring to relies on HTML structure and CSS which are specific to the Kendo UI online demos. It is likely to experience such layout changes when you try to replicate the exact same look and feel. 

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!
0
Christian
Top achievements
Rank 1
answered on 26 Mar 2013, 02:46 PM
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>
        <!--
        <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>
        -->
    </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.
Tags
ComboBox
Asked by
Christian
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Christian
Top achievements
Rank 1
Share this question
or