Kendo UI Cascading ComboBox внутри Grid Не работает

Я новичок в Kendo UI HTML v2013.1.226. Я пытаюсь каскадировать поле со списком в сетке Кендо. В этой скрипте.

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>

сценарий:

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();
});

Когда я выбираю страну корабля, необходимо вызвать столбец города корабля и указать название города, но он этого не делает. Город корабля, в свою очередь, должен вызывать имя корабля. На сайте кендо демонстрационное каскадирование включено вне сетки, и я не понял, как сделать то же самое внутри сетки. Может ли кто-нибудь помочь мне или с любым другим образцом скрипки.

Примечание: мне нужно придерживаться этой версии кендо, я не могу перейти на обновленную.


combobox kendo-ui cascading
person Winds    schedule 05.11.2014    source источник
comment
Интересный вопрос, позвольте мне посмотреть, смогу ли я собрать что-нибудь вместе. Мне интересно, является ли редактирование incell лучшим вариантом для этого.   -  person CSharper    schedule 05.11.2014

Ответы (2)


arrow_upward
0
arrow_downward

Я исправил это, как показано ниже, чтобы очистить текст ячейки.

$('#Id of the Dropdown').closest("td").next().html('');
person Raghvendra Tomar    schedule 28.02.2015

arrow_upward
0
arrow_downward

Кажется, это так же просто, как передать «дополнительные данные» в метод чтения каскадного поля со списком.

Это довольно размыто, но функциональность есть.

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

Шаблон редактора для SportsList2 — это то, о чем мы заботимся. Вот он, обратите внимание на вызов функции data в методе чтения.

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

В вашем основном представлении вам нужно определить эту функцию ddlData.

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
}

Обратите внимание, что каскадный столбец не будет обновляться до тех пор, пока не будет введен режим редактирования (когда ячейка щелкнута), поэтому я сказал, что редактирование InCell может быть не лучшим вариантом.

person CSharper    schedule 05.11.2014
comment
Ссылка telerik.com/forums/pass-grid -view-model-data-to-editor-template - person CSharper; 05.11.2014
comment
Большое спасибо за ваш ответ. Я не могу получить ваш код кендо ASP.NET. Не могли бы вы сообщить в кендо HTML или отредактировать мой jsfiddle. Заранее спасибо. - person Winds; 06.11.2014
comment
Я не знаю, как настроены веб-сервисы Kendo, поэтому я не знаю, как отредактировать скрипку, чтобы сделать это, потому что все зависит от URL-адреса веб-сервисов. - person CSharper; 06.11.2014