Kendo Mobile UI CSS is not rendering properly when using Angular's ng-repeat directive

6 posts, 0 answers
  1. Shashank
    Shashank avatar
    5 posts
    Member since:
    Jun 2015

    Posted 03 Aug 2015 Link to this post

    I had done a static mobile app with only Kendo Mobile UI, there Listview, checkbox, radio button rendered properly. But now I am using Angular.js and Kendo mobile UI for the actual application, I have implemented Listview, checkbox, button group, as I am using Angular.js ng-repeat directive inside the <li> element. I feel ng-repeat directive is affecting the CSS.

    Here is a part of the code where I am displaying data along with checkbox.

     

    <div>

        <ul kendo-mobile-list-view id="ulId">
            <li ng-repeat="bgroup in question.AnswerOptions"><label>{{bgroup.ansName}}<input type="checkbox" /></label></li>
        </ul>

    </div>

     

    I have attached screen shots for your reference.

    1. The first Image has the static data and CSS is rendered properly.

    2. The second image is fetching the data from a JSON file and binding to the view using Angular's ng-repeat directive. Here CSS is not rendered properly.

     

    The included js and css files are in this order

    1. kendo.mobile.all.min.css, 2. cordova.js, 3. jquery.min.js, 4. angular.min.js, 5. kendo.all.min.js, 6. kendo.angular.min.js

  2. Shashank
    Shashank avatar
    5 posts
    Member since:
    Jun 2015

    Posted 03 Aug 2015 in reply to Shashank Link to this post

    Actually found out the solution for this issue. Basically the CSS classes which were dynamically loading when using Kendo Mobile UI alone, were not functioning in the similar manner when using Angular and Kendo. What I had to do is, manually add those CSS classes where ever it is necessary and then it rendered in the correct way.

     For example, when you specify kendo-mobile-button-group alone in the <ul> element to get the button group, during run time it has to append km-button class to the <li> element. But this is not happening when we are using kendo-Angular. I worder is this a issue or I am going wrong some where. Please Clarify..!!!

     

    Regards,

    Shashank

  3. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 06 Aug 2015 Link to this post

    Hello Shashank,

    Initializing Kendo UI widgets with ng-repeat is not recommended. The widgets build their own DOM on initialization and that doesn't necessarily match the original HTML which ng-repeat will generate. Please see this article for a reference. 

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Shashank
    Shashank avatar
    5 posts
    Member since:
    Jun 2015

    Posted 10 Aug 2015 in reply to Plamen Lazarov Link to this post

    Hi Plamen,

     Thanks for the reply. In the link provided by you tells how to include Kendo DataSource in a Kendo-tree-view template, and also in most of documentation section tells about Kendo-grid-view or tree-view. In my case I have a custom template like this. Here I have created a simple app where using ng-repeat I am able to bind data to the views. But I am confused as to how to include Kendo DataSource and how to read a JSON file.

     

    If I have to implement the above example in the link using Kendo DataSource and also not using Kendo's built in templates such a GridView, treeView. How to achieve that? Your help is valuable.

     

     

  5. Shashank
    Shashank avatar
    5 posts
    Member since:
    Jun 2015

    Posted 11 Aug 2015 in reply to Plamen Lazarov Link to this post

    Hi Plamen,

    As you said, I tried out Kendo DataSource to fetch the data from the JSON file. But I am only able to read one dimensional JSON array, that is if I have a three or four dimensional  JSON array then I am not able to loop through the JSON array. This is because the application in which I am working has a scenario of something this sort in this link. Here I will loop through all the list elements at each node point and bind to the view. That was a easy work around.

    But when I use Kendo DataSource I am not able to loop through at all the node points and bind to the view. I have created a JSFiddle link to demonstrate this situation, here is the link. Here I am able to fetch the second and third level data by hard coding the array value.

    The is the similar JSON array which I have to bind to the view.

    var json = [
            {
                "continentName": "Asia",
                "countries": [
                    {
                        "countryName": "India",
                        "states": [
                          {
                            "stateName": "Sikkim"
                          },
                          {
                            "stateName": "Karnataka"
                          },
                          {
                            "stateName": "Kerla"
                          },
                        ],
                    },
                    {
                        "countryName": "China",
                        "states": [
                          {
                            "stateName": "Jiangsu Province"
                          },
                          {
                            "stateName": "Heilongjiang Province"
                          },
                          {
                            "stateName": "Fujian Province"
                          },
                        ],
                    },
                  ],
            },
                {
                "continentName": "Europe",
                "countries": [
                    {
                        "countryName": "Germany",
                        "states": [
                          {
                            "stateName": "Berlin"
                          },
                          {
                            "stateName": "Hesse"
                          },
                          {
                            "stateName": "Rhineland-Palatinate"
                          },
                        ],
                    },
                    {
                        "countryName": "Denmark",
                        "states": [
                          {
                            "stateName": "Hovedstaden"
                          },
                          {
                            "stateName": "Midtjylland"
                          },
                          {
                            "stateName": "Nordjylland"
                          },
                        ],
                    },
                  ],
            },      
       
        ]

    The application which I am working mostly consists of ng-repeat to iterate through the array and bind to view. So I am finding it difficult to use the DataSource and implement the same. It would be nice if you could provide me an example of a similar scenario where I could get ng-repeat functionality using Kendo DataSource.

     

    Regards,

    Shashank

     

     

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 13 Aug 2015 Link to this post

    Hello Shashank,

     

    Based on the provided information, we believe that you are working on an application that uses "Kendo UI Professional".

    In order to be able to work with "Kendo UI Professional" and benefit from our support service, your account must be associated with an active license or a trial. Your applicable commercial/trial license expired in 08-Aug-2015 .

    If your company has spare licenses, please ask the license holder to assign your account as a licensed developer, as explained in "How do I assign developers to the purchased licenses?".

    If you don't have a spare license you will need to purchase a new one. Please keep in mind that working on an application that includes "Kendo UI Professional" without a valid license violates our license agreement.

     

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top