Copy datasource from Autocomplete into treeview

2 posts, 0 answers
  1. Denis
    Denis avatar
    2 posts
    Member since:
    Oct 2014

    Posted 06 Nov 2014 Link to this post

    Hello,

       I have one function that return hierarchical dataset.
       This dataset is set as datasource for Autocomplete control, which uses just parent portion of data. 
       Goal:  do not make another request to server for data, after selection of item in Autocomplete   _copy_ selected dataitem (with children) from autocomplete dataset to    treeview - i.e make it treview's dataset.  It is Ok also to copy into treeview not just selected item  but entire set returned for Autocomplete after search.
    So far no luck...
       
       Code:


       @(Html.Kendo().AutoComplete()
                          .Name("findvendor")
                          .DataTextField("company_name")
                          .Filter("contains")
                          .Placeholder("Find Vendor...")
                          .MinLength(3)
                          .DataSource(source => {
                                      source.Read(read =>{read.Action("search_vendors", "content")
                                                              .Data("function () {return {text: $('#findvendor').val() };}");}
                                                               )
                                                 
                              .ServerFiltering(true);})
                          .Events(e=> e.Select("content_addvendor_vendor_found"))      
                          .Deferred() 
                    )



    Treeview (which suppose to be filled with Autocomplete selected item Parent and its children):


     @(Html.Kendo().TreeView().Deferred() 
                                .Events(ev => ev.Select("content_addvendor_chosen"))
                                .HtmlAttributes(new { @style = "color:black;overflow: hidden;"})
                                .Name("contactstree")
                                .BindTo(new List<ca.Models.pcm_vendor>(),(Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
                                {
                                    mappings.For<ca.Models.pcm_vendor>(bound => bound.ItemDataBound((node, vendor) =>
                                    {

                                        node.Text = vendor.abbreviation  + ':' + vendor.company_name;
                                        node.Id = vendor.abbreviation;
                                        node.SpriteCssClasses = "cus-sort-quantity"; 
                                         
                                    })
                                    .Children(e => e.contacts));
                                    mappings.For<ca.Models.pcm_vendor_contact>(binding => binding.ItemDataBound((item, contact) =>
                                    {
                                        item.Text = contact.name;
                                        item.Id = '+'+contact.initials;
                                        item.SpriteCssClasses = "cus-page-white-tux"; 
                                        
                                    }));
                                })
                            )


    (since I use deferred load, this script placed at the top of the page)
    <script>

        function content_addvendor_vendor_found(e)
        {

            var new_ds = new kendo.data.HierarchicalDataSource({ data:$("#findvendor").data("kendoAutoComplete").dataSource.data())});
            new_ds.read();
            $("#contactstree").data("kendoTreeView").setDataSource(new_ds);
            //$("#contactstree").kendoTreeView({ dataSource: new_ds }).data("kendoTreeView");
            
        }

        function content_addvendor_chosen(e) {

            alert('Node selected');
            
        }

        

    </script>


    Thank you!!!













  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 10 Nov 2014 Link to this post

    Hi Denis,

    Please check the following example and let me know if it helps:

    http://dojo.telerik.com/ULeHe

    In your code I can see that you are initializing the TreeView twice (in the commented code) and not construction the dataSource correctly. So please check the above example and if you have any troubles with it - edit the example and send it back to us with your changes, so we can take a further look.

    Regards,
    Kiril Nikolov
    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
Back to Top