TreeView .Select - get text of selected node

5 posts, 0 answers
  1. Erik
    Erik avatar
    2 posts
    Member since:
    Feb 2017

    Posted 06 Mar 2017 Link to this post

    Hi everyone,

    I have aproblem with the Kendo UI TreeView and I'm looking for a solution for a while now.

    In my view I fill my TreeView like this:

    Html.Kendo().TreeView()
                        .Name("treeview")
                        .BindTo((IEnumerable<TreeViewItemModel>) ViewBag.inlineDefault)
                        .Events(events => events
                            .Select("onSelect")
     )
    private IEnumerable<TreeViewItemModel> GetDefaultInlineData(ArrayList tables)
            {
                List<TreeViewItemModel> names = tables.Cast<TreeViewItemModel>().ToList();
     
                List<TreeViewItemModel> inlineDefault = new List<TreeViewItemModel>
                {
                        new TreeViewItemModel
                        {
                            Text = "Tables",
                            Items = names
                        }
                };
     
                return inlineDefault;
            }

    My onSelect funtion is the following:

    <script>
        function onSelect(e) {
            $.ajax({
                type: 'POST',
                url: '/Editor/GetTableContent' ,
                data: { tableName: ?????? },
                success: function (data) {
                    $('#table').html(data);
                }
            }).done(function () {
                alert('Done');
            });
        }
    </script>

    It calls a mehtod in my controller that needs the name of the selected node as parameter (string) to display the content of a table in a grid.

    Is there a possibility to get what I need?

    Thx for your help!

    Erik

  2. Erik
    Erik avatar
    2 posts
    Member since:
    Feb 2017

    Posted 06 Mar 2017 in reply to Erik Link to this post

    To get the text of the selected node:

    var nodeText = this.text(e.node);

     

    this == the TreeView(can also use e.sender instead of this)
    e.node == the selected node.

  3. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1466 posts

    Posted 08 Mar 2017 Link to this post

    Hello Erik,

    We are glad you have found a way to get the selected node's text. As an alternative to: this.text(e.node); you can get it through the event data like this: e.node.textContent

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Doug
    Doug avatar
    6 posts
    Member since:
    Jan 2013

    Posted 27 Apr Link to this post

    Hello,

    Is there a way to access other properties of TreeViewItemModel from the javascript code embedded in the .cshtml file?

    I would like to access the Id property of the node. It this possible?

    Thanks,

    Doug

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1466 posts

    Posted 01 May Link to this post

    Hello Doug,

    You can access other property values with the TreeView's dataItem method. Attach a select event handler to the TreeView:
    .Events(events => events.Select("onSelect"))
    and call the dataItem method passing the selected node as a parameter:
    function onSelect(e) {
        var dataItem = e.sender.dataItem(e.node);
        console.log(dataItem.id);
    }
    Through the data item returned by the method you can access the property value, e.g. dataItem.id

    Regards,
    Ivan Danchev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top