Treeview Integration with Listview

[Yassen]

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 ?

[Yassen]

Dear,

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

[Ianko]

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

[Yassen]

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

[Ianko]

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 there 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

[Yassen]

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 };
    }

[Ianko]

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