Change data in parent grid

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="mainVerticalMenu"></div>
<div id="mainVerticalTabStrip"></div>

JavaScript

$("#mainVerticalTabStrip").kendoTabStrip({
    animation          : false,
    dataTextField      : "text",
    dataContentUrlField: "contentUrl"
});


$("#mainVerticalMenu").kendoTreeView({
    dataSource: [
        {
            text : "text1",
            id   : 1,
            items: [
                {
                    text: "text1.1",
                    id  : 101
                },
                {
                    text: "text1.2",
                    id  : 102
                },
                {
                    text: "text1.3",
                    id  : 103
                }
            ]
        },
        {
            text: "text2",
            id  : 2
        }
    ],
    select    : mainContentTreeView_onSelect
});
$("#mainVerticalMenu").data("kendoTreeView").expand(".k-item");


function mainContentTreeView_onSelect(e) {
    var mainTreeView = $("#mainVerticalMenu").data("kendoTreeView");
    var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");

    var dataItem = mainTreeView.dataItem(e.node);
    var selectedNodeText = dataItem.text;
    var selectedNodeValue = dataItem.id;

    var data = mainVerticalTabStrip.element.data("my-data") || [];
    if (!data[selectedNodeText]) {
        mainVerticalTabStrip.append({
            text   : selectedNodeText + "  <span>hello</span>",
            encoded: false,
            content: "Hello"
        });
        data[selectedNodeText] = Object.keys(data).length + 1;
        mainVerticalTabStrip.element.data("my-data", data);
    }
    mainVerticalTabStrip.select(data[selectedNodeText] - 1);
}