Hey all I am very new to Kendo UI but am trying to remake the layout of my companies listbox over to treeview so that I will be able to categorize the items coming in from the api call.
The current code is this:
01.@(Html.Kendo().ListBox()02. .Name("lbAvailableSocialMediaSources")03. .Toolbar(tb =>04. {05. tb.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);06. tb.Tools(tools => tools07. .TransferTo()08. .TransferFrom()09. .TransferAllTo()10. .TransferAllFrom());11. })12. .ConnectWith("Sources")13. .HtmlAttributes(new {style="width:44%"})14. .Draggable(true)15. .DropSources("Sources")16. .DataSource(ds => ds.Read(r => r.Url("/api/sources" + (!string.IsNullOrWhiteSpace(Model.Providers) ? "?providerId="+ Model.Providers :"")).Type(HttpVerbs.Get)))17. .DataTextField("Name")18. .DataValueField("Id")19. .Events(e=>e.DataBound("sourcesViewModel.dataBound").Add("sourcesViewModel.add")))20. @(Html.Kendo().ListBox()21. .Name("Sources")22. .HtmlAttributes(new { style = "width:44%" })23. .DataTextField("Name")24. .DataValueField("Id")25. .Draggable(true)26. .DropSources("lbAvailableSocialMediaSources")27. .BindTo(new List<SocialMediaSource>())28. .Selectable(ListBoxSelectable.Multiple))The above produces the attached image screenshot.95.png.
All that works just fine. I am able to drag over any item and also use the buttons to do the same.
Now here is the problem and where I am currently stuck at not knowing how to go about doing it.
I am wanting to use the treeview with checkboxes so that i am able to put items that are currenbtly in the list into items under their category name.
The api json looks like this:
{ "meta": { "total_results": 193, "offset": 0, "total_pages": 1 }, "object_list": [{ "name": "GitHubCommits", "cat":"Git Hub", "guid": "6b69875a84017a3704dec1b3843f761a41c8044d654bf3f0450ddb56fa3ff9fa", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { "name": "GitLab", "cat":"Git Hub" "guid": "1ff8683f7579baa702fafiuiurehgyu87t5ius3tiiud2de6e17cc1bea3e8e0db647b9c9", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { "name": "facebook", "cat":"Social Media" "guid": "1ff8683f7579baa702faf987654fho865fks3tiiud2de6e17cc1bea3e8e0db647b9c9", "sub_types": [{ "name": "Keyword", "key": "keyword" } ] }, { ....ETC....
Taken the json above I am having a hard time trying to produce a treeview with that kind of data structure. Most all the examples I've seen for the treeview have all been static adding it to the treeview or dynamic with a structure that I am not able to put my json data into:root.Add().Text("Kendo UI Project").Id("2") .Expanded(true) .SpriteCssClasses("folder") .Items(project =>{ project.Add().Text("about.html").Id("3").SpriteCssClasses("html"); project.Add().Text("index.html").Id("4").SpriteCssClasses("html"); project.Add().Text("logo.png").Id("5").SpriteCssClasses("image");});root.Add().Text("New Web Site").Id("6") .Expanded(true) .SpriteCssClasses("folder") .Items(item => { item.Add().Text("mockup.jpg").Id("7").SpriteCssClasses("image"); item.Add().Text("Research.pdf").Id("8").SpriteCssClasses("pdf"); }); ...ETC...
and also
@(Html.Kendo().TreeView().Name("treeview-telerik").TemplateId("treeview").Checkboxes(true).DragAndDrop(true).Items(treeview =>{ treeview.Add().Text("My Documents") .Expanded(true) .Items(root => { root.Add().Text("New Web Site") .Expanded(true) .Items(images => { images.Add().Text("mockup.pdf"); images.Add().Text("Research.pdf"); }); ..ETC..
treeview.add().Text("Categories")
.Expanded(True)
.Items( root.add().Text("Git Hub")=> { images.Add().Text("GitHubCommits"); images.Add().Text("GitLab"); });
root.add().Text("Social Networks")=> {
images.Add().Text("facebook");
});
...ETC...What I am looking to accomplish is seen here https://demos.telerik.com/aspnet-mvc/treeview/checkboxes but again, I do not know how to go about making the needed structure with the json I have to work with so that it knows what data to pull.
My attempt at the treeview code has not gone so well. Just producing undefined for all 192 items (image screenshot.96.png) when just trying to output the Name as it is in the listview..
So to recap, I am wanting to produce a treeview from my current json data so that I am able to categorize everything in a neater, more user friendly design/look.
1 Answer, 1 is accepted
Hello David,
You can bind the TreeView to data in several ways. I suggest reviewing this section of the documentation:
https://docs.telerik.com/aspnet-mvc/html-helpers/navigation/treeview/binding
Generally speaking the TreeView uses hierarchical data, so you have to convert any flat structures to hierarchical data before binding the widget to it. I binding to a remote endpoint, the remote end-point should return homogeneous items. You can review runnable examples of the supported data binding options on the following links:
You can click on the View Source tab to review the code behind the examples and the configurations. For example, note on the remote data binding demo how data is fetched from the Northwind Employees table and passed to the TreeView in a suitable format.
If you need further details on the DataSource configuration you can check the section dedicated to the DataSource configuration:
For example, to display the data from the posted JSON in a TreeView you can use the following configuration:
@(Html.Kendo().TreeView()
.Name("treeview")
.DataTextField("name")
.DataSource(dataSource => dataSource
.Custom()
.Transport(t=>t
.Read(read => read
.Url("https://run.mocky.io/v3/5768ca25-aafa-48d8-b053-c15532a44028")
))
.Schema(s=>s.Model(m=>
{
m.Id("guid");
m.Field("name",typeof(String));
})
.Data("object_list"))
)
)I hope you will find the above information and example are useful.
Regards,
Aleksandar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.