Questions on UI for ASP.NET MVC Forum

1 answer

65 views

Expanded Treeview when Application Loads

Hello, I am currently evaluating the Telerik control Tree View to display the hierarchy data as shown in the attached screen shot.

I have a requirement where we will be building a treeview in our ASP.NET MVC controller code passing to the view.

I create a sample project which I got from the forums and modified it which I have attached

I need to display the Kendo Tree View with all nodes expanded when the application loads How do I do that ?

I see that when I expand the nodes, the node with "Program Structure" expands correctly.
The node with "Program Metrics" does not expand correctly. The expanded icon does not show correctly as shown in program structure.

TreeView

answered on 08 Dec 2020

2 answers

81 views

Load child nodes every time from database

Hi Team,

I have a requirement that to load child data from database every time i clicked on expand icon but right now its only load data on first time of expand button but I need it on every click.

TreeView

answered on 13 Aug 2020

1 answer

52 views

Drag and Drop in Treeview not working as expected

Drag and drop feature is not behaving as expected. When trying to drag and drop an item from one place to another, it always gets dropped at the end of the targeted parent node and not at the desired place. As a result it becomes the last node of the parent. Can't move a node in between two nodes.

TreeView

answered on 27 Jul 2020

1 answer

161 views

Always show collapse icon after clicked on expand

Hi All,

I have a requirement to show collapse icon (after clicking the expand icon) whether it has a child nodes or not.

Thanks

TreeView

answered on 13 Jul 2020

1 answer

316 views

Add checkbox only leaf node.

I have a treeView with multiple hierarchy, and only leaf/last node should have checkbox, not any parent should have checkbox.

I have refered many threads and examples. Tried Checkboxes Template but that makes another issue that values did not get binded with checkbox.
I need treeview like (https://jsbin.com/edamuj/131/edit?html,output)

@(Html.Kendo().TreeView()
.Name("treeview")
.Events(e => e.Select("OnSelectTree").DataBound("OnDataBound")).ExpandAll(true)
.Checkboxes(checkboxes => checkboxesName("checkedFiles"))
.BindTo((List<DPS.Model.ReviewDocumentTreeViewItemModel>)ViewBag.DocumentTreeData, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<DPS.Model.ReviewDocumentTreeViewItemModel>(binding => binding.ItemDataBound((item, category) =>
{
item.Id = category.Id;
item.Text = category.Name;
item.Selected = category.IsSelected;
item.HtmlAttributes.Add("data-allowselection", category.AllowSelection);
item.Expanded = true;
item.Checked = category.IsReviewed;
}).Children(g => g.Items));
}))

TreeView

answered on 14 May 2020

6 answers

345 views

Treeview context menu covered by page default context menu

Hello,

I have kendo treeview in my MVC project. Treeview context menu was showed well in IE by right mouse clicking, but in Firefox the treeview context menu was covered by page default context menu. Could someone have the tip to resolve the context menu issue with Firefox? Below are pieces of code for context menu. Attached image is context menu showed in IE and Firefox.

Thanks in advance.

...
    function CreateContextMenu(targetTree) {
        var cxtMenuUl = $('#treeViewContextMenu');
        cxtMenuUl.css("white-space", "nowrap");
        if (cxtMenuUl) {
            cxtMenuUl.kendoContextMenu({
                // listen to right-clicks on treeview container
                target: targetTree,
                dataSource: getContextData(),
                orientation: "vertical",
                select: selectFolderContextMenu,
                filter: ".k-state-selected",
                open: onOpenLeftContextMenu
            });
        }
    }

     function getContextData () {
        var data = [{ text: 'Delete', attr: { id: 'delete' } },
                { text: "", cssClass: "k-separator" },
                { text: 'Rename', attr: { id: 'rename' } },
                { text: "", cssClass: "k-separator" },
                { text: 'New Folder', attr: { id: 'newfolder' } },
                { text: "", cssClass: "k-separator" },
                { text: 'Upload', attr: { id: 'upload' } }];

        return data;
    }
...

TreeView

answered on 29 Nov 2019

3 answers

258 views

Set treeview hierarchy from javascript

My requirements are such that on initial load, the tree is empty and a user can do a search which would then load the results into the treeview. Once the view is loaded, the user will navigate the tree with the expand functions. It's possible that the user searches for a result that is at an arbitrary depth in the tree (not a top-level node) so I query all nodes from the root down to the search result. I need help figuring out how to set this hierarchy of nodes into the tree correctly. Currently, only the top-level node displays with no expander.

The object to be displayed in tree:

public class LocationModel

{

public string Id { get; set; }

public string ParentId { get; set; }

public string Name { get; set; }

public List<LocationModel> Children { get; set; } = new List<LocationModel>();

public bool HasChildren => true;

}

The controller:

public JsonResult GetLocationHierarchy(string locationId)

{

if (string.IsNullOrEmpty(locationId))

return new JsonResult();

//string id;

var results = new List<LocationModel>();

using (var ctx = _docStore.OpenSession())

{

// recursively step up the tree, adding each node to the list

while (!string.IsNullOrWhiteSpace(locationId))

{

var thisNode = (from l in ctx.Query<Location>()

where l.Id.Equals(locationId)

select new LocationModel

{

Id = l.Id,

Name = l.FriendlyName,

ParentId = l.ParentId

}).SingleOrDefault();

if (thisNode != null)

{

results.Add(thisNode);

locationId = thisNode.ParentId;

}

else

locationId = string.Empty;

}

// set the children on the nodes

foreach (var node in results)

node.Children = results.Where(x => x.ParentId == node.Id).ToList();

//return only the top level node (hierachy is in place)

return Json(results.Where(x=> x.ParentId == string.Empty).ToList(), JsonRequestBehavior.AllowGet);

The tree view:

<div id="treeview">

<div class="demo-section k-content">

@(Html.Kendo().TreeView()

.Name("treeView")

.LoadOnDemand(true)

.DataTextField("Name")

.Events(events => events

.Select("onSelect")

.Expand("onExpand")

)

.DataSource(dataSource => dataSource

.Model(m =>

{

m.Id("Id");

m.Field("Name", typeof(string));

m.Children("Children");

m.HasChildren("HasChildren");

})

.Read(read => read

.Action("GetLocationChildren", "Home", new { locationId = Model.SelectedLocation.Id })

)

</div>

The search button method:

function onSearchButtonClick(e) {

if ($("#SelectedLocation_Name").val() == "") {

console.log("No SelectedLocation Name");

return;

}

var u = '@Url.Action("GetLocationHierarchy")';

$.post(u,

{

locationId: $("#SelectedLocation_Id").val()

},

function (data) {

console.log("onSearchButtonClick returned...");

var treeView = $("#treeView").data("kendoTreeView");

if (treeView == null) {

console.log("treeView is null!");

return;

}

console.log(e);

treeView.setDataSource(data);

});

}

TreeView

answered on 30 Oct 2019

1 answer

307 views

How Do I Bind TreeView To Stored Procedure Through Entity Model Framework

Hello, I have a stored procedure which has the both the parent Key/Id and Text/Name fields along with the child Key/Id and Text/Name fields. For example here are rows from sample table

Parent_Key_Id Parent_Text_Name Child_Key_Id Child_Text_Name

================================================================

1 Red 1 A

1 Red 2 B

1 Red 3 C

2 Green 4 D

2 Green 5 E

and I would like the tree view to look like the following if all nodes were expanded:

Red

A

B

C

Green

D

E

I've been trying to follow the demos in:

https://docs.telerik.com/aspnet-mvc/helpers/navigation/treeview/how-to/expand-node-async

https://demos.telerik.com/aspnet-mvc/treeview/remote-data-binding

and the ExpandSelectedItemAsync solution available on your git repository, but I have not seen a good example of what I'm trying to do. I cannot bind to the tables directly because the two tables in the stored procedure are several joins away in entity model and I only want these two items. I want the child items to load only when the parent is expanded. Can someone please provide a complete and detailed example of how to accomplish this?

TreeView

answered on 18 Oct 2019

5 answers

345 views

I need help with some requirements for a TreeView configuration

Hi there,

I've been searching and reading for 2 days now and I've some doubts about the TreeView that I need to clarify.

1. The tree will have three levels of deep

+ Contenedor "zst"
|
| --- Bulto 1. Largo: 2.6 Ancho: 3.6 Alto: 5.3
| |
| --- Producto: "Table" Cantidad: 32
| --- Producto: "Computer" Cantidad: 25
|
| --- Bulto 2. Largo: 1.3 Ancho: 8.3 Alto: 2.2
| |
| --- Producto: "Mouse" Cantidad: 8
| --- Producto: "Keyboard" Cantidad: 7
|
+ Contenedor "trx"
|
|
--- Bulto 1. Largo: 4.2 Ancho: 13.1 Alto: 15.7
|
--- Producto: "Display" Cantidad: 7.7
--- Producto: "Battery" Cantidad: 2.3

What follows are questions that I don't have answers so far and I don't know whether it's possible to achieve using this widget

1. I need to apply a different template to every level:
a) In the first level (Contenedor) I need to show the word "Contenedor" plus a string specified by the user
b) In the second level (Bulto) I need to show the word "Bulto" plus "Largo" followed by a number then the word "Ancho" followed by a number and the word "Alto" followed by a number
c) In the third level (Producto) I need to show the word "Producto" plus a string then the word "Cantidad" followed by a number

2. In every level of the tree the user can edit the values:
a) In the first level (Contenedor) the user can change the description (a string)
b) In the second level (Bulto) the user can change the "Largo" (decimal), "Ancho" (decimal) and "Alto" (decimal)
c) In the third level (Producto) the user can change "Cantidad" (decimal).

3. The TreeView must support drag & drop between it and a Grid widget so the user can drop the items from the tree in the grid and items from the grid in the Tree.

4. How do I get the model associated to a node in the Tree? If possible I would like to keep in the datasource the same members of the classes defined in the backend for each node in the Tree. I.e.

When I get the model of a node in the second level (Bulto) I would like to get this in the JavaScript object:

{

ID: 1,

NumeroBulto: 2,

Largo: 43,

Ancho: 23.3,

Alto: 2.1,

Volumen: 4.2,

}

Instead of the TreeViewItem object.

Here's my model

01.public class TreeModel

02. {

03. public List<ContenedorModel> Contenedores { get; set; }

04. }

05.

06. public class ContenedorModel

07. {

08. public Guid ID { get; set; }

09. public string Descripcion { get; set; }

10. public List<BultoModel> Bultos { get; set; }

11. }

12.

13. public class BultoModel

14. {

15. public Guid ID { get; set; }

16. public int NumeroBulto { get; set; }

17. public decimal Largo { get; set; }

18. public decimal Ancho { get; set; }

19. public decimal Alto { get; set; }

20. public decimal Volumen { get; set; }

21. public List<ProductoTreeModel> Productos { get; set; }

22. }

23.

24. public class ProductoTreeModel

25. {

26. public Guid ID { get; set; }

27. public string Descripcion { get; set; }

28. public decimal Cantidad { get; set; }

29. }

Here's my view

01.@(Html.Kendo().TreeView()

02. .Name("treeView")

03. .TemplateId("treeview-template-contenedor")

04. .BindTo((IEnumerable<ContenedorModel>)Model.TreeModel.Contenedores, (NavigationBindingFactory<TreeViewItem> mappings) =>

05. {

06. mappings.For<ContenedorModel>(binding => binding.ItemDataBound((item, contenedor) =>

07. {

08. item.Text = $"Contenedor: {contenedor.Descripcion}";

09. })

10. .Children(x => x.Bultos));

11.

12. mappings.For<BultoModel>(binding => binding.ItemDataBound((item, bulto) =>

13. {

14. item.Text = $"Bulto: {bulto.NumeroBulto}";

15. })

16. .Children(x => x.Productos));

17.

18. mappings.For<ProductoTreeModel>(binding => binding.ItemDataBound((item, producto) =>

19. {

20. item.Text = producto.Descripcion;

21. }));

22. })

23. .DragAndDrop(true)

24.)

Here's the template

1.<script id="treeview-template-contenedor" type="text/kendo-ui-template">

2. <span style="color:blue">#: item.Text #</span>

3. <button><span class='k-icon k-edit' /></button>

4.</script>

However the way I use the template here is applied to all levels.

Can anyone please help me with this?

Thank you.

TreeView

answered on 02 Jul 2019

2 answers

131 views

Treeview drag and drop preview lines missing

I have two applications which both manage hierarchies using treeviews, allowing dragging and dropping of items into a hierarchy tree.

Sample1.jpg shows the working application, whilst Sample2.jpg shows the problem one.

They both work, but on one, the treeview correctly displays the lines to indicate where an item will be dropped, whilst in the other, the line is not shown apart from a tiny dot. I've compared the two applications, and switched out the bootstrap themes and styles, and cannot identify the issue. In the DOM explorer, the treeview styles look the same.

The malfunctioning application is using version 2019.1.220 of the framework.

Any help to fix this issue would be appreciated.

Thanks

TreeView