dataSource Object|Array|kendo.data.HierarchicalDataSource

The data source of the widget which is used to render its items. Can be a JSON object/Array/kendo.data.HierarchicalDataSource that contains an item or an Array of items to be rendered. Refer to the example below for a list of the supported properties.

Example - using a local array

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $(document).ready(function() {
        $("#context-menu").kendoContextMenu({
            target: "#target",
            dataSource:
                [{
                    text: "Item 1",
                    cssClass: "myClass",                         // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
                    url: "https://www.telerik.com/kendo-ui"                // Link URL if navigation is needed, optional.
                },
                {
                    text: "<b>Item 2</b>",
                    encoded: false,                              // Allows use of HTML for item text
                    content: "text"                              // content within an item
                },
                {
                    text: "Item 3",
                    imageUrl: "https://www.telerik.com/kendo-ui/test.jpg", // Item image URL, optional.
                    items: [{                                    // Sub item collection
                         text: "Sub Item 1"
                    },
                    {
                         text: "Sub Item 2"
                    }]
                },
                {
                    text: "Item 4",
                    spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
                }]
        })
    });
</script>

Example - using kendo.data.HierarchicalDataSource

<div id="target">Target</div>
<ul id="context-menu"></ul>
<script>
    var dataSource = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Employees",
                dataType: "jsonp"
            }
        },
        schema: {
            model: {
                id: "EmployeeId",
                hasChildren: "HasEmployees"
            }
        }
    });

    $("#context-menu").kendoContextMenu({
        target: "#target",
        dataTextField: "FullName",
        dataSource: dataSource
    })
</script>