diff --git a/tests/app/ui/list-view/list-view-tests.ts b/tests/app/ui/list-view/list-view-tests.ts index df76fcf95..77917597b 100644 --- a/tests/app/ui/list-view/list-view-tests.ts +++ b/tests/app/ui/list-view/list-view-tests.ts @@ -800,6 +800,21 @@ export class ListViewTest extends testModule.UITest { TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item"); } + + public test_ItemTemplateSelector_IsCorrectlyUsedAsAFunction() { + let listView = this.testView; + listView.itemTemplateSelector = selectItemTemplate; + let items = ListViewTest.generateItemsForMultipleTemplatesTests(2); + let itemTemplateSelectorFunction = listView.itemTemplateSelector; + TKUnit.wait(0.1); + + let templateKey0 = itemTemplateSelectorFunction(items[0], 0, items); + TKUnit.assertEqual(templateKey0, "red", "itemTemplateSelector result for first item"); + + let templateKey1 = itemTemplateSelectorFunction(items[1], 1, items); + TKUnit.assertEqual(templateKey1, "green", "itemTemplateSelector result for second item"); + } + public test_ItemTemplateSelector_ItemTemplatesAreCorrectlyParsedFromString() { let listView = this.testView; listView.itemTemplates = this._itemTemplatesString; @@ -915,3 +930,9 @@ interface Item { export function createTestCase(): ListViewTest { return new ListViewTest(); } + +// >> article-item-template-selector-function +export function selectItemTemplate(item: Item, index: number, items: Array) { + return item.age % 2 === 0 ? "red" : "green"; +} +// << article-item-template-selector-function diff --git a/tests/app/ui/list-view/list-view.md b/tests/app/ui/list-view/list-view.md index 939a2289e..090b7a787 100644 --- a/tests/app/ui/list-view/list-view.md +++ b/tests/app/ui/list-view/list-view.md @@ -40,6 +40,55 @@ Other modules which will be used in the code samples in this article: {%endraw%} ``` +### Define multiple item templates and an item template selector in XML. +The itemTemplateSelector can be an expression specified directly in XML. The context of the expression is the data item for each row. +``` XML + + {%raw%} + + + + + {%endraw%} + +``` +### Specifying the item template selector as a function in the code-behind file +In case your item template selector involves complicated logic which cannot be expressed with an expression, you can create an item template selector function in the code behind of the page in which the ListView resides. The function receives the respective data item, the row index and the entire ListView items collection as parameters. It has to return the the key of the template to be used based on the supplied information. +``` XML + + {%raw%} + + + + + {%endraw%} + +``` +{%snippet article-item-template-selector-function%} +### Alternating row colors +You can use the special value '$index' in the item template selector expression which represents the row index. +``` XML + + {%raw%} + + + + + {%endraw%} + +``` ### Creating a ListView {%snippet article-create-listview%} ### Using ListView with Array