Treegrid with top scroll bar

[David Price]

Hello,

Is it possible to add a top scroll bar to the Treegrid 

if so can you share an example ?

[Bharath Marimuthu]

Hi David, 

Thank you for contacting Syncfusion support 

We have analyzed your requirement and screenshot. In TreeGrid there is no support to render the scrollbar on top of the TreeGrid component, but we can achieve your requirement with some work around. Please refer the below code snippet 

<div id="customScrollbar" style="overflow-x:scroll;" onscroll="scollPosition(event);"> 

        <div id="customDivScrollbar" style="height:1px;"></div> 

    </div> 

    <div id="TreeGridContainer" style="height:400px;width:60%"></div> 

<script type="text/javascript"> 

 

        $(function () { 

           $("#TreeGridContainer").ejTreeGrid({ 

                dataSource: sampleData, 

             create: function (args) { 

var proxy = this; 

                    if ($("#"+proxy._id).find(".e-hscrollbar").length) { 

                        var width = $("#"+proxy._id).width(); 

                        $("#customDivScrollbar").css("width", $("#"+proxy._id+"e-table").width() +20); 

                        $("#customScrollbar").css("width", width); 

                    } 

                    else { 

                        $("#customScrollbar").hide(); 

                        $("#customDivScrollbar").hide(); 

                    } 

                }, 

                columnResized:function(args){ 

                     

                    setTimeout(function () { 

                        if ($("#" + proxy._id).find(".e-hscrollbar").find(".e-hscroll").length) { 

                            $("#customScrollbar").show(); 

                            $("#customDivScrollbar").show(); 

                            $("#customDivScrollbar").css("width", $("#" + proxy._id + "e-table").width() + 20); 

                        } 

                        else { 

                            $("#customScrollbar").hide(); 

                            $("#customDivScrollbar").hide(); 

                        } 

 

                    }, 50); 

                //.. 

                }); 

     }); 

function scollPosition(e) { 

           var treeObj = $("#TreeGridContainer").data("ejTreeGrid"); 

           var scrollObj = treeObj.getScrollElement().data("ejScroller"); 

            scrollObj.option("scrollLeft", $(e.target).scrollLeft()) 

           } 

  $(window).on('resize', function () { 

           setTimeout(function () { 

            if ($("#TreeGridContainer").find(".e-hscrollbar").length) { 

                var width = $("#TreeGridContainer").width(); 

                $("#customScrollbar").show(); 

                $("#customDivScrollbar").show(); 

                $("#customDivScrollbar").css("width", $("#TreeGridContainere-table").width() + 20); 

                $("#customScrollbar").css("width", width); 

            } 

            else { 

                $("#customScrollbar").hide(); 

                $("#customDivScrollbar").hide(); 

            } 

           }, 50); 

        }); 

    </script> 

We have prepared the sample for your reference, please find the sample link below 

Link: https://jsplayground.syncfusion.com/hdw40hxd 

But there are some limitations with this work around solution with column hide/show actions using the column menu in Treegrid. Can you please let us know whether the provided solution satisfies your requirement, also please let us know the features you will be using in your application, it will be helpful for us to provide the better solution.  

Please let us know if you require further assistance on this. 

Regards, 

Bharath. 

[David Price]

Hi,

The scrolling isn't working for me. based on your example?

I have submitted your example but it seems that the top scroll doesn't work for treegrid ?

Attachment: Test2_ce8db67d.7z

[John Rajaram]

Hi David, 

In our previous update we have prepared the sample in JavaScript platform and now we have prepared the sample for rendering the scrollbar on top of the TreeGrid in ASP.NET platform. In ASP.Net platform we need to declare the client side events inside the (<ej:TreeGrid> </ej:TreeGrid>) tag. Please refer the below code snippet 

[ASPX] 

<ej:TreeGrid runat="server" ID="TreeGridControlDefault"  ColumnResized="ColumnResized" 

Create="create"> 

//.. 

</ej:TreeGrid> 

 

<script type="text/javascript"> 

 

                         function create(args) { 

                             

                             var proxy = this; 

                             if ($("#" + proxy._id).find(".e-hscrollbar").length) { 

                                 var width = $("#" + proxy._id).width(); 

                                 $("#customDivScrollbar").css("width", $("#" + proxy._id + "e-table").width() + 20); 

                                 $("#customScrollbar").css("width", width); 

                             } 

                             else { 

                                 $("#customScrollbar").hide(); 

                                 $("#customDivScrollbar").hide(); 

                             } 

                         } 

                         function ColumnResized(args) { 

                             

                             var proxy = this; 

                             setTimeout(function () { 

                                 if ($("#" + proxy._id).find(".e-hscrollbar").find(".e-hscroll").length) { 

                                     $("#customScrollbar").show(); 

                                     $("#customDivScrollbar").show(); 

                                     $("#customDivScrollbar").css("width", $("#" + proxy._id + "e-table").width() + 20); 

                                 } 

                                 else { 

                                     $("#customScrollbar").hide(); 

                                     $("#customDivScrollbar").hide(); 

                                 } 

 

                             }, 50); 

                         } 

        function scollPos(e) { 

                             var treeObj = $("#TreeGridControlDefault").data("ejTreeGrid"); 

                             var scrollObj = treeObj.getScrollElement().data("ejScroller"); 

                             scrollObj.option("scrollLeft", $(e.target).scrollLeft()) 

                         } 

                         $(window).on('resize', function () { 

                             setTimeout(function () { 

                                 var treeObj = $("#TreeGridControlDefault").data("ejTreeGrid"); 

                                 if ($("#TreeGridControlDefault").find(".e-hscrollbar").length) { 

                                     var width = $("#TreeGridControlDefault").width(); 

                                     $("#customScrollbar").show(); 

                                     $("#customDivScrollbar").show(); 

                                     $("#customDivScrollbar").css("width", $("#" + treeObj._id + "e-table").width() + 20); 

                                     $("#customScrollbar").css("width", width); 

                                 } 

                                 else { 

                                     $("#customScrollbar").hide(); 

                                     $("#customDivScrollbar").hide(); 

                                 } 

                             }, 50); 

                         }); 

             

 

 

                     </script> 

We have prepared the sample for your reference please find the updated sample link below 

Link: http://www.syncfusion.com/downloads/support/forum/138828/ze/Scrollbar-744138500 

Please let us know if you require further assistance on this. 

Regards, 

John R