kendo-ui-react-jquery-treelist

The Kendo UI for jQuery TreeList widget wrapped as a React component.

WARNING: Must npm install professional version of Kendo UI using credentials.

You'll need to setup a .netrc file on your local system. This file contains the login (username & password) of the account on telerik.com in which you purchased Kendo UI professional or DevCraft.

Below are the instructions for both Windows and Mac users.

On Windows:

Create a text file called \_netrc in your home directory (e.g. c:\users\jane\_netrc).

Next, Declare a HOME environment variable.

EXAMPLE

C:\> SETX HOME %USERPROFILE%

Add the credentials using the format in the example above.

Git might have problems resolving your home directory if it contains spaces in its path—for example, c:\Documents and Settings\jane). Therefore, update your %HOME% environment variable to point to a directory having no spaces in its name.

On Mac:

Create a file called .netrc in your home directory ~/.netrc (i.e /User/USERNAME/.netrc). Make sure you modify the file permissions to make it readable only to you.

Add your credentials to the ~/.netrc (i.e /User/USERNAME/.netrc) file using the format from the example below.

EXAMPLE:

machine bower.telerik.com
    login [e-mail]-here
    password my-password-here

Install

npm i kendo-ui-react-jquery-treelist

Usage Example

import React from 'react';
import ReactDOM from 'react-dom';
import KendoTreeList from 'kendo-ui-react-jquery-treelist';
 
//Don't forget CSS, webpack used to include CSS
import 'kendo/css/web/kendo.common.min.css';
import 'kendo/css/web/kendo.default.min.css';
 
var treeListDataSource = new Kendo.data.TreeListDataSource({
    data: [
        { id: 1, Name: "Daryl Sweeney", Position: "CEO", Phone: "[phone]", parentId: null },
        { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer", Phone: "[phone]", parentId: 1 },
        { id: 32, Name: "Buffy Weber", Position: "VP, Engineering", Phone: "[phone]", parentId: 2 },
        { id: 11, Name: "Hyacinth Hood", Position: "Team Lead", Phone: "[phone]", parentId: 32 },
        { id: 60, Name: "Akeem Carr", Position: "Junior Software Developer", Phone: "[phone]", parentId: 11 },
        { id: 78, Name: "Rinah Simon", Position: "Software Developer", Phone: "[phone]", parentId: 11 },
        { id: 42, Name: "Gage Daniels", Position: "Software Architect", Phone: "[phone]", parentId: 32 },
        { id: 43, Name: "Constance Vazquez", Position: "Director, Engineering", Phone: "[phone]", parentId: 32 },
        { id: 46, Name: "Darrel Solis", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
        { id: 47, Name: "Brian Yang", Position: "Senior Software Developer", Phone: "[phone]", parentId: 46 },
        { id: 50, Name: "Lillian Bradshaw", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
        { id: 51, Name: "Christian Palmer", Position: "Technical Lead", Phone: "[phone]", parentId: 46 },
        { id: 55, Name: "Summer Mosley", Position: "QA Engineer", Phone: "[phone]", parentId: 46 },
        { id: 56, Name: "Barry Ayers", Position: "Software Developer", Phone: "[phone]", parentId: 46 },
        { id: 59, Name: "Keiko Espinoza", Position: "Junior QA Engineer", Phone: "[phone]", parentId: 46 },
        { id: 61, Name: "Candace Pickett", Position: "Support Officer", Phone: "[phone]", parentId: 46 },
        { id: 63, Name: "Mia Caldwell", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
        { id: 65, Name: "Thomas Terry", Position: "Senior Enterprise Support Officer", Phone: "[phone]", parentId: 63 },
        { id: 67, Name: "Ruth Downs", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 70, Name: "Yasir Wilder", Position: "Senior QA Enginner", Phone: "[phone]", parentId: 63 },
        { id: 71, Name: "Flavia Short", Position: "Support Officer", Phone: "[phone]", parentId: 63 },
        { id: 74, Name: "Aaron Roach", Position: "Junior Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 75, Name: "Eric Russell", Position: "Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 76, Name: "Cheyenne Olson", Position: "Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 77, Name: "Shaine Avila", Position: "UI Designer", Phone: "[phone]", parentId: 63 },
        { id: 81, Name: "Chantale Long", Position: "Senior QA Enginner", Phone: "[phone]", parentId: 63 },
        { id: 83, Name: "Dane Cruz", Position: "Junior Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 84, Name: "Regan Patterson", Position: "Technical Writer", Phone: "[phone]", parentId: 63 },
        { id: 85, Name: "Drew Mckay", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 88, Name: "Bevis Miller", Position: "Senior Software Developer", Phone: "[phone]", parentId: 63 },
        { id: 89, Name: "Bruce Mccarty", Position: "Support Officer", Phone: "[phone]", parentId: 63 },
        { id: 90, Name: "Ocean Blair", Position: "Team Lead", Phone: "[phone]", parentId: 43 },
        { id: 91, Name: "Guinevere Osborn", Position: "Software Developer", Phone: "[phone]", parentId: 90 },
        { id: 92, Name: "Olga Strong", Position: "Graphic Designer", Phone: "[phone]", parentId: 90 },
        { id: 93, Name: "Robert Orr", Position: "Support Officer", Phone: "[phone]", parentId: 90 },
        { id: 95, Name: "Odette Sears", Position: "Senior Software Developer", Phone: "[phone]", parentId: 90 },
        { id: 45, Name: "Zelda Medina", Position: "QA Architect", Phone: "[phone]", parentId: 32 },
        { id: 3, Name: "Priscilla Frank", Position: "Chief Product Officer", Phone: "[phone]", parentId: 1 },
        { id: 4, Name: "Ursula Holmes", Position: "EVP, Product Strategy", Phone: "[phone]", parentId: 3 },
        { id: 24, Name: "Melvin Carrillo", Position: "Director, Developer Relations", Phone: "[phone]", parentId: 3 },
        { id: 29, Name: "Martha Chavez", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
        { id: 30, Name: "Oren Fox", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 },
        { id: 41, Name: "Amos Barr", Position: "Developer Advocate", Phone: "[phone]", parentId: 24 }
    ],
 
    schema: {
        model: {
            id: "id",
            expanded: true
        }
    }
});
 
var App = React.createClass({
  render: function() {
      return (
          	<KendoTreeList options={{
                dataSource: treeListDataSource,
                height: 540,
                columns: [
                    { field: 'Position' },
                    { field: 'Name' },
                    { field: 'Phone' }
                ]
            }}></KendoTreeList>
      );
    }
});
 
ReactDOM.render(<App />, document.getElementById('app'));

React Props

Every KUI React Wrapper can make use of the following React props:

• options
• methods
• events
• unbindEvents
• triggerEvents

Each is demonstrated below using a <KendoDropDownList> KUI React wrapper.

<KendoDropDownList
    //only updates upon state change from above if widget supports setOptions()
    //don't define events here, do it in events prop
    options={{ //nothing new here, object of KUI configuration values
        dataSource:[{
            text: "Item1",
            value: "1"
        }, {
            text: "Item2",
            value: "2"
        }, {
            text: "Item3",
            value: "3"
        }],
        dataTextField: "text",
        dataValueField: "value"
    }}
    //updates if object is different from initial mount
    methods={{ //name of method and array of arguments to pass to method
        open:[], //send empty array if no arguments
        value:['2']
    }}
    //Right now, always updates
    events={{ //name of event, and callback
        close:function(){console.log('dropdown closed')},
        select:function(){console.log('item selected')},
        open:function(){console.log('dropdown opened')}
    }}
    //updates if array is different from initial mount
    unbindEvents={[ //name of event to unbind, string
        "select"
    ]}
    //updates if array is different from initial mount
    triggerEvents={[ //name of event to trigger, string
        "open",
    ]}>
        <input className="kendoDropDownList" />
</KendoDropDownList>

KUI API

• TreeList demos: http://demos.telerik.com/kendo-ui/treelist/index
• TreeList docs: http://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview
• TreeList API: http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist

License

Apache License, Version 2.0