Beginner needs help with JSON data binding

9 posts, 0 answers
  1. George
    George avatar
    5 posts
    Member since:
    Aug 2013

    Posted 19 Aug 2013 Link to this post

    Hi, I am new to Kendo. Making the switch from JQuery Mobile.

    I have some remote JSON data that I want to bind to an action sheet or event a list view. Sounds super simple but I am not sure of the syntax at its most basic level.
    Can someone give me an example.

    Here is my feed if that helps:

    http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Aug 2013 Link to this post

    Hi George,

    Thank you for providing the Json feed.
    In order to bind the data you need to set the schema.data property to "items" as this is the field which holds the records array. In addition it is recommended to describe the data in the schema.model definition.
    schema: {
        data: "items",
        model: {
            id: "alert_ID",
            fields: {
                //field description
            }
        }
    }

    For you convenience I prepared a small example:
    The sample demonstrates how to display the data in ListView. The ActionSheet widget does not support binding to remote data.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. George
    George avatar
    5 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2013 Link to this post

    Thank you so much. I knew it had to be super easy!

    I was having a hard time understanding the difference between the action sheet and list view. Can't list view accomplish the same things?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Aug 2013 Link to this post

    Hello George,

    ListView and ActionSheet are two different components. In order to learn what for they should be used for you can check the iOS UI Element Usage guidelines.

    (search for "Table View" and "ActionSheet")

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. George
    George avatar
    5 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2013 Link to this post

    Thank you! im learning so much.
    I got the list view pretty much working how I want it.

    Can you help me get it to where a user clicks on an item from the list view it will go to the detail view and carry the "Alert_ID" to pull the correct record?

    Here is my code:

    <!DOCTYPE html>
    <html>
    <head>
        <title>IRIS Mobile</title>
        
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
        <link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">
        
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>



    <div id="listview-home" data-role="view" data-title="IRIS Alerts">

            <div data-role="navbar">
                <span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
                <span data-role="view-title"></span>
                <a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
            </div>
        </header>
        <div class="head">&nbsp;</div>
            <ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>
            
        </div>

    <!--LISTVIEW DATA--> 
    <script id="tmp" type="text/x-kendo-template">
            <img class="alertimage" src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
    <div class="listviewdiv">
    <h3 class="item-info">#: title #</h3>
    <p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>
       
    </div>
    <a data-role="button" class="listviewbutton" data-icon="mostrecent"></a>
        </script>
    <!--END LISTVIEW DATA-->

    <!--DETAIL VIEW-->
     

    <!--GET REMOTE JSON DATA-->    
        <script>
            var app = new kendo.mobile.Application();
            var IRISalerts = new kendo.data.DataSource({
                transport: {
        read: {
          url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861",
          dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
        }
      },
     schema: {
                    data: "items",
                    model: {
                        id: "alert_ID",
                        fields: {
                            //field description
                        }
                    }
                }
            });

        </script>
    <!--END GET REMOTE JSON DATA-->     
        

    <!--LEFT DATA DRAWER-->
    <div data-role="drawer" id="main-menu">
    <div><img src="images/greylogo.png"></div>
                <ul data-role="listview">
                    <li><a href="views/settings.html" data-transition="none">Settings</a></li>
                    <li><a href="views/favorites.html" data-transition="none">Log Out</a></li>
                </ul>
            </div>
    <!--END LEFT DATA DRAWER-->  

    <!--RIGHT DATA DRAWER-->      
    <div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
    <div>
     <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
        <img src="images/alertlegend.png" width="100%"/>
            </div>        
    <!--END RIGHT DATA DRAWER--> 



    <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
    </body>
    </html>
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Aug 2013 Link to this post

    Hello George,

    I am afraid that providing custom solution or tailored examples falls out of the scope of our standard support services. Moreover, your last question does not seems to be connected with the initial subject of this thread.

    My recommendation is to check the sushi sample application where you can see how such type of navigation can be implemented.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Creationator
    Creationator avatar
    7 posts
    Member since:
    Nov 2015

    Posted 06 Jan Link to this post

    Hi, I think I am having the same issue - I think. Im new to Kendo as well. I am trying to shape my JSON object to display nested array of objects. Below is a screen shot of what I am getting back.  Can someone help me please!
  9. Creationator
    Creationator avatar
    7 posts
    Member since:
    Nov 2015

    Posted 06 Jan in reply to Creationator Link to this post

    Here is the screen shot. For some reason It didn't attach the first time.
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 08 Jan Link to this post

    Hello Derrick,

    The productName is array, in order to display it you should format in some way. For example to stringify it into JSON using kendo.stringify method.

    I am attaching a screen shot which shows a possible solution.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready