Cascading dropdown with child not binding to specific parent

2 posts, 0 answers
  1. Rui
    Rui avatar
    1 posts
    Member since:
    Aug 2017

    Posted 21 Nov Link to this post

    Hi guys, I'm new to Kendo UI and I'm current trying to implement a cascading dropdown with children not binding to specific parent. Below is the datastructure I have. I would like to update all children dropdowns when parent change. However, I can't find any api within current kendo UI that support the requirement since all the cascadefromfield requires me to put the parent id within each child item in order to match. I also having difficulty to find any events that will be triggered on child indicating that parent value has changed so that I can perform manual updates since I don't want to perform direct UI element manipulation through JQuery within my angular controller. I wonder if there's any other ways for me to achieve what I am looking for? Thanks. 

    $scope.dataOpts1 = [
                                { Name: "Parent1", Id: 1, Child0Id: 6, Child1Id: 10 },
                                { Name: "Parent2", Id: 2, Child0Id: 7, Child1Id: 11 }];
                    $scope.dataOpts3 = [
                                { Name: "Child1", Child0Id: 6},
                                { Name: "Child2", Child0Id: 7},
                                { Name: "Child3", Child0Id: 8},
                                { Name: "Child4", Child0Id: 9}];
                                 
                    $scope.dataOpts2 = [
                                { Name: "Child11", Child1Id: 10},
                                { Name: "Child12", Child1Id: 11},
                                { Name: "Child13", Child1Id: 12},
                                { Name: "Child14", Child1Id: 13}];

     

  2. Nencho
    Admin
    Nencho avatar
    1670 posts

    Posted 23 Nov Link to this post

    Hello Riu,

    Indeed, having a specific dropdown widget configured with multiple child is not feasible. As for the event - you can use the requestStart event of the dataSource object,  of the dropdownlist widget:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-requestStart

    However, regarding the described scenario, I would suggest you a slightly different implementation. You can skip the usage of the cascadeFrom functionality and manually achieve it, due to the inability to have two child widgets. That being said, you can handle the select events of the parent DropDownLists, then manually get a reference to the child dropdown and supply the data using the setDataSource method:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-setDataSource

    In the following dojo example, you can find an exemplary implementation on the matter:

    http://dojo.telerik.com/@nenchef/EMukI/11

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top