CODEWITHSUNDEEP
asp.net-mvcrazorkendo-uikendo-treeview
Josh
Josh

Reputation: 2006

Pass additional parameter during Expand event for Kendo Treeview

I've got a Kendo Gridview on the same page as a Treeview. The Gridview contains rows of clients associated with the current user. When one of the client rows in the Gridview is selected, I trigger the Treeview to Read the DataSource again (selectedClient is a js variable set when a row in the Gridview is selected):

$("#folderTreeView").data("kendoTreeView").dataSource.read({ userId: _selectedClient })

The rebinding of the TreeView works perfectly. The problem is when the new TreeView has a folder structure with nested folders. When the "expand" icon is clicked, only the id of the item is passed, but I need to pass the currently selected client from the GridView as well (stored in _selectedClient).

So, is there a way to add additional parameters (the userId/_selectedClient in this case) to "whatever" is passed to the server either during the "expand" event or another way?

Controller

[HttpPost]
public virtual JsonResult List(int? userId, int? id)
{
 ....
}

Razor

@(Html.Kendo().TreeView()
    .Name("folderTreeView")
    .DataTextField("Name")
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("List", "Folder", new { area = "Portal"           }).Type(HttpVerbs.Post)
        )
    )
    .Events(events => events
        .Expand("onSelect")
        )
)

Upvotes: 3

Views: 9327

Answers (2)

ElementCy
ElementCy

Reputation: 166

I found this today, it is for a Grid, but I am going to assume it works fine with anything else that uses a DataSource:

@(Html.Kendo().Grid<MvcApplication1.Models.Product>()
.Name("Grid")
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("Products_Read", "Home")
        .Data("additionalData") // the name of the JavaScript function which will return the additional data
    )
)
.Pageable()
)
<script>
function additionalData() {
    return {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>

Read more here on The Kendo Docs...

Upvotes: 4

Josh
Josh

Reputation: 2006

I finally found it -- http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/treeview

DataSource events as outlined below...

<script>
  function addData(data) {
    return { userId: _selectedClient };
  }
</script>

<div class="demo-section">
  @(Html.Kendo().TreeView()
        .Name("folderTreeView")
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
              .Action("List", "Folder", new { area = "Portal" })
              .Type(HttpVerbs.Post)
              .Data("addData")
            )
        )
    )
</div>

Upvotes: 2

Related Questions