Cascading ComboBox inside Grid Not working Kendo UI

7 posts, 0 answers
  1. moonolite
    moonolite avatar
    6 posts
    Member since:
    Nov 2014

    Posted 05 Nov 2014 Link to this post

    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: {
            },
            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 :(
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 07 Nov 2014 Link to this post

    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:

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. moonolite
    moonolite avatar
    6 posts
    Member since:
    Nov 2014

    Posted 10 Nov 2014 in reply to Alexander Valchev Link to this post

    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..
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. moonolite
    moonolite avatar
    6 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2014 in reply to Alexander Valchev Link to this post

    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
  7. moonolite
    moonolite avatar
    6 posts
    Member since:
    Nov 2014

    Posted 18 Nov 2014 in reply to Alexander Valchev Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready