Telerik Net Core Treeview Template-Get value from inputbox of selected item

[Aziz]

How get value from inputbox of selected checkboxitem(and subitems)? I can get label of checked item(item.Name), but i don't now how get value of inputbox.

 

<script id="treeview_distribute_template" type="text/kendo-ui-template">
                                                            <table>
                                                                <tbody>
                                                                    <tr>
                                                                        <td width="500px;">
                                                                            #= item.Name # &nbsp;
                                                                        </td>
                                                                        <td >
                                                                            <input id='comment_input' type='text' style="width:500px;" />
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </script>

 function getCheckedItems(treeview) {
        var nodes = treeview.dataSource.view();
       
        return getCheckedNodes(nodes);
    }

    function getCheckedNodes(nodes) {
        var node, childCheckedNodes;
        var checkedNodes = [];

        for (var i = 0; i < nodes.length; i++) {
            node = nodes[i];
            if (node.checked) {
                checkedNodes.push(node);
            }

            if (node.hasChildren) {
                childCheckedNodes = getCheckedNodes(node.children.view());
                if (childCheckedNodes.length > 0) {
                    checkedNodes = checkedNodes.concat(childCheckedNodes);
                }
            }

        }

        return checkedNodes;
    }

[Aleksandar]

Hello Aziz,

I modified this demo to demonstrate a possible approach. you can add a template to render the TreeView items, that would contain the input element:

<span><input class='comment_input' type='text' style=\"width:100px;\" /></span>

Then, for example, in the check event handler you can get a reference to the checked node and get the value of the input field:

function onCheck(e) {
          var node = e.node;
          var value = $(node).find('input.comment_input').val();
          alert(value)
...
}

Here is a sample dojo that demonstrates the above suggestion. Enter something in an input field and then check the corresponding checkbox. You can extend the above approach to meet your requirements.

Regards,
Aleksandar
Progress Telerik

[Aziz]

Cool! It is work!  What about inputs of child nodes? How can I get value from child input when check parent item.I want get list of checknodes with input value(parent,child) when click button of dialog window(https://demos.telerik.com/kendo-ui/dialog/treeview-integration).

But when I try parse e data, i get different data then onCheck(e), i can't extract input data from e.

 function actionOK(e) {
        var treeView = $("#treeview").data("kendoTreeView");
        var checkedNodes = getCheckedItems(treeView);
        var node = e.node;
   
        alert(val)
        console.log(JSON.stringify(e));

}

[Aleksandar]

Hello Aziz,

Note that "e" or the event object would be different for the TreeView check event and the Kendo prompt window confirmation. Each Kendo UI widget passes a single argument to the event handler—the so-called "event object". Usually, it has one or more fields that contain specific information for the event. All event objects have a sender field which provides a reference to the widget instance that triggered the event. You can find additional details below:

https://docs.telerik.com/kendo-ui/intro/widget-basics/events-and-methods#using-event-handler-arguments

A possible approach if you need to have the values of the selected checkboxes you can use the previously suggested logic and store the input values in a global variable. On click of the OK button, you can return the value of selected items:

var inputValues =[];
function treeViewCheck(e) {
       var node = e.node;
       var val = $(node).find('input.comment_input').val();
       var dataItem = e.sender.dataItem(e.node);
        inputValues.push({user:dataItem.FullName, value:val});
      
        setTimeout(function () {
            updateSelectedCount(e.sender);
        })
    }

function actionOK(e) {
        var treeView = $("#treeview").data("kendoTreeView");
        var checkedNodes = getCheckedItems(treeView);
        updateResult(checkedNodes);
      	console.log(inputValues)
    }

Here is a dojo that demonstrates the above suggestion

Regards,
Aleksandar
Progress Telerik