Uncaught TypeError: Cannot read property 'set' of undefined variable masterRow is undefined in KendoUI Grid detailInit
<p>I posted a question the other and it got answered,<a href="https://stackoverflow.com/questions/34906304/how-do-i-get-the-id-of-the-selected-row-from-the-detailinit-then-collapse-the-d/34921913#34921913">my answered question</a>, which i was thankful for, I modified my code to match the other members code that he set up in the Telerik Dojo <a href="http://dojo.telerik.com/UgIDi/3" rel="nofollow noreferrer">Heres a dojo</a>
Everything is goin well up until I reach </p>

<p><code>var masterRow = masterGrid.dataSource.get(groupID);</code></p>

<p>thats where I am getting it as undefined and I am not sure why...my full code is</p>

<pre><code>function onSelectedRowClick(e) {
    var catalogGrid = $("#CatalogGrid").data("kendoGrid");
    var selectedID = catalogGrid.dataItem(catalogGrid.select());
    var theID = selectedID.globalGroupID;
    myID = theID;
    groupID = myID;
}

var myID;

// #region Catalog Grid

var groupID;

function TheCatalogGrid(catalogData) {
    $("#CatalogGrid").kendoGrid({
        dataSource: {
            data: catalogData
        },
        schema: {
            model: {
                id: "globalGroupID",
            }
        },

        columns: [
           { field: "globalGroupLevel", title: "globalGroupLevel", hidden: true },
           { field: "globalGroupName", title: "Group Name", width:350 },
           { field: "isRequired", title: "*", width:20 },
           { field: "optionName", title: "Option Name" },
           { title: "Description" },
           { title: "Price" }
        ],

        change: function (e) {
            onSelectedRowClick();
        },
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 500,
        dataBound: function (e) {
            var data = this.dataSource.data();
            $.each(data, function (i, row) {
                if (row.get("globalGroupLevel") == 0) {
                    var element = $('tr[data-uid="' + row.uid + '"] ');
                    element.addClass("colored-row");
                }
            });
        },
        detailInit: detailInit,
        detailExpand: function(e){
            groupID = this.dataItem(e.masterRow).get("globalGroupID");
        },
    });
}
function detailInit(e) {
    $("&lt;div/&gt;").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            transport: {
                read: URLParams.GetTheGlobalGroupOptions + "?id=" + groupID
            },
        },
        scrollable: false,
        selectable: "row",
        filter: { field: "GlobalGroupID", operator: "eq", value: e.data.globalGroupID },
        change: function (e) {
            // get detail row
            var detailRow = this.dataItem(this.select());
            var optionName = detailRow.get("OptionName") // Change this stuff to populate into the correct columns

            // get master row
            var masterGrid = $("#CatalogGrid").getKendoGrid();
            var masterRow = masterGrid.dataSource.get(groupID);

            // set 'Option Name' value to master row 'optionName' field
            masterRow.set("optionName", optionName);

        },
        columns: [
            { field: "OptionName", title: "Option Name" },
            { field: "OptionDescription", title: "Description" },
            { field: "OptionPriceComment", title: "Price" }
        ]
    });
}
</code></pre>

<p>any idea on why its coming as undefined?</p>