To have an item list view, first you need to have a collection Data Source we discussed at previous charpter, for example, the contentlist DataSource. After that, you want to loop the recordset and render with view template. 

Item List  

Select the element which you want to repeat. You can either select it from the Preview window or from the code window. After selected the element, click the 'Repeat' button on the right.

On the next window, select the data source.

After you create the repeater, you will also need to bind the data to the repeated element, otherwise, the repeater will only repeat the static value of that element.  Data Binding will be explained in the next chapter. 

Repeat Self

The repeat self is an option to determine whether it should repeat only the inner html, or include the outer html element.  For example. 

<div k-foreach='item list' repeat-self> 
<p k-content='item.name'>my name</p>
</div>

Without the repeat-self, only the inner P tag will be repeated.

With repeat-self, also the DIV tag will be repeated.  

Nested Item List

Sometimes you may need to use nested items. For example, like our documentation’s category, there are some main categories, under each main category there are some subcategories.

In this case, we can create a repeater to repeat the main category and create another repeater nested inside the main category repeater to repeat the subcategory.

Following is the detail instruction:

First, you will need to create a content type called ‘Main Category’ and create some main categories.

Then, create a content type called ‘Subcategory’, or use the same content type as main category with a new folder. 

Click the Contents tab under the Contents from the main navigation menu. Click the ‘Setting’ button on the right side of the Subcategory. Because subcategory is the child element of the main category, so we need to set up the relation between two content folders.

Switch to the ‘Relation Folders’ tab, click the ‘+’ sign under the Category folders. Select the Main_Category and set an Alias.

Now create a new subcategory item, you can see there is an option for you to select which main category does this subcategory belong to.

Create a view if you don’t have one yet. Use the following code as a template to display the categories.

Add the data source and create the alias name.

Select the content folder.

Since it’s a nested repeater, we need to add subcategory as a relative source. Click the ‘+’ sign after the Main_Category data source.

We need to display the subcategory based on the main category, so at here we will use 'by category' data source. Create the alias name.

Go back to the Data binding tab, first, we need to create the repeater. Make sure you select the Main category <ul> tag.

Click the ‘Repeat’ button and select the data source.

Then create the nested repeater inside this repeater. Select the Subcategory <li> and create the repeater.

Select the sub query  data source.

Next, we just need to bind data to the related elements. First, we will bind data to the Main Category. Select the Main Category <h2> tag and click data. Bind it to the main category name.

Select the Subcategory and bind it to the subcategory name.

Now preview the View, you can see it is done.