Treeview Integration with Listview

7 posts, 0 answers
  1. Yassen
    Yassen avatar
    22 posts
    Member since:
    Oct 2016

    Posted 14 Mar Link to this post

    Dear All,

    I have a treeview & listview in different spliter panes.

    I successfully retrieved the tree-view data, what I want now is to display the related items of the selected tree-view node.

    here is what I have so far:

    @(Html.Kendo().Splitter()
         .Name("RefFilesSplitter")
         .HtmlAttributes(new { @style = "height:100%;" })
         .Panes(panes =>
             {
                panes.Add()
                    .Size("310px")
                    .Collapsible(true)
                    .Content(
                        @<div id="RefFiles">
                        @(Html.Kendo().TreeView()
                            .Name("TVtoc")
                            .HtmlAttributes(new { @style = "height:100%;width:100%" })
                            .DragAndDrop(true)
                            .DataTextField("Name")
                            .DataSource
                            (dataSource => dataSource
                                .Read(read => read.Action("GetGroups", "TreeOfAccounts"))
                                .Model(m => m.Id("GroupId"))
                                .Events(e => { e.RequestEnd("requestEndHandler"); })
                            )
                            .Events(e => e.Select("onSelect"))
                        )
                        </div>);
                panes.Add()
                    .Content(
                        @<div id="RefFilesContent">
                        @(Html.Kendo().ListView<IdeaGL.Models.IGL_account>()
                        .Name("LVAccounts")
                        .HtmlAttributes(new { @style = "height:100%;width:100%" })
                        .ClientTemplateId("template")
                        .TagName("div")
                        .DataSource
                            (dataSource => dataSource
                                .Read(read => read.Action("GetAccounts", "TreeOfAccounts", new  {groupid=Model.GroupId}))
                                .Model(m => m.Id("account_id"))
                            )
                            .Pageable()
                        )
                    </div>);
             })
        )

     

    and here is the JavaScript OnSelect:

    function onSelect(e)
    {
         
        // this doesn''t work ...
        $("#LVAccounts").data("kendoListView").dataSource.read();
        $("#LVAccounts").data("kendoListView").refresh();
     
        var data = $('#TVtoc').data('kendoTreeView').dataItem(e.node);
         
        $.ajax({
            url: "/TreeOfAccounts/GetAccounts?groupid=" + data.id
        }).success(function ()
        {
            // what should i do here !!
        })
    }

     

    I can see how to make the listview refresh the data for the selected treeview node.

    any help ?

  2. Yassen
    Yassen avatar
    22 posts
    Member since:
    Oct 2016

    Posted 15 Mar in reply to Yassen Link to this post

    Dear,

    I have also tried the approach on this thread but no luck....

  3. Ianko
    Admin
    Ianko avatar
    1741 posts

    Posted 16 Mar Link to this post

    Hello Yassen,

    The approach in the forum post is exactly what should be implemented in order to accomplish what you need. 

    Cna you please provide the sample code you have used following the guidance from the forum post so that I can probably define what might have gone wrong?

    Or, if you can, provide a simple, locally runnable project so that I can directly run it and examine the case closely.

    Regards,
    Ianko
    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. Yassen
    Yassen avatar
    22 posts
    Member since:
    Oct 2016

    Posted 16 Mar in reply to Ianko Link to this post

    Dear Lanko,

    It is already in there, Have a look at the first post.

    I am instead using the treeview to trigger the retrieve at the listview.

    regards

  5. Ianko
    Admin
    Ianko avatar
    1741 posts

    Posted 17 Mar Link to this post

    Hello Yassen,

    In the code sent so far the additional Data handler is missing. This one is crucial for the solution to actually work. 

    ...
    dataSource.Read(read => read.Action("Products_Read_Filtered", "ListView").Data("getSelectedItem")
    ...

    Also, in the configuration of the ListView there is a hard-coded route parameter which interferes with the read method of the DataSource. If you need this parameter to by dynamic you should define it on the client by using the Data handler as it is described in the forum thread addressing the same topic. 

    Regards,
    Ianko
    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.
  6. Yassen
    Yassen avatar
    22 posts
    Member since:
    Oct 2016

    Posted 18 Mar in reply to Ianko Link to this post

    Dear Lanko,

    The hard-coded value is meant to test the execution.But how can I get the selected tree-view id in Java script "getSelectedItem(e)"

    function getSelectedItem(e)
        {
            var tv = $('#TVtoc').data('kendoTreeView');
            var s = tv.select();
             
            var item = tv.dataItem(s);
            alert(item); // this is undefined !!
             
            return { groupid: data.id };
        }
  7. Ianko
    Admin
    Ianko avatar
    1741 posts

    Posted 20 Mar Link to this post

    Hello Yassen,

     

    I tested similar logic with both MVC TreeView and the Kendo widget, like in this dojo: http://dojo.telerik.com/eqUra. However, on my end, the dataItem retrieved is defined. 

     

    The only possible reason for the data item to be undefined is when there is no selected item in the TreeView. This, however, is expected.

     

    In order to examine the case properly, I suggest you providing a simple, locally runnable solution so that I can examine the exact case and investigate it further. 

     

    Regards,
    Ianko
    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.
Back to Top