Cascading ComboBox inside Grid Not working Kendo UI

[moonolite]

I am new to kendo UI HTML v2013.1.226 .I am trying cascading combo box within the kendo grid.In this 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 to 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 () {
    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 need to get invoked and list out the city name but its not doing that.Ship's city in turn need to invoke ship's Name .In kendo site the demo cascading is on outside the grid and I didn't get how to do the same inside the grid.Can any one help me out or with any other sample fiddle..Thanks in Advance.Note: I need to stick with this kendo version..cant change to updated one :(

[Alexander Valchev]

Hello,

It is not possible to configure cascading editors in batch edit mode because in batch edit mode only one editor is rendered at a time.
Please use inline or popup editing. For more information check this help topic:

• http://docs.telerik.com/kendo-ui/web/grid/how-to/grid-cascading-dropdown-editors

Regards,
Alexander Valchev
Telerik

 

 

[moonolite]

Hi Alexander, Thank you for your reply..can you please correct my fiddle or with a new example for inline editing.As I have no idea how to proceed further pls guide me..Thanks in advance..

[Alexander Valchev]

Hello Moonolite,

Did you checked the example which I provided in my previous reply? It shows now to use cascading editors in inline editing mode.
In case the example is not clear, please let me know what exactly is not demonstrated inside and I will update it.

Regards,
Alexander Valchev
Telerik

 

 

[moonolite]

Hi Valchev  ,Thanks for your reply..I struck in function  brandName inside which static "brands" is reffered..In my case every thing is in remote binding... I need a structure where there is  totally four columns inside the grid in which first two columns are independent parent dropdown which combinely decide the value of third child dropdown and which inturn decide the value of fourth grand child dropdown..and All these  dropdowns are in remote bindings...It will be much helpful  if you guide me with a sample fiddle ..Thanks in Advance

[moonolite]

I forgot to mention ..Also I struck up in for the grid datasource the data is refferring from a static local data not the remote data...Thanks

[Alexander Valchev]

Hi Moonolite,

The same approach is valid if the widgets use remote DataSource. Just instead of using brands array you should create a dataSource and use its data array (dataSource.data()).
In case you need further assistance please provide a small Kendo Dojo test page that demonstrates your current configuration. You may use the existing grid-cascading-dropdown-editors example from the documentation as a base.

Regards,
Alexander Valchev
Telerik

 

 

[Fatemeh]

I have written the following code for kendoComboBox, it does not cause any problem when creating, but when editing, only the id is displayed.

 

 

 

    

                    $('#buyer').kendoComboBox({
                        dataSource: new kendo.data.DataSource({
                            type: 'aspnetmvc-ajax',
                            serverFiltering: true,
                            serverPaging: true,
                            serverSorting: true,
                            transport: {
                                read: {
                                    url: kmc.urlBase + '/lookups/buyers',
                                    dataType: 'json',
                                    type: 'POST',
                                    beforeSend: function (xhr) {
                                        kmc.setRequestVerificationToken(xhr);
                                    }
                                }
                            },
                            schema: {
                                aggregateResults: 'aggregateResults',
                                data: 'data',
                                errors: 'errors',
                                total: 'total',
                                model: {
                                    id: 'id',
                                    fields: {
                                        id: { type: 'number' },
                                        name: { type: 'string' },
                                        code: { type: 'string' },
                                        cidNID: { type: 'string' },
                                        addr: { type: 'string' },
                                        tel: { type: 'string' },
                                        fax: { type: 'string' }
                                    }
                                }
                            },
                            error: function (e) {
                                if (e.status === 'customerror') {
                                    pki.alert(e.errors);
                                } else {
                                    var failure = pki.parseJson(e.xhr.responseText);
                                    if (failure && failure.success === false) {
                                        pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + failure.errors);
                                    } else {
                                        pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + e.xhr.responseText);
                                    }
                                }
                            }
                        }),
                        dataTextField: 'name',
                        dataValueField: 'id',
                        filter: 'startswith',
                        valuePrimitive: true,
                        //change: function (e) {
                        //    var dataItem = this.dataItem();
                        //    if (dataItem) {
                        //        pro.headerModel.set('buyer', { id: dataItem.Id, name: dataItem.Name });
                        //    }
                        //},
                        minLength: 2,
                        select: function (e) {
                            var item = e.dataItem;
                            if (item) {
                                $('#buyer-name').text(`TO: ${item.name}`);
                                $('#buyer-addr').text(`ADD: ${item.addr}`);
                                $('#buyer-tel').text(`TEL: ${item.tel}`);
                                $('#buyer-fax').text(`FAX: ${item.fax}`);
                                $('#buyer-nid').text(`COMMERCIAL/NATIONAL ID: ${item.cidNID}`);
                            }
                        }
                    });







 






 html code :

                                <td>
                                <span class="caption">Buyer: </span>
                                <input id="buyer" name="buyer" class="combobox-lg" data-bind="value: buyer.id" required />
                               </td>

[Lyuboslav]

Hello Fatemeh,

Thank you for the provided answer.

I have already replied to your question in the other forum thread. Let's continue there to avoid duplication.

Regards,
Lyubo
Progress Telerik