ComboBox PHP Code Not Working

10 posts, 0 answers
  1. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2013 Link to this post

    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!
  3. UI for ASP.NET AJAX banner
  4. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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>
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2013 Link to this post

    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!
  6. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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?
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2013 Link to this post

    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!
  8. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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




  9. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    Here is the screen capture:
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Mar 2013 Link to this post

    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!
  11. Christian
    Christian avatar
    15 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2013 Link to this post

    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.
Back to Top
UI for ASP.NET AJAX banner