Kendo UI Cascading ComboBox inside Grid Not working

Question

I am new to Kendo UI HTML v2013.1.226. I am trying cascading combo box within the Kendo grid. In this fiddle.

html:

<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
    <div id="contentArea" style="background-color:Silver;">
        <div id="myList"></div>
    </div>
    <div id="footer" style="background-color:Silver;">
        Click on ShipCity to trigger custom editor
    </div> 
</div>

script:

var myDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            id: "OrderID",
            fields: {
                OrderID: { type: "number" },                    
                ShipName: { type: "string" },
                ShipCountry: { type: "string" },
                ShipCity: { type: "string" },
                ShipName: { type: "string" }
            }
        }
    },
    pageSize: 50,
    serverPaging: true,
    serverFiltering: true,
});

var $footer = $("#footer");

var gridHeight = function () {
    return $(window).height() - $footer.height() - 2;
}

var $grid = $("#myList").kendoGrid({
    scrollable: { virtual: true },
    editable: true,
    dataSource: myDataSource,
    sortable: true,
    height: gridHeight(),
    columns: [
        { field: "OrderID" },
        { field: "ShipName"},
        { field: "ShipCountry", 
            title : "Ship's Country",
            editor: function(container, options) {
                $('<input id="ShipCountry1" required data-text-field="ShipCountry" data-value-field="ShipCountry" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    filter: "contains",
                    placeholder: "Select category...",
                    dataTextField: "ShipCountry",
                    dataValueField: "ShipCountry",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: 'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCountry'
                        }
                    },
                });
            }
        },
        { field: "ShipCity", 
            title : "Ship's City",
            editor: function(container, options) {
                $('<input id="ShipCity1" required data-text-field="ShipCity" data-value-field="ShipCity" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    autoBind: false,
                    cascadeFrom: "ShipCountry1",
                    filter: "contains",
                    placeholder: "Select product...",
                    dataTextField: "ShipCity",
                    dataValueField: "ShipCity",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCity'
                        }
                    }
                });
            }
        },
        { field: "ShipName", 
            title : "Ship's Name",
            editor: function(container, options) {
                $('<input id="ShipName1" required data-text-field="ShipName" data-value-field="ShipName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
                     autoBind: false,
                    cascadeFrom: "ShipCity1",
                    filter: "contains",
                    placeholder: "Select product...",
                    dataTextField: "ShipName",
                    dataValueField: "ShipName",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipName'
                        }
                    }
                });
            }
        }
    ]
});

$("#rootLayout").kendoSplitter({
    orientation: "vertical",
    panes: [
        { scrollable: false, collapsible: false, size: "90%" },
        { collapsible: true, size: "10%" }
    ]
});

var resizeGrid = function () {
    var dataArea = $grid.find(".k-grid-content");
    var newHeight = gridHeight();
    var diff = $grid.innerHeight() - dataArea.innerHeight();

    $grid.height(newHeight);
    dataArea.height(newHeight - diff);
}

$(window).resize(function () {
    resizeGrid();
});

When I select the ship's Country, the ship's City column needs to get invoked and list out the city name, but it's not doing that. Ship's city in turn needs to invoke ship's Name. On the Kendo site, the demo cascading is on outside the grid and I didn't get how to do the same inside the grid. Can anyone help me out or with any other sample fiddle.

Note: I need to stick with this kendo version, can't change to an updated one.

Answer 1

I have fixed this as below in order to clear the text of cell.

$('#Id of the Dropdown').closest("td").next().html('');

Answer 2

It appears to be as simple as passing "additionalData" to the read method of the cascaded combox box.

This is pretty mashed up but the functionality is there.

columns.Bound(e => e.SportId).Title("Fav Sport").EditorTemplateName("SportsList");
columns.Bound(e => e.TeamId).Title("Fav Sport2").ClientTemplate("#=SportName#").EditorTemplateName("SportsList2");

The editor template for SportsList2 is what we care about. Here it is, note the data function call on the read method.

@(Html.Kendo().DropDownList()
    .Name("TeamId")                                
    .DataTextField("Text")
    .DataValueField("Value")             
    .DataSource(source =>
        source.Read(read => read.Action("GetSports2", "GridPost")
            .Data("ddlData"))
    ))         

In your main View you need to define this ddlData function.

function ddlData() {
    var row = $(event.srcElement).closest("tr");
    var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
    var dataItem = grid.dataItem(row);
    return { sportId: dataItem.SportId }
}

public JsonResult GetSports2(int sportId)
{
   // pull data
}

You should note that the cascaded column isn't going to update until after edit mode is entered, (when the cell is clicked) which is why I said InCell editing might not be the best option.