Telerik Forums
Kendo UI for jQuery Forum
0 answers
150 views

Hi Team,

I am using file manager and I wanted to sort tree view elements in file manager based on some custom logic. Now by default it is sorting based on name. Is there any way to implement custom sorting?

jessen
Top achievements
Rank 1
 asked on 25 May 2022
0 answers
83 views

Hi All,

I need to create a dropdownlist & kendoTreeList inside a kendo grid even though the grid is not set to edit mode.

User should be able to select the value from the dropdown list & the kendo Treelist.

kindly give me the  approach to implement this. 

please share me the links of any examples .

Thanks in advance. :)

 

 

 

Sunil
Top achievements
Rank 1
 updated question on 15 Feb 2022
0 answers
60 views
Hello , I am getting issue in tree menu drag and drop. how to stop it. it's coming is randomly kindly help.
Sanjay
Top achievements
Rank 1
Iron
 updated question on 14 Feb 2022
0 answers
62 views

 

I was configuration a directory in a directory by used File Manager.

 

After that whenever click the sub directory, parent directory move to left (created 'k-treeview-toggle').

 

What's that?

 

DEMO: multiple click the 'folder2' 

https://dojo.telerik.com/@handcake/EJucAmOF

jang
Top achievements
Rank 1
 updated question on 04 Feb 2022
0 answers
73 views

Hello,

 

I'm my angular app I'm trying to achieve drag and drop from treeview to grid.

I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.

 

Is this possible?

 

Thanks in advance

Luis
Top achievements
Rank 1
 asked on 18 Oct 2021
0 answers
76 views

Hey all I am trying to find the correct way to order/sort my child names in order from A-Z.

Currently my treeview looks like this:

And this is how I would like to sort it:

The data is coming in via JSON like so (using the above example):

[{
        "Name": "AU",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Gitlab",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "B",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHubCommits",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "GitHub",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Code Repos",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Re",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ir",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "Ru",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Academic",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveA",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    }, {
        "Name": "LoveH",
        "Description": null,
        "Id": "xxx",
        "DocumentType": null,
        "Category": "Dating",
        "Icon": null,
        "ProviderId": 2
    },.........
]

Note that the JSON above does not come in any type of order. The Category names themselves are in order by me doing this:

dataSource: { data: resultData, schema: { model: { children: 'items' }, parse: (data) => { let newData = []; //Re-order catagory names A-Z data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);

....

The rest of the above code looks like this::

           data.forEach(item => {
              let parent = newData.find(parentItem => parentItem.text === item.Category);

              if (!parent) {
                 //The beginning of the tree category
                 parent = {
                     id: 2,
                     text: item.Category,
                     expanded: true,
                     items: [],
                     imageUrl: "" + item.Icon + ""
                 };

                 newData.push(parent);
              }

              parent.items.push({
                 //Each "child" under the above category
                 id: 3,
                 text: item.Name,
                 imageUrl: "" + item.Icon + ""
              });
           });

           return [{
              id: 1,
              text: 'Categories',
              expanded: true,
              items: newData
           }];
       }
   }
 }
});

How would I, using the code above, sort also the child items under each category name?

I've tried already adding this to the code:

sort: {
field: "Name",
dir: "asc"}

But that does not seem to do anything?
David
Top achievements
Rank 1
 updated question on 10 Jun 2021
0 answers
214 views

This is solved and doesn't need to be answered. I just put it here in case someone runs into the same problem.

A treeview item says it has children altough there are no children by using "hasChildren":

<!DOCTYPE html>
<html lang="en">
 
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
 
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
 
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.blueopal.min.css" />
 
        <script src="http://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
    </head>
 
    <script>
         
        $(document).ready(function() {
 
            // Bind dropdownlist
            $("#mytree").kendoTreeView({
                animation: false,
                dataSource: [
                    { 'id': '1', 'text': 'One child entry', 'expanded': 'true', "items": [ {'id': "2", 'text': "No child entry", "items": []} ] }
                ],
                select: function(e) {
 
                    var treeItem = this.dataItem(e.node);
 
                    if (treeItem.hasChildren) { alert ("Entry has children"); }
                    else { alert ("Entry has no children"); }
                }
            });
        });
         
    </script>
 
    <body>
        <div id="mytree" style="clear: both;"></div>
    </body>
</html>

 

You can run this code and click on the treeview entry "No child entry". It will tell you it has children! Why? The problem is on the predefinition in the datasource: ... ,"items": []

Remove that and it will work fine. I thought the Treeview Widget would take that over or replace it. But since it outputs wrong result, don't use it that way.

 

Tayger
Top achievements
Rank 1
Iron
 asked on 03 Jul 2017
0 answers
29 views

I need some help using a hierarchicalDataSource with a treeview control.  It works fine as an array but I can't figure out how to make it work with a datasource.

 Essentially my datasource is a two level structure.

       date:

        eventId:

      

Here are two different datasources in my app.js file.

 

    window.calendarData = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://...",
                dataType: "json"
            }
        },
        schema: {
            model: {
                id: "eventId",
                hasChildren: "items",
                fields: {
                    eventId: {
                        editable: false
                    },
                    date: {
                        editable: true
                    },
                    items: {
                        model: {
                            id: "eventId",
                            fields: {
                                eventId: {
                                    editable:false
                                },
                                lastname: {
                                    type: "string",
                                    editable: true
                                }
                            }
                        }
                    }
                }
            }
        }
    });
    window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
        data: [
            {
                eventId: 0,
                date: '2015-08-01',
                items: [
                    {
                        eventId: 1,
                        lastname: "poulin",
                        },
                    {
                        eventId: 2,
                        lastname: "smith",
                     }
                  ]
              },
            {
                eventId: 3,
                date: '2015-08-02',
                items: [
                    {
                        eventId: 4,
                        lastname: "jones"
                      }
                 ]
             }
        ]
    });
    
Here is the control I'm putting it into.

 

    <div id="mainCalendar">
    </div>
    <script>
        $(document).ready(function () {
            $("#mainCalendar").kendoTreeView({
                dataSource: window.calendarData,
                dataTextField: ["date", "lastname"]
            })
        });
    </script>

If I use window.calendarDataLocal, it works, the other way what happens is the two main nodes (identified by date) show up but the lower level items show up as undefined.

Essentially my data is made up 
​

Doug
Top achievements
Rank 1
 asked on 04 Sep 2015
0 answers
96 views
Customers who are observing this bug can download the latest internal build to address this.

If upgrading is not possible, add the following CSS on the page that contains the TreeView with checkboxes to resolve the problem:

<style>
 .k-treeview .k-checkbox { opacity: 1; width: auto; }
</style>

Telerik Admin
Top achievements
Rank 1
Iron
 asked on 15 Jan 2015
0 answers
179 views
Hi - I have a TreeView defined as one of a series of filters for my page.  I want to be able to send in default values so that when the user first brings up the page, they have values for the chart.  What I can't seem to figure out is how to set the checkbox for the value I am sending in.  I can do it on my TreeViews that are radio buttons.  I can also set all the checkboxes to checked, but can't find the right syntax to set just one. 

I have tried a variety of syntax.  gradeLevelParm is the value I am passing:
$("#gradeLevelFilterTree input[value='" + gradeLevelParm + "']").click();
 $("#gradeLevelFilterTree input:checkbox"[value = gradeLevelParm]).click();
 $("#gradeLevelFilterTree input:checkbox[value='" + gradeLevelParm + "']").click();

This selects all the checkboxes, when I want one specific set.
$("#gradeLevelFilterTree input:checkbox").click();

Thanks for any help!

Here is the code that I have creating the TreeView.
ktvGradeLevelFilter = $("#gradeLevelFilterTree").kendoTreeView({
    dataTextField: ["text", "GradeLevelID"],
    dataSource: {
        transport: {
            read: function (options) {
                $.getJSON(Helpers.toServicesUrl("/GetfltEWSGradeLevel"),
                    {
                        username: Context.UserName,
                        districtId: Context.DistrictId,
                        //                                schoolType: "H"
                        schoolType: schoolTypeParm //ktvSchoolFilter.getSelectedSchoolType()
                    },
                    function (data) {
                        gradeLevelData = data.GetfltEWSGradeLevelResult.RootResults;
                        gradeLevelData = [{
                            text: "Grade Level(Counts by Risk Factor)",
                            items: gradeLevelData,
                            expanded: false
                        }];
                        options.success([]);
                        ktvGradeLevelFilter.dataSource.data(gradeLevelData);
 
                         
                    }).fail(function (jqXHR) {
                        options.error(jqXHR);
                    });
            }
        },
        schema: {
            model: {
                children: "items"
            }
        }
    },
    checkboxes: {
        checkChildren: true
    }
}).data("kendoTreeView");
Lisa
Top achievements
Rank 1
 asked on 11 Sep 2013
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?