Treeviewには、ノードをチェックボックスとして表示するオプションがあります。TreeViewコントロールにチェックボックスを表示するには、ShowCheckboxesプロパティをtrueに設定する必要があります。

チェックボックスが表示されると、TreeViewコントロールがその階層を管理し、チェックボックスがオンまたはオフにされると、新しい値がすべての子ノードに自動的に適用され、親ノードの状態に反映されます。項目をオンまたはオフにすると、OnClientCheckedItemsChangedイベントが生成され、クライアントTreeViewオブジェクトのcheckedItemsプロパティに含まれる現在オンの項目のリストが更新されます。In addition, the TreeView class provides CheckOnClick property which determines whether to toggle checkboxes when the user clicks the node header.

この例では、OnClientCheckedItemsChangedイベントを使用して、TreeViewコントロールに現在オンのチェックボックスを表示しています。以下のコード例では、「クイックスタート」セクションで追加したPropertyモデルを使用しています。

コードの場合

Checkboxes.cshtml

@using <ApplicationName.Models>
@model Property[]

<script type="text/javascript">
        function checkedItemsChanged(treeView) {
            var items = treeView.checkedItems,
                msg = '';
            if (items.length) {
                msg = '<p><b>チェック項目:</b></p><ol>\r\n';
                for (var i = 0; i < items.length; i++) {
                    msg += '<li>' + items[i].Header + '</li>\r\n';
                }
                msg += '</ol>';
            }
            document.getElementById('tvChkStatus').innerHTML = msg;
        }
    </script>

@(Html.C1().TreeView()
    .Bind(Model)
    .DisplayMemberPath("Header")
    .ChildItemsPath("Items")
    .ShowCheckboxes(true)
    .OnClientCheckedItemsChanged("checkedItemsChanged"))
<br />
<div id="tvChkStatus"></div>

Furthermore, TreeView has a checkedMemberPath property, similar to the ListBox control, that defines the name of the property that determines whether an item is checked or not. The items currently checked (selected) can be obtained using the checkedItems property.

The following code demonstrates how to determine whether an item is checked or not. Add the following code to the sample code above.

.CheckedMemberPath("IsSelected")