Telerik Forums
Kendo UI for jQuery Forum
2 answers
144 views

A kendo treeview is looking rather off, as per the attached file.

I'm not sure how to resolve it exactly as I haven't made any changes to markup or styles.

Though, I feel some styles might be overriding the ones that the treeview uses.

 

In a bower.json file is the following entry in "dependencies":

"kendo-ui": "https://bower.telerik.com/bower-kendo-ui.git#2017.2.907"

 

The latest 2020 version was trialled, but there were issues with icons. We are running some old stuff. But since recently, the treeview was completely fine.

Does anyone have any suggestions as to what I should look for to see if I can get the styles to work properly?

Matthew
Top achievements
Rank 1
Veteran
 answered on 26 Sep 2020
2 answers
262 views

Currently I have a treeview populated from a datasource that has additional fields.  I am using a filter to show checkboxes on the child nodes only (not the top level node). One of those extra fields is called loss.  If the loss value is greater than zero I would like to change the text color of the node to red.

My current template is "# if(!item.items){# <input type='checkbox' value='true' />#}#"

How would I do this?

 

Thanks

Jason

Jason
Top achievements
Rank 1
Veteran
 answered on 16 Sep 2020
1 answer
107 views

Is there a way to check if the click event on a node had the control key? Unlike the drag/drop events where you can get the original event, I cannot see the same with the select event...

 

Matt

Ivan Danchev
Telerik team
 answered on 05 Aug 2020
3 answers
540 views

 

I have a page where I am adding multiple treeviews dynamically, using a kendo template.

They are created in a loop from a javascript object.

I build the structure (ul, li, etc.), then after creating the multiple tress, run the $(...).kendoTreeView() with checkbox options.

The treeviews are formatted but as single select and not with checkboxes.

I have created an example (https://dojo.telerik.com/otelaBEL/2).

What is going wrong?

Aleksandar
Telerik team
 answered on 09 Jul 2020
2 answers
145 views

I have a TreeView implementation that often contains hierarchies that have large numbers of nodes in very flat structures.  While I have drag and drop working, the usability just isn't very good.  So, I'm implementing a cut/paste mechanism where the cut simply remembers the unique id of the source node and on paste of the target node, I get the source node using its id and attempt to .append(sourceNode, targetNode).

However, this doesn't seem to work.

Is this the best way to approach this or is there a different way I should approach this?

 

  $("#mnuHierarchyRightClick").kendoContextMenu({
            target: "#tvHierarchy",
            filter: ".k-in",
            select: function (e) 
            { 
                switch (e.item.id) 
                {
                    case "mnuHierarchyRightClickCut":

                         var tv = $("#tvHierarchy").data("kendoTreeView");
                         var dataItem =  tv.dataItem(e.target);
                    
                        self.setClipBoard(dataItem.ID,'Clipboard: ' + dataItem.Text);

                        break;

                    case "mnuHierarchyRightClickPaste":

                         
                        self.paste(e.target);

                        break;
                    default:
                        break;
                };
            }
        });

// called from click on context menu of the TreeView

MyController.prototype.paste = function (targetNode)
{
    var self = this;

    try
    {
       
        var tv = $("#tvHierarchy").data("kendoTreeView");

        if (targetNode == null) { return false; }

        var targetDataItem = tv.dataItem(targetNode);
        var pastedDataItem = tv.dataSource.get(self.ClipBoardPrimaryKeyID);

        self.setClipBoard(0,'');

        var pastedNode = tv.findByUid(pastedDataItem.uid);

        pastedDataItem.set('parentID', targetDataItem.id);
 
        tv.append(pastedNode,targetNode);

 
    }
    catch(e)
    {
        alert(e);
    }
 
}

Petar
Telerik team
 answered on 17 Jun 2020
4 answers
269 views

We just upgraded from Kendo 2016.2 to 2017.2.621 and it's seems like we can't use the setStatusClass from the drag event anymore.  The documentation says that the naming convention has changed starting with version 2016.3.914 but I've tried every pattern possible involving the k and the i without success.  None of the provided value used enabled the k-denied icon.  Also, calling setStatusClass with k-denied use todo the same job as calling a e.setValid(false); on the drop event... this ain't working anymore.

Here's a snippet that reproduce the problem.

Ivan Danchev
Telerik team
 answered on 17 Jun 2020
6 answers
541 views
I have this datasource
var HDS = new kendo.data.HierarchicalDataSource({
    error: raiseAjaxErrorWindow,
    transport: {
        read: {
            url: HDS_URL,
            dataType: "jsonp"
        }
    },
    schema: {
        model: {
            id: "id",
            hasChildren: "hasChildren",
            data: "data"
        }
    }
});
and this tree view config
    $("#treeview").kendoTreeView({
        dataSource: HDS,
        dataTextField: "text",
        dragAndDrop: false,
        select: onSelect,
        expand: onExpand,
        collapse: onCollapse
    });

The HDS url delivers a callback that looks like

jQuery18209300398211926222_1361181052330(
[{"id":"2a1bfc85-06d5-4702-bc92-d659fcae9d39",
"text":"Group 1",
"hasChildren":"1",
"data":{"type":"1","depth":2,"color":"red","flavor":"up"}
}])


call this the foobar node.

How do I add extra rendering to the tree node to display the items in the data field?

When a node having children is opened, the HDS url is automatically ajaxed with data id=<id of node>.

Is there a way to configure the transport.read so that when it is to be opened, it will use some or all of the the extra data of the foobar node when ajaxing the url. ?

For instance, I would like the HDS to be called with the additional data  depth=2&type=1

If so, where would I put this little magic ?

Thanks,
Richard
Veselin Tsvetanov
Telerik team
 answered on 19 May 2020
3 answers
154 views

I'm trying to put a context menu on a treeview. Which is working.But when I use the same code to target another css class (targeting <a> tags it's only showing the first letters of each word)

 

 

 

mudi
Top achievements
Rank 1
Veteran
 answered on 15 May 2020
3 answers
271 views

Hi,

I need to display a tooltip for KendoTreeView when hovered over the checkbox.

HTML

<div class="demo-section k-content">
 <div>
  <div id="treeview"></div>
 </div>
</div>

 

JavaScript

ruleNames = [{ text: "Rule 1", description: "Rule 1 Hovered upon" },
             { text: "Rule 2", description: "Rule 2 Hovered upon" }]
$("#treeview").kendoTreeView({
            checkboxes: {
                checkChildren: true
            },
            check: function (e) {
                onCheck(pass);
            },
            dataSource: [{ text: "List of Rules", expanded: false, items: ruleNames }]
        });

I want to display the description text on the tooltip.

Please could your help me out with a demo.

Thanks in advance

Martin
Telerik team
 answered on 12 May 2020
3 answers
348 views
I'd like to show lines indicating the levels in a TreeView. Please see the image for examples. I've found something similar at https://docs.telerik.com/kendo-ui/controls/navigation/treeview/how-to/appearance/show-node-lines but it's not quite there yet.
Dimitar
Telerik team
 answered on 27 Apr 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?