Iterating over datasource results

2 Answers 1936 Views
Data Source
This question is locked. New answers and comments are not allowed.
Brian
Top achievements
Rank 1
Brian asked on 24 Apr 2012, 05:42 AM
How do you iterate over the results of an xml datasource. I can see the results if I bind a list to this datasource, but say for instance I want to insert a list with a different innerhtml string for a certain optTypeID from the datasource below. How would I achieve that in a function call named processInfo?

var dsDet
    dsDet = new kendo.data.DataSource({ 
              transport: {
                     read: "Details.xml"
                 },
                 schema: {
                     type: "xml",
                     data: "/Category/Field",
                     model: {
                         fields: {
                             name: "@Name",
                             displayName: "@DisplayName",
                             value: "@Value",
                             optTypeID: "@OptTypeID"
                         }
                     }
                  }
                 });  
               
function processInfo()
{  
Need a loop here to look through the results and if the optTypeID=1 for instance I want to insert 
<li> test1</li> into a div.
If optTypeID=2 then insert
<li> test2</li> into a div.
}    

Any help would be greatly appreciated.

Thanks

2 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 26 Apr 2012, 07:46 AM
Hi Marcus,

In order to get the DataSource data you should use either data or view methods.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Patrick Rioux
Top achievements
Rank 1
commented on 29 May 2012, 07:53 PM

Can you provide an example? I'm trying to figure this out.
0
Rosen
Telerik team
answered on 30 May 2012, 12:35 PM
Hi Patrick,

Both of the methods will return an array like collection which can be iterated:

var dataSource = new kendo.data.DataSource({   
    /*..rest of the configuration*/
    change: function() {
        var data = this.data(); // or this.view();
        for (var i = 0; i < data.length; i++) {
            showMe(data[i]);
        }
    }
});
dataSource.read();

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Roy
Top achievements
Rank 1
commented on 13 Feb 2014, 01:39 AM

So let me ask this question. Am I right when I say the only way you can iterate through the datasource is in the change event attached to the datasoucre, you can not do it in a separate function that is not attached to the datasource.
Rosen
Telerik team
commented on 13 Feb 2014, 11:59 AM

Hello Roy,

Actually you can iterate the items wherever you find appropriate. However, using the change event will ensure that the DataSource is populated before accessing them.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Roy
Top achievements
Rank 1
commented on 13 Feb 2014, 08:09 PM

This is good to know. The reason for the questions is because I am trying to accomplish the following. 

I have a Kendo UI TreeView that when I select a treeview node the select  event fires I have attached to it. In this event I do a number of  things, and now I need to build a tabstrip dynamically. So what I did  was made a call to a function that creates the datatource that will  provide me the information for building tabstrip. I was going to build  the tabstrip in the chenge event for that datasource.

 The steps I was planning to do in the change event of the datasource was as follows
     1.) Remove any current tabs on the tabstrip with something like this
     2.) Clear current datasource array that will be used for elements in each tab strip by doing this
     3.) Build my Data Source Array
     4.) Build New Data source Array
     5.) Build New TabStrip Tabs based on Data Source Array
               
  So here is what my change event will look like on the datasource
change: function () {
                var data = this.data();
                // Clear old Tabs
                TabStripSclear();
                // Clear current datasource array
                AgencySystemsDataSources = [];
                // Build New Data source Array
                for (var i = 0; i < data.length; i++) {
                    var id = data[i].ID;
                    AgencySystemsDataSources.push(updateAgencySystemInfo(id), i);
                }
                //Build New TabStrip Tabs based on Data source Array
                BuildTabStripTabs();
            }

So is this the correct way to do this, and second, how does one build the tabstrip dynamically in the data source change event, and inject a template for each tab in the tab strip  that will then use its respective data source from the data source array I built.


Roy
Top achievements
Rank 1
commented on 13 Feb 2014, 08:15 PM

I did have a typo in my code I presented above.

change: function () {
                var data = this.data();
                // Clear old Tabs
                TabStripSclear();
                // Clear current datasource array
                AgencySystemsDataSources = [];
                // Build New Data source Array
                for (var i = 0; i < data.length; i++) {
                    var id = data[i].ID;
                    AgencySystemsDataSources.push(updateAgencySystemInfo(id, i));  // This was incorrect
                }
                //Build New TabStrip Tabs based on Data source Array
                BuildTabStripTabs();
            }

Rosen
Telerik team
commented on 14 Feb 2014, 07:24 AM

Hi Roy,

The easiest way to rebuild the Tabstrip content will be to bind it to a DataSource and then repopulate it when necessary.

<div id="tabstrip"></div>
    
   <script>
     var data = [{
       text: "Item 1",
       content: "foo"
     }];
      
     $("#tabstrip").kendoTabStrip({
       dataTextField: "text",
       dataContentField: "content",
       dataSource: data
     });
      
     function changeTabContent() {
       var tabstrip =  $("#tabstrip").data("kendoTabStrip");
        
       tabstrip.dataSource.data([{
         text: "Item 2",
         content: "bar"
       },{
         text: "Item 3",
         content: "baz"       
       }]);
     }     
   </script>


Also as your question is not related in any way to the initial thread's topic I'm would ask you to open a separate one if any questions arise.

Regards,
Rosen
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Data Source
Asked by
Brian
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or