Hello Everyone,

I am trying to build a kendo tree view with remote data  getting from the controller. I want to display a Image (attachment) at a certain node . How do I do that.?

Following is my data from the controller.

In the attached files, I have uploaded, I want to show the image at the arrow highlighted

Also. k-icon k-i-collapse is not showing at "Project Metrics" node even when the node is expanded.

 var result = new List<HierarchicalViewModel>()
            {


                new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Program Structure" },
               new HierarchicalViewModel() { ID = 3, ParendID = null, HasChildren = true, Name = "Project Metrics" },
                new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Program Structure" },
            
                new HierarchicalViewModel() { ID = 4, ParendID = 3, HasChildren = true, Name = "Project Metrics" },
                new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "State" },
                new HierarchicalViewModel() { ID = 6, ParendID = 2, HasChildren = false, Name = "Executive Summary" },
                 new HierarchicalViewModel() { ID = 7, ParendID = 2, HasChildren = false, Name = "Reporting period for RHGCP funding" },
                new HierarchicalViewModel() { ID = 8, ParendID = 2, HasChildren = false, Name = "Describe how funds are distributed and administrated in the State" },
                new HierarchicalViewModel() { ID = 9, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used for project selection" },
                new HierarchicalViewModel() { ID = 10, ParendID = 2, HasChildren = false, Name = "Describe the method(s) used to measure effectivenss of the projects and programs" },
                new HierarchicalViewModel() { ID = 11, ParendID = 2, HasChildren = false, Name = "Describe any noteworthy efforts the State has used to effectively deliver a successful program" },
               new HierarchicalViewModel() { ID = 12, ParendID = 2, HasChildren = false, Name = "Describe the status of data acquistion and analysis efforts" },
                new HierarchicalViewModel() { ID = 13, ParendID = 2, HasChildren = false, Name = "Add number of crossings" },
                new HierarchicalViewModel() { ID = 14, ParendID = 2, HasChildren = false, Name = "Provide program emphasis areas" },
                new HierarchicalViewModel() { ID = 15, ParendID = 2, HasChildren = false, Name = "Describe Section 130 program effectiveness" },
                new HierarchicalViewModel() { ID = 16, ParendID = 2, HasChildren = false, Name = "Input performance measures" },
                new HierarchicalViewModel() { ID = 17, ParendID = 3, HasChildren = false, Name = "Project Listing" },
                new HierarchicalViewModel() { ID = 18, ParendID = 3, HasChildren = false, Name = "Crash Data Statistics" }
            };

            return result;

//Kendo Tree View

 @(Html.Kendo().TreeView()
                                                .Name("treeview")
                                                .DataTextField("Name")
                                                 .Checkboxes(true)
                                                .DataSource(dataSource => dataSource
                                                .Read(read => read
                                                    .Action("Read_TreeViewData", "Questions")
                                                    )
                                                )
                                                .Events(ev => ev.Select("onTreeViewselectNode")
                                                .Check("onCheck")
                                                )
                                            )

<script>
                                    function onTreeViewselectNode(e) {
                                        var dataItem = e.sender.dataItem(e.node);
                                        console.log(dataItem);
                                    }

                                    function onCheck(e) {
                                        console.log("Checkbox changed :: " + this.text(e.node));
                                        var checkedNodes = [],
                                            treeView = $("#treeview").data("kendoTreeView"),
                                            message;

                                        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

                                        if (checkedNodes.length > 0) {
                                            message = "IDs of checked nodes: " + checkedNodes.join(",");
                                        } else {
                                            message = "No nodes checked.";
                                        }

                                        $("#result").html(message);

                                    }

                                    function checkedNodeIds(nodes, checkedNodes) {
                                        for (var i = 0; i < nodes.length; i++) {
                                            if (nodes[i].checked) {
                                                checkedNodes.push(nodes[i].id);
                                            }

                                            if (nodes[i].hasChildren) {
                                                checkedNodeIds(nodes[i].children.view(), checkedNodes);
                                            }
                                        }
                                    }

                                </script>

I am attempting to convert a donut chart created usnig the kendoChart() function to one created by binding it MVVM style. I have managed to do this (here is a dojo showing both).

However, it just feels really awkward to have to include values for each series in each data item in the observable that gets bound. Is there a better way to do this or am I doing it in the recommended manner?

Hello,

I'm having trouble with bringIntoView.

I'd like to pan a diagram so that a shape to be the center of the diagram.

It works when the first time calling bringIntoView() with a shape.

However after the first call, calling bringIntoView() with a shape does not move that shape to the center of the diagram.

I created a Dojo snippet.

To reproduce this problem, first click the shape1 button and click the shape2 button.

You will see the shape1 becomes the center of diagram, however when the shape2 button is clicked, the shape2 will be positioned at a weird place.

https://dojo.telerik.com/@jshin@hcim.com/ICANObOz

Or click the shape1 button and click the shape1 button once again.

I created this snippet based on the pan example in the API reference (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/pan).

How can I make a shape to be at the center of the diagram every time I call bringIntoView ()?

Attached is a recording of the steps to reproduce this issue.

Thank you!

We have several grids with batch editing on one page.

A user noticed if you select grid rows, then click the Cancel button for canceling edits, the selected rows are cleared.

Here's an example reproducing this issue: https://dojo.telerik.com/@joewilson0/OfiFONuF

If I set the grid to editable: false (or "inline", "incell", or "popup"), Cancel doesn't clear rows.

If I set the grid to editable: true, the Cancel button clears selected rows.

Is this expected behavior?

There is a global option on the grid called resizable that, when true, makes all columns resizable.

I want some of my columns to be fixed, in other words to disable resizing on those columns. I tried intercepting the columnResize event, but that only fires after the column has been dragged to a new size.

How can I disable resizing of particular columns?

Hello.

I'm trying to allow users to choose the mouse left click and drag behavior.

The default behavior of mouse left click and drag is selecting shapes and connections.

But I want the user to choose to select shapes and connection or pan the diagram using mouse left click and drag.

I found a thread about this, and I used diagram.scroller.enabled = true to change the mouse left click and drag behavior.

But there are some minor issues.

First issue is the mouse cursor. I want the mouse cursor to be the grab cursor, but it looks like diagram forces the cursor to be pointer.

I tried changing the cursor manually after the diagram is initialized, but it looks like the cursor inline style changes whenever the mouse hovers the diagram.

How can I change the cursor?

Another issue is the selection rectangle is still being rendered when diagram.scroller.enabled is set to true.

As you can see in the attachment, when diagram.scroller.enabled is true, and mouse left is clicked and dragged, the diagram pans as expected, but it renders a small selection rectangle. 

How can I remove this selection rectangle? when diagram.scroller.enabled  == true?

Or is using diagram.scroller.enabled the right way?

Thank you!

Hi, 

I just started looking on how to implement timeline widget in our app.

I would like to show multiple lifetime events in timeline but with different styling on the line, for example:

orange circle: achievement type 1
red circle: achievement type 2
blue circle: got child 
blue circle: got second child

I went through documentation but I don't see much options that might help with this.

Are there any suggestions how to achieve this?

Thanks and regards

Hello,

First of all, my environment is Angular10, gantt uses Kendo widgets (kendo.custom.min.js), version is 2020.3.1118
I customized a button (Add Child) on the screen. After I added a subtask,then immediately move the newly added task to the inside of another task (+ this type of movement), and then an error (e.taks = undefined), e.task cannot get the value, only in this case an error message will appear, and other moving methods will not appear.

In addition, if I add a task, F5 refreshes the page and moves the task, the above problem will not occur.

The general reason I investigated is because the id of the newly added task is assigned a value of 999. If it is not assigned, there will be no error.

This is the method of my Add Child button: