POST Checked to Controller - TreeView Control

[Yan]

I have an asp.net core razor that contains a TreeView control, populated from a List<TreeViewItemModel> .

<form id="EditEmployees">

 <div>

                  Html.Kendo().TreeView()
                        .Name("ActiveEmployees")
                        .TemplateId("treeview")
                        .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.employeeList)
                        .Checkboxes(c => c.CheckChildren(true))
                        .DragAndDrop(false)
                    )

</div>

 

       <br />

        <div class="form-group form-inline row pull-right">
            <div class="col-sm-10 ">
                <button value="Save" style="margin:0 5px;" class="btn btn-navy">Save</button>
            </div>
        </div>

</form>

My issue:
When I submit the form back to the POST Action in the Controller I would like pass the checked items.
For some reason i can't see the items

[Aleksandar]

Hi Yan,

The checkboxes participate in the POST of a <form> through their name property. I can suggest reviewing the article linked below for further guidance, as it details on the reason for the observed behavior and suggests possible approaches to achieving the desired result:

https://docs.telerik.com/kendo-ui/knowledge-base/get-checked-treeview-nodes-in-post

UPDATE:

Based on the above article you can add a hidden input

<input type="hidden" id="selectedCheckboxes" name="selectedCheckboxes">

and assign to it the array of ids of the checked items. To do this handle the Check event and implement the following logic:

.Events(ev=>ev.Check("onCheck"))

<script>
function onCheck() {
            var checkedNodes = [],
                treeView = $("#treeview").data("kendoTreeView");

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            $('#selectedCheckboxes').val(checkedNodes)
        }
      
      function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    checkedNodes.push(nodes[i].id);
                }

                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }
</script>

On the server side make sure the action method expects the parameter:

public IActionResult MyAction(int[] selectedCheckboxes)
{
//...
}

Here is a dojo demonstrating the above logic. Inspect the Network tab and note selectedCheckboxes parameter.

Regards,
Aleksandar
Progress Telerik

[Yan]

Thanks for the input. My checkboxes are dynamic. How would I retrieve them in the POST

[Yan]

Any updates?

[Aleksandar]

I updated the initial response with a suggestion based on the approach demonstrated in the a cited article.