ejtreeview issues

[Satheesh Kumar]

Hi

I have few issues in ejtreeview. Here is my code:

$("#treeView").ejTreeView({

            fields: {

                id: "id", parentId: "parentCompany", text: "name", 

                //hasChild: "hasChild", 

                dataSource: treeviewdata, 

                expanded: "expanded"

                //, isChecked: "isChecked", imageUrl: "img" 

            },

            height: 300,

           ready: function(args) {

                alert("All TreeView nodes are loaded successfully.");

            },

            nodeSelect: function(e) {

                   //some code

            },

            width: "100%",

            //enablePersistence:true

        });

1. ready event is not firing

2. if i uncomment enable persistence, height is not considered and scrolls are not visible

3. randomly some node is selected by default

4. how to use this treeview inside bootstrap dropdown

5. How to highlight an entire row of a TreeView Item when it is selected or mouseover

6. expanded not working though i set expanded

7. how to expand first child nodes on load

Please correct if i am wrong and help me out sooner.

Thanks.

[Ashokkumar Balasubramanian]

Hi Satheesh Kumar,  

 

Query 1: Ready event is not firing 

 

We have checked your reported problem with your provided code block, but ready event is triggered properly at our end. Could you please check the below image and sample?   

   

 

Sample Link: https://jsplayground.syncfusion.com/a5kvlhee 

 

Query 2: if i uncomment enable persistence, height is not considered and scrolls are not visible. 

 

Height is considered and scroll bar is visible for using enablePersistance property in TreeView component. Please check the below image. 

 

  

 

Query 3: randomly some node is selected by default 

 

You can achieve this requirement by using allowMultiSelection property and selected attributes of fields property, please check the sample in below online location.   

 

https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/multi-select 

 

Query 4: how to use this treeview inside bootstrap dropdown 

 

We were able to integrate bootstrap drop down component to TreeView using template concepts. Please check the below documentation and sample.   

 

https://help.syncfusion.com/js/treeview/template-support 

 

Sample Link: https://jsplayground.syncfusion.com/j3rb0miy 

 

Query 5: How to highlight an entire row of a TreeView Item when it is selected or mouseover 

 

We have provided new API called “fullRowSelect” for this requirement. This property is used to enable/disable the full row selection support in TreeView control.    

    

We have live demo sample for your requirement. Please refer to the below link,    

   

https://js.syncfusion.com/demos/web/#!/bootstrap/treeview/FullRowSelect   

    

For more details on the Full Row Selection support, please refer to the help document link:

 

https://help.syncfusion.com/js/treeview/full-row-selection   

 

Query 6: expanded not working though i set expanded  

Query 7: how to expand first child nodes on load 

 

Expanded property works perfectly in our TreeeView component and you can use this property to expand the corresponding child node. Please check the below code block.  

 

[Script] 

 

var localData = [ 

                   { id: 1, name: "Discover Music", hasChild: true, expanded: true } 

] 

 

$("#treeView").ejTreeView({ 

               fields: { id: "id", parentId: "pid", text: "name", hasChild: "hasChild", dataSource: localData, expanded: "expanded" } 

            }); 

 

Sample Link: https://jsplayground.syncfusion.com/a5kvlhee  

 

Please let us know whether the provided information’s are helpful to achieve your requirement or not. 

 

Regards, 

Ashokkumar B.  

[Satheesh Kumar]

Hi

Thanks for helping me out and i really appreciate the excellent support by syncfusion team.

I found that major cause of the problem arised because of using older version and when i used the latest version everything worked with ease.

1. When i use fullRowSelect and if i change font-size the ui is braking that is there is a padding issue with fullRowSelect.

2. Also i want treeview inside bootstrap dropdown and not the vice versa.

3. When i scroll treeview to end and scroll again the body scrolls at background. How to prevent scrolling of background once i reach the end of treeview.

Please let me know the corrections and thanks again for your support. 

[Ashokkumar Balasubramanian]

Hi Sathish Kumar, 

 

Query 1: When i use fullRowSelect and if i change font-size the ui is braking that is there is a padding issue with fullRowSelect. 

 

When you use fullRowSelect support to customize the tree nodes, you should customize the corresponding e-full-row element also, please check the below code block and sample  

 

[CSS] 

 

.mytree .e-item .e-text { 

                             font-size:18px; 

      } 

      .mytree .e-fullrow{ 

              height: 27px; 

              margin-top: -26px; 

      } 

      .mytree .e-plus, .mytree .e-minus, .mytree .e-icon.e-load{ 

                             padding-top:9px; 

      } 

 

Sample: http://jsplayground.syncfusion.com/jwjzn1yg 

 

To know more details about tree node customization with fullRowSelect property, please check the below help document. 

 

https://help.syncfusion.com/js/treeview/full-row-selection#customization 

 

Query 2:  i want treeview inside bootstrap dropdown and not the vice versa 

 

Please find the sample in below playground. 

 

https://jsplayground.syncfusion.com/klwywscv 

 

Query 3: i scroll treeview to end and scroll again the body scrolls at background. How to prevent scrolling of background once i reach the end of treeview. 

 

We are able to bind the scroll event for TreeView component. So, based on your requirement you can prevent the corresponding scroller. For your reference we have disable a body scrolling at our end of TreeNode scroll. Please find the sample in below playground.  

 

https://jsplayground.syncfusion.com/4ijx4nyz 

 

Please let us know, if you have any further assistance on this. 

 

Regards, 

Ashokkumar B. 

[Satheesh Kumar]

Hi

Thank you again for your support. Query 1 is ok but still others are not resolved.

Query 2:  i want treeview inside bootstrap dropdown and not the vice versa 

When i try to collapse or expand any node bootstrap dropdown hides which you can check in the same example you provided.

Query 3: i scroll treeview to end and scroll again the body scrolls at background. How to prevent scrolling of background once i reach the end of treeview.

Though you hide the scroll i could not get body scroll when i move my mouse out and other contents of my body is not visible. Please try this out and try to scroll outside tree which will explain my issue.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <title>Essential Studio for JavaScript : TreeView - FullRowSelection</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />

    <link rel='nofollow' href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <link rel='nofollow' href="//cdn.syncfusion.com/16.1.0.24/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="16.1.0.24/themes/web/content/default.css" rel="stylesheet" />

    <link rel='nofollow' href="16.1.0.24/themes/web/content/default-responsive.css" rel="stylesheet" />

<script src="//cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js" type="text/javascript"> </script>

    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js" type="text/javascript"></script>

    <script src="//cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js" type="text/javascript"></script>

    

</head>

<body>

    <div class="content-container-fluid">

      a<br/>

      b<br/>

      c<br/>

      d<br/>

      e<br/>

      f<br/>

      g<br/>

      h<br/>

      i<br/>

      j<br/>

        <div class="row">

            <div class="cols-sample-area">

                <div style="width: 250px; max-width:100%">

                    <div id="fullrowtree"></div>

                </div>

              <!--<div style="height: 450px; max-width:100%">

                    <div id="fullrowtree1"></div>

                </div>-->

            </div>

        </div>

       a<br/>

      b<br/>

      c<br/>

      d<br/>

      e<br/>

      f<br/>

      g<br/>

      h<br/>

      i<br/>

      j<br/>

    </div>

    <script type="text/javascript">

        var localData = [

                   { id: 1, name: "Discover Music", hasChild: true, expanded: true },

                   { id: 2, pid: 1, name: "Hot Singles", selected: true },

                   { id: 3, pid: 1, name: "Rising Artists" },

                   { id: 4, pid: 1, name: "Live Music" },

                   { id: 6, pid: 1, name: "Best of 2013 So Far" },

                   { id: 7, name: "Sales and Events", hasChild: true, expanded: true },

                   { id: 8, pid: 7, name: "100 Albums - $5 Each" },

                   { id: 9, pid: 7, name: "Hip-Hop and R&B Sale" },

                   { id: 10, pid: 7, name: "CD Deals" },

                   { id: 11, name: "Categories", hasChild: true },

                   { id: 12, pid: 11, name: "Songs" },

                   { id: 13, pid: 11, name: "Bestselling Albums" },

                   { id: 14, pid: 11, name: "New Releases" },

                   { id: 15, pid: 11, name: "Bestselling Songs" },

                   { id: 16, name: "MP3 Albums", hasChild: true },

                   { id: 17, pid: 16, name: "Rock" },

                   { id: 18, pid: 16, name: "Gospel" },

                   { id: 19, pid: 16, name: "Latin Music" },

                   { id: 20, pid: 16, name: "Jazz" },

                   { id: 21, name: "More in Music", hasChild: true },

                   { id: 22, pid: 21, name: "Music Trade-In" },

                   { id: 23, pid: 21, name: "Redeem a Gift Card" },

                   { id: 24, pid: 21, name: "Band T-Shirts" },

                   { id: 25, pid: 21, name: "Mobile MVC" }];

        $(function () {

            $("#fullrowtree").ejTreeView({

                fullRowSelect: true,

                height:400, 

                fields: {

                    dataSource: localData, id: "id", parentId: "pid", text: "name",

                    hasChild: "hasChild", expanded: "expanded", selected: "selected"

                }

            });

          

         $('#fullrowtree>.e-ul').on('scroll', function (event) {

            if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {

            $('body').css("overflow",'hidden');

        }          

    });

        });

    </script>

</body>

</html>

Hope to hear you soon.

Thanks

[Piramanayagam Ramakrishnan]

Hi Satheesh Kumar,   

   

Thanks for your update.   

   

Query 2: When i try to collapse or expand any node bootstrap dropdown hides which you can check in the same example you provided.   

   

You can achieve your requirement in application level by preventing click event of dropdown popup. Please refer to the below code example.   

 

[Script] 

 

//To prevent closing the bootstrap drown popup. 

$("#demo").bind("click", function (e) { 

    //Prevent popup closing except TreeView text clicked 

    if (!$(e.target).hasClass('e-text')) { 

        e.stopPropagation(); 

    } 

}); 

 

 

For your reference, we have prepared a sample based on your requirement in the link: https://jsplayground.syncfusion.com/t45iqwpg 

 

Query 3: Though you hide the scroll i could not get body scroll when i move my mouse out and other contents of my body is not visible   

 

Sorry for the inconvenience. You can prevent parent scrolling, when TreeView scroll moves to end or start position by using mousewheel event. Please refer to the below code example.   

 

[Script] 

 

var tree = $('#fullrowtree>.e-ul'), 

height = tree.outerHeight(); 

tree.bind('mousewheel', function (e) { 

    var scrollHeight = e.currentTarget.scrollHeight; 

    var isWheelUp = (e.originalEvent.deltaY > 0) ? true : false; 

                 

    //prevent parent scrolling when TreeView scroll moves to end or start position 

    if ((scrollHeight > height) && ((this.scrollTop === (scrollHeight - height) && isWheelUp) || (this.scrollTop === 0 && !isWheelUp))) { 

        return false; 

    } 

});  

 

 

For your reference, we have modified above sample based on your requirement in the link: https://jsplayground.syncfusion.com/m5on3rd3 

 

Please let us know, if you have any further assistance on this. 

 

Regards, 

Piramanayagam R 

[Satheesh Kumar]

Hi

Thanks for the solution. Sorry for late reply as i was busy for a week.

The scrolling is not working properly in IE whereas it works in firefox and chrome.

I will try to implement the other bootstrap issue and hope it solves my problem.

Thanks again.

[Piramanayagam Ramakrishnan]

Hi Satheesh Kumar, 

 

Sorry for the inconvenience. 

 

We have resolved the scrolling issue of IE browser in application level. Please refer to the below code example. 

 

[Script] 

 

var tree = $('#fullrowtree>.e-ul'), 

height = tree.outerHeight(); 

tree.bind('mousewheel DOMMouseScroll', function (e) { 

    var scrollHeight = e.currentTarget.scrollHeight, isWheelUp; 

    if (e.type == 'mousewheel') { 

        isWheelUp = (e.originalEvent.wheelDelta > 0) ? true : false; 

    } 

    else if (e.type == 'DOMMouseScroll') { 

        isWheelUp = (e.originalEvent.detail < 0) ? true : false; 

    } 

                 

    //prevent parent scrolling when TreeView scroll moves to end or start position 

    if ((scrollHeight > height) && ((this.scrollTop === (scrollHeight - height) && !isWheelUp) || (this.scrollTop === 0 && isWheelUp))) { 

        return false; 

    } 

}); 

 

 

For your reference, we have modified the sample in the link 

https://jsplayground.syncfusion.com/2uwou4az 

 

Please let us know, if you have any further assistance on this.  

 

Regards, 

Piramanayagam R 

[Satheesh Kumar]

Hi

Thanks for the update. Scrolling works in IE but i am sorry to say that the background scroll issue still exist( i scroll treeview to end and scroll again the body scrolls at background. How to prevent scrolling of background once i reach the end of treeview.)

The issue exist in the above sample itself(https://jsplayground.syncfusion.com/2uwou4az) when opened in IE 11.

Thanks for your support.

[Piramanayagam Ramakrishnan]

Hi Satheesh Kumar, 

 

We were unable to reproduce the reported issue at our end. We have ensured the provided sample with IE11 browser. The sample is working properly as you expect (If we scroll treeview to end and scroll again the body should not scrolls at background). 

 

For your reference, we have attached the video in the below link: Video 

 

Please provide your OS version. This would be more helpful for us to provide an exact solution.  

 

Regards, 

Piramanayagam R