TreeView
Checkboxes
This view shows how to show checkboxes in a TreeView control.
Features
Settings
Description
Set the "show-checkboxes" attribute to true and the TreeView will add checkboxes to each node.
When checkboxes are displayed, the TreeView manages their hierarchy so that when a checkbox is checked or cleared, the new value is automatically applied to all child nodes, and reflected on the state of the parent nodes.
When items are checked or unchecked, the "checked-items-changed" event is raised, and the checkedItems property of the client TreeView object is updated with a list of the items that are currently checked.
The checkboxes are only shown when TreeView works without lazy nodes. That's to say, the "lazy-load-action-url" attribute and the "lazy-load-function" attribute are not set.
The CheckOnClick property (or check-on-click attribute) set to 'true' enables toggling check when click on entire item, not only on checkbox.
The CheckedMemberPath property (or checked-member-path attribute) determines which property of TreeView's data items, for example 'NewItem', being assigned by checkboxes value.
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class TreeViewController : Controller
{
// GET: Checkboxes
public ActionResult Checkboxes(IFormCollection collection)
{
_treeViewCheckboxesDataModel.LoadPostData(collection);
ViewBag.DemoOptions = _treeViewCheckboxesDataModel;
return View(Property.GetData(Url));
}
private readonly ControlOptions _treeViewCheckboxesDataModel = new ControlOptions
{
Options = new OptionDictionary
{
{"CheckOnClick",new OptionItem{Values = new List<string> { "True", "False"},CurrentValue = "False"}},
{"CheckedMemberPath", new OptionItem{Values = new List<string> { "null", "NewItem"},CurrentValue = "null"}}
}
};
}
}
@model Property[]
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@section Scripts{
<script type="text/javascript">
function checkedItemsChanged(treeView) {
//Showing NewItem status
var selectedNode = treeView.selectedNode;
if (selectedNode) {
formatItemRecurrsive(treeView, selectedNode);
}
//Showing checked items status list
var items = treeView.checkedItems,
msg = '';
if (items.length) {
msg = '<p><b>@Html.Raw(TreeViewRes.Checkboxes_Text0)</b></p><ol>\r\n';
for (var i = 0; i < items.length; i++) {
if (items[i].NewItem) {
msg += '<li style="color:red">' + items[i].Header + ' <i>(NewItem = true)</i></li>\r\n';
} else {
msg += '<li>' + items[i].Header + ' <i>(NewItem = false)</i></li>\r\n';
}
}
msg += '</ol>';
}
document.getElementById('tvChkStatus').innerHTML = msg;
}
//Custom Format Item for showing NewItem status
function formatItem(treeView, node) {
var imgNewItem = node.element.lastChild;
if (node.dataItem.NewItem) {
if (imgNewItem.tagName != "IMG") {
imgNewItem = document.createElement("img");
imgNewItem.setAttribute("style", "height:20px; margin-left:3px; content:url(@Url.Content("~/Content/images/new.png"));");
node.element.appendChild(imgNewItem);
}
} else if (imgNewItem.tagName == "IMG") {
node.element.removeChild(imgNewItem);
}
}
//Custom Format Item and all sub-items
function formatItemRecurrsive(treeView, node) {
formatItem(treeView, node);
var nodes = node.nodes;
if (nodes && nodes.length > 0) {
for (var i = 0; i < nodes.length; i++) {
formatItemRecurrsive(treeView, nodes[i]);
}
}
}
</script>
}
<c1-tree-view display-member-path="Header" child-items-path="Items"
show-checkboxes="true" source="Model"
check-on-click="@Convert.ToBoolean(optionsModel.Options["CheckOnClick"].CurrentValue)"
checked-member-path="@optionsModel.Options["CheckedMemberPath"].CurrentValue"
format-item="formatItem"
loaded-items="checkedItemsChanged"
checked-items-changed="checkedItemsChanged">
</c1-tree-view>
<br />
<div id="tvChkStatus"></div>
@section Settings{
@await Html.PartialAsync("_OptionsMenu", optionsModel)
}
@section Summary{
<p>@Html.Raw(TreeViewRes.Checkboxes_Text1)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.Checkboxes_Text2)</p>
<p>@Html.Raw(TreeViewRes.Checkboxes_Text3)</p>
<p>@Html.Raw(TreeViewRes.Checkboxes_Text4)</p>
<p>@Html.Raw(TreeViewRes.Checkboxes_Text5)</p>
<p>@Html.Raw(TreeViewRes.Checkboxes_Text6)</p>
<p>@Html.Raw(TreeViewRes.Checkboxes_Text7)</p>
}