劍道UI層疊組合框裏面電網不工作

Question

我是新來的劍道UI HTML v2013.1.226。我正在嘗試劍道內層疊組合框grid.In這個小提琴http://jsfiddle.net/moonolite3/abgy56ak/6/

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> 

腳本：

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

當我選擇 '船的國家' '船城'欄需要被引用並列出城市名稱，但不是這樣做的.Ship的城市又需要調用船名。在劍道網站中，演示級聯在網格外，我沒有得到在網格中做同樣的事情。任何人都可以幫助我或與任何其他示例小提琴。感謝提前。

注：我需要這方面的劍道version..cant變化要堅持更新一個:(

Answer 1

這似乎是爲傳遞「additionalData」的級聯COMBOX箱的讀取方法簡單 此。很混搭，但功能是存在的。

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 
} 

你應該注意到，級聯列不會更新，直到進入編輯模式後，（在單擊單元格時），這就是爲什麼我說盒內編輯未必是最好的選擇。

Answer 2

我已經修正了這個如下，以清除單元格的文本。

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