2 Replies Latest reply on Oct 1, 2012 12:32 AM by Bart Fukkink

    RhoSimulator and the Kendo framework

    Bart Fukkink

      Good day everyone.

       

      To bring our RhoMobile application to the next level we are using the Kendo (web) products supplied by Telerik (http://www.kendoui.com/). This is working normally in the application, but when we load it in the simulator, some strange things happen. For example: We can not select a row in the Grid and we can not select an item in the KendoDropDownList.

       

      Is this a thing caused by the simulator?

       

      Sample application

       

      To create a sample application, follow these steps:

       

      - Download the open source files (registration required) from the kendo website. (http://www.kendoui.com/download.aspx)

      - Add the js and css files to the project.

      - Update the Layout.js with the following:

       

      <script src="/public/jquery/jquery-1.7.1.js"></script>
      <script src="/public/kendo/js/kendo.all.min.js"></script>
      <link rel="stylesheet" href="/public/kendo/kendo.common.min.css">
      <link rel="stylesheet" href="/public/kendo/kendo.default.min.css">
      

       

      - In the page you want to show, put the following html:

       

      <div>
                <script>
                          var products = [ {
                          "ProductID": 1,
                              "ProductName": "Chai",
                              "Category": "Beverages",
                              "UnitPrice": "18.00"
                      }, {
                          "ProductID": 2,
                              "ProductName": "Chang",
                              "Category": "Beverages",
                              "UnitPrice": "19.00"
                      }, {
                          "ProductID": 3,
                              "ProductName": "Aniseed Syrup",
                              "Category": "Condiments",
                              "UnitPrice": "10.00"
                      }, {
                          "ProductID": 4,
                              "ProductName": "Chef Anton's Cajun Seasoning",
                              "Category": "Condiments",
                              "UnitPrice": "22.00"
                      }, {
                          "ProductID": 5,
                              "ProductName": "Chef Anton's Gumbo Mix",
                              "Category": "Condiments",
                              "UnitPrice": "21.35"
                      }, {
                          "ProductID": 6,
                              "ProductName": "Grandma's Boysenberry Spread",
                              "Category": "Condiments",
                              "UnitPrice": "25.00"
                      }];
        
                          $(document).ready( function() { CreateKendoGrids( "#grid" ); } );
        
                          function CreateKendoGrids( grid )
                          { 
                                    var dsschema = {
                                                        model          :          {
                                                                  id                    :          "test",
                                                                  fields          :          {
                                                                            ProductID          :          {
                                                                                      type                    :          "Number",
                                                                                      editable          :          false
                                                                            },
                                                                            ProductName          :          {
                                                                                      type                    :          "String",
                                                                            },
                                                                            UnitPrice          :          {
                                                                                      type                    :          "Number"
                                                                            }
                                                                  }
                                                        }
                                              },
        
                                    var ds = new kendo.data.DataSource({
                                              pageSize          :          30,
                                              data                    :          products,
                                              schema                    :          dsschema,
                                    });
        
                                    console.log( ds );
        
                                    $( grid ).kendoGrid({
                                              dataSource          :          ds,
                                              columns                    :          [
                                                        {
                                                                  field          :          "ProductID",
                                                                  title          :          "Product Id"
                                                        },
                                                        {
                                                                  field          :          "ProductName",
                                                                  title          :          "Product Name"
                                                        },
                                                        {
                                                                  field          :          "UnitPrice",
                                                                  title          :          "Price"
                                                        },
                                                        {
                                                                  command          :          "edit",
                                                                  title          :          "Commands"
                                                        }
                                              ],
                                              editable          :          "popup",
                                              selectable : "single"
                                    });
                          }
                </script>
                <div id="grid"></div>
      </div>
      

       

      When you run this application in the simulator, you should see the following:

       

      ss_kendo_1.png

       

      In this grid, you can use the edit button to edit values of rows etc. But what you can not do, is select a row, wich the option "selectable : "single"" implies.

       

      Workaround for the grid

       

      After a lot of poking around I found a quick and dirty workaround for the grid problem.

       

      Change the layout file to:

       

      <!-- Kendo ui things -->
      <% if( System.get_property( "device_name" ) == "Win32" ) %>
      <!-- Load all scripts seperatly so that we can override the touch parameter
                 Otherwise we can not debug properly on the simulator. -->
      <script src="/public/kendo/js/kendo.core.min.js"></script>
      <script> 
                //Override the touch variable to make sure that
      //selection in the grid on the simulator.
      kendo.support.touch = false;
      </script>
      
      <script src="/public/kendo/js/kendo.data.min.js"></script>
      <script src="/public/kendo/js/kendo.binder.min.js"></script>
      <script src="/public/kendo/js/kendo.calendar.min.js"></script>
      <script src="/public/kendo/js/kendo.columnmenu.min.js"></script>
      <script src="/public/kendo/js/kendo.datepicker.min.js"></script>
      <script src="/public/kendo/js/kendo.draganddrop.min.js"></script>
      <script src="/public/kendo/js/kendo.editable.min.js"></script>
      <script src="/public/kendo/js/kendo.filtermenu.min.js"></script>
      <script src="/public/kendo/js/kendo.fx.min.js"></script>
      <script src="/public/kendo/js/kendo.grid.min.js"></script>
      <script src="/public/kendo/js/kendo.groupable.min.js"></script>
      <script src="/public/kendo/js/kendo.list.js"></script>
      <script src="/public/kendo/js/kendo.listview.min.js"></script>    
      <script src="/public/kendo/js/kendo.menu.min.js"></script>
      <script src="/public/kendo/js/kendo.numerictextbox.min.js"></script>
      <script src="/public/kendo/js/kendo.pager.min.js"></script>
      <script src="/public/kendo/js/kendo.panelbar.min.js"></script>    
      <script src="/public/kendo/js/kendo.popup.min.js"></script>
      <script src="/public/kendo/js/kendo.reorderable.min.js"></script>
      <script src="/public/kendo/js/kendo.resizable.min.js"></script>
      <script src="/public/kendo/js/kendo.selectable.min.js"></script>
      <script src="/public/kendo/js/kendo.slider.min.js"></script>    
      <script src="/public/kendo/js/kendo.sortable.min.js"></script> 
      <script src="/public/kendo/js/kendo.splitter.min.js"></script> 
      <script src="/public/kendo/js/kendo.tabstrip.min.js"></script>
      <script src="/public/kendo/js/kendo.timepicker.min.js"></script>
      <script src="/public/kendo/js/kendo.treeview.min.js"></script>
      <script src="/public/kendo/js/kendo.upload.min.js"></script>
      <script src="/public/kendo/js/kendo.validator.min.js"></script>
      <script src="/public/kendo/js/kendo.window.min.js"></script>
      <script src="/public/kendo/js/kendo.autocomplete.min.js"></script>
      <script src="/public/kendo/js/kendo.combobox.min.js"></script>
      <script src="/public/kendo/js/kendo.dropdownlist.min.js"></script>
      <script src="/public/kendo/js/kendo.editor.min.js"></script>
      
      <% else %>
      <script src="/public/kendo/js/kendo.all.min.js"></script>
      <% end %>
      

       

      This way, when run in the simulator, the grid selection works again, but all the scripts have to be loaded seperatly (wich we dont want since it drags down the application even more).

       

      Remaining problem

       

      Sadly this fix did not work for the kendo DropDownList (Demo here: http://demos.kendoui.com/web/combobox/index.html )

       

      Is there a way to fix this problem from the client side? Not being able to test our application in the simulator makes things quite difficult. And since this is normal HTML / Javascript, it should just work.

       

      Message was edited by: Bart Fukkink Made the scripts a bit clearer

        • Re: RhoSimulator and the Kendo framework
          Jon Tara

          What do you mean by "the simulator"? Apple or Google Android simulator? Or Rhodes emulator?

           

          The Rhodes emulator, frankly, is best-suited for quick check of your application logic. It has a fast turnaround, and you can get debugging done quickly. It is not well-suited for debugging UI issues.

           

          I do most UI debugging in a desktop browser, and then Apple iOS simulator and then real device. I wouldn't bother with the Rhodes emulator for this.

           

          You can use Weinre to help debug, and now remote Safari debugging even on a real device with iOS 6.0.

           

          I think you will get better support from Kendo support forums. It's not a popular product, so you're unlikely to encounter anybody here who has used it. Phonegap users will face the same issues you are, so I'm sure you will find somebody there who can help you.

           

          While I haven't done a detailed analysis of Kendo, it looks bloated to me. It has a lot of redundancy with Rhodes functionality - it's really designed to do (most) everything that Rhodes does (along with PhoneGap), but in a pure Javascript environment. These things are sprouting like weeds, and it's anybody's guess how many of them or which ones will survive or thrive.

          1 of 1 people found this helpful
            • Re: RhoSimulator and the Kendo framework
              Bart Fukkink

              What do you mean by "the simulator"? Apple or Google Android simulator? Or Rhodes emulator?

              The simulator provided by RhoStudio. Not the SDK emulators.

               

              The Rhodes emulator, frankly, is best-suited for quick check of your application logic. It has a fast turnaround, and you can get debugging done quickly. It is not well-suited for debugging UI issues.

              I do most UI debugging in a desktop browser, and then Apple iOS simulator and then real device. I wouldn't bother with the Rhodes emulator for this.

              I got to say that this does not work for us. We noticed a lot of small things that do not work if we open the page in the Chrome browser. A lot of the WebView action just not seem to come through and the hassle of changing the port number every time you restart the application.

               

              You can use Weinre to help debug, and now remote Safari debugging even on a real device with iOS 6.0.

              Oh, that looks pretty, I have to look into that.

               

              I think you will get better support from Kendo support forums. It's not a popular product, so you're unlikely to encounter anybody here who has used it. Phonegap users will face the same issues you are, so I'm sure you will find somebody there who can help you.

              I have tried this, but trough the support tickets, but they do not provide a whole lot of support for "uncommon" browsers. Still working on that part with their support system.

               

              While I haven't done a detailed analysis of Kendo, it looks bloated to me. It has a lot of redundancy with Rhodes functionality - it's really designed to do (most) everything that Rhodes does (along with PhoneGap), but in a pure Javascript environment. These things are sprouting like weeds, and it's anybody's guess how many of them or which ones will survive or thrive.

              Kendo is not made to take over hardware capability's. We use Kendo completely for the HTML controls supported by the Web package. Not any other supported features of the product.

               

              Thanks for taking the time to post, I will surely check out Weinre. That looks really nice.