Kendo UI Cascading ComboBox inside Grid Not working -

Kendo UI Cascading ComboBox inside Grid Not working -

i new kendo ui html v2013.1.226 .i trying cascading combo box within kendo grid.in fiddle 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 trigger custom editor </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 () { homecoming $(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 select 'ship's country' 'ship's city' column need invoked , list out city name not doing that.ship's city in turn need invoke ship's name .in kendo site demo cascading on outside grid , didn't how same within grid.can 1 help me out or other sample fiddle..thanks in advance.

note: need stick kendo version..cant alter updated 1 :(

it appears simple passing "additionaldata" read method of cascaded combox box. pretty mashed functionality 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 sportslist2 care about. here is, note data function phone call on read method.

@(html.kendo().dropdownlist() .name("teamid") .datatextfield("text") .datavaluefield("value") .datasource(source => source.read(read => read.action("getsports2", "gridpost") .data("ddldata")) ))

in main view need define 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); homecoming { sportid: dataitem.sportid } } public jsonresult getsports2(int sportid) { //pull info }

you should note cascaded column isn't going update until after edit mode entered,(when cell clicked) why said incell editing might not best option.

combobox kendo-ui cascading