Iterating over datasource results

[Brian]

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

[Rosen]

Hi Marcus,

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

All the best,
Rosen
the Telerik team

[Patrick Rioux]

Can you provide an example? I'm trying to figure this out.

[Rosen]

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

[Roy]

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]

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

[Roy]

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]

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]

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