How Do You Access Model And/Or Viewmodel properties/data on the client

2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    3 posts
    Member since:
    Mar 2019

    Posted 17 Oct Link to this post

         Hello,

     

    I have a hierarchy of data bound from several tables unioned together in the controller. Each level of nodes is bound to a view model so they all have the same properties. The treeview works fine, but I want to access the viewmodel properties on the select method of the treeview and I cannot find a resource that explains this well. Can anyone please provide a complete and simple example of how to accomplish this?

     

    Thanks

  2. Missing user
    Missing user avatar

    Posted 21 Oct Link to this post

    Hello Jonathan,

    Binding an event handler function to the Select event can be achieved with the following:

    @(Html.Kendo().TreeView()
            .Name("treeview")
    ....
            .Events(ev=>ev.Select("onSelect"))
    )

    You can then apply the custom logic via the onSelect function. The Select event will provide a reference to the selected node. This way it is possible to get the node UID and a reference to the selected dataItem. The dataItem will provide access to the properties of the selected item:

    function onSelect(e) {
            var node = e.node;
            var itemUid = node.getAttribute("data-uid")
            var dataItem = e.sender.dataSource.getByUid(itemUid)
    
            alert('Item ID: ' + dataItem.ItemId +'\nExpiration date: ' + kendo.toString(kendo.parseDate(dataItem.ExpirationDate),'dd/MMM/yyyy' + '\nAvailable: ' + dataItem.AvailableItems))
    
        }

    Attached is a sample project with the above implemented. In the example on select of a TreeView node, an alert is displayed, showing several of the node's properties.

    Also, I have noticed that you have opened a support ticket on the same topic. In order to keep the communication focused, I would suggest you proceed with any further discussion there.

    Regards,
    Aleksandar
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top