chore(treeview-checkboxes): add example of multiple selection and checking of nodes

Author: svdimitr

components/treeview/checkboxes/overview.md

@@ -584,7 +584,7 @@ You can allow the user to click on the node itself and the TreeView will automat
 
 You can combine both selection and checking nodes. To keep both collections in sync you can assign the same collection to both `SelectedItems` and `CheckedItems` as demonstrated in the example below.
 
-````CSHTML
+````Single
 @* You can couple checking the item and placing it in the selected item list. *@
 
 <TelerikTreeView Data="@FlatData"
@@ -608,6 +608,133 @@ You can combine both selection and checking nodes. To keep both collections in s
 </div>
 
 
+@code {
+
+    public IEnumerable<object> checkedItems { get; set; } = new List<object>();
+
+    public class TreeItem
+    {
+        public int Id { get; set; }
+        public string Text { get; set; }
+        public int? ParentIdValue { get; set; }
+        public bool HasChildren { get; set; }
+        public string Icon { get; set; }
+        public bool Expanded { get; set; }
+    }
+
+    public IEnumerable<TreeItem> FlatData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        LoadFlatData();
+
+        var precheckedItem = FlatData.Where(x => x.Id == 3); // provide initial checked item when the page is loaded
+
+        checkedItems = new List<object>(precheckedItem);
+    }
+
+    private void LoadFlatData()
+    {
+        List<TreeItem> items = new List<TreeItem>();
+
+        items.Add(new TreeItem()
+        {
+            Id = 1,
+            Text = "Project",
+            ParentIdValue = null,
+            HasChildren = true,
+            Icon = "folder",
+            Expanded = true
+        });
+
+        items.Add(new TreeItem()
+        {
+            Id = 2,
+            Text = "Design",
+            ParentIdValue = 1,
+            HasChildren = true,
+            Icon = "brush",
+            Expanded = true
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 3,
+            Text = "Implementation",
+            ParentIdValue = 1,
+            HasChildren = true,
+            Icon = "folder",
+            Expanded = true
+        });
+
+        items.Add(new TreeItem()
+        {
+            Id = 4,
+            Text = "site.psd",
+            ParentIdValue = 2,
+            HasChildren = false,
+            Icon = "psd",
+            Expanded = true
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 5,
+            Text = "index.js",
+            ParentIdValue = 3,
+            HasChildren = false,
+            Icon = "js"
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 6,
+            Text = "index.html",
+            ParentIdValue = 3,
+            HasChildren = false,
+            Icon = "html"
+        });
+        items.Add(new TreeItem()
+        {
+            Id = 7,
+            Text = "styles.css",
+            ParentIdValue = 3,
+            HasChildren = false,
+            Icon = "css"
+        });
+
+        FlatData = items;
+    }
+}
+````
+````Multiple
+@* To select and check multiple items change both modes to Multiple *@
+
+<TelerikTreeView Data="@FlatData"
+                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
+                 SelectionMode="@TreeViewSelectionMode.Multiple"
+                 @bind-SelectedItems="@checkedItems"
+                 @bind-CheckedItems="@checkedItems">
+    <TreeViewBindings>
+        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
+    </TreeViewBindings>
+</TelerikTreeView>
+
+<div>
+    Checked items:
+        @if (checkedItems.Any())
+        {
+            <ul>
+                @foreach (var item in checkedItems)
+                {
+                    TreeItem checkedItem = item as TreeItem;
+                    <li>
+                        @checkedItem.Text
+                    </li>
+
+                }
+            </ul>
+        }
+</div>
+
+
 @code {
 
     public IEnumerable<object> checkedItems { get; set; } = new List<object>();