1. Home
  2. Forum
  3. WPF
  4. Horizontal scrollbar

Horizontal scrollbar

Hi,

is it possible to hide the horizontal scrooll bar ?



Best regards
Gian Piero Truccolo

12 Replies 1 reply marked as answer
SS Sridevi Sivakumar Syncfusion Team March 23, 2021 01:09 PM UTC

Hi Gian Piero Truccolo,

Greetings from Syncfusion.

We can hide the horizontal scrollbar by disabling the scrollbar visibility in Gantt Loaded event as per the below code snippet.

[XAML]: : 
 <sync:GanttControl x:Name="Gantt"  Loaded="Gantt_Loaded" 
                               ItemsSource="{Binding TaskCollection}" 
                               UseAutoUpdateHierarchy="False" 
                                VisualStyle="Metro"> 
 ... 
        </sync:GanttControl> 

[C#]: 
        private void Gantt_Loaded(object sender, RoutedEventArgs e) 
        { 
            //To make the horizontal scrollbar visibility as collapsed. 
            FieldInfo fieldInfo = Gantt.GetType().GetField("ScheduleViewScrollViewer",BindingFlags.NonPublic | BindingFlags.Instance); 
            if (fieldInfo != null) 
            { 
                ScrollViewer scroller = fieldInfo.GetValue(Gantt) as ScrollViewer; 
                if (scroller != null) 
                { 
                  scroller.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; 
                } 
            } 
        } 

And if you like to hide the additional cells rendered in the Gantt schedule left and right. You can remove the empty space in left and right side by using the below solutions.

Solution 1:
Specify the schedule range, by using StartTime and EndTime properties. You can specify the schedule range as per the below code snippet.

[XAML]:  
<gantt:GanttControl x:Name="Gantt" 
                    ScheduleType="YearWithMonths" 
                    StartTime="3/6/2019" 
                    EndTime="10/7/2019" 
                    ItemsSource="{Binding TaskDetails}" 
                    VisualStyle="Metro"> 
</gantt:GanttControl> 

Solution 2:
GanttControl have support to specify the schedule range padding. By using ScheduleRangePadding property you can specify the padding for gantt chart. Please find the code snippet as per below

[XAML]:  
<gantt:GanttControl x:Name="Gantt" 
                    ScheduleType="YearWithMonths" 
                    ScheduleRangePadding="1" 
                    ItemsSource="{Binding TaskDetails}" 
                    VisualStyle="Metro"> 
</gantt:GanttControl> 

Let us know if you need any further assistance.

Regards,
Sridevi S. 


Marked as answer
GI Gian March 24, 2021 08:00 AM UTC

Hi,

thanks it works.

So now i need to enable the horizontal grey scroll bar and delete the white space that i have on left on the gantt chart, so that the gantt fill the available space and i can scroll with that scroll bar.



Best regards
Gian Piero Truccolo


SS Sridevi Sivakumar Syncfusion Team March 25, 2021 02:25 PM UTC

Hi Gian Piero Truccolo,

Need to enable the horizontal grey scroll bar :

We have checked your shared image, a scrollbar will show when the node goes out of the view.

We have suspected that the node's right side is not visible, due to EndTime value set. You have to increase your Gantt EndTime property to solve this problem.

Delete the white space that I have on the left of the gantt chart:

Suspect 1: Are expecting to remove left side space

We have checked the reported query, if you want to remove the white space on the left side of the Gantt chart, you have to set the expected date (which date the chart will be started) to the Gantt StartTime. So, Gantt chart renders from mentioned date.


Suspect 2: Are expecting to remove right side whitespace

We don't have direct support to remove the right side space of the GanttChart, we can remove this space by setting the ChartWidth property or ZoomFactor property. 

Please check the above solutions and let us know whether your requirements has been achieved.

Regards,
Sridevi S. 
 


GI Gian March 26, 2021 01:30 PM UTC

Hi,

the Suspect 2: Are expecting to remove right side whitespace is what we want to achieve.

We have just integrated the zoom factor with the slider, how we should modify that to achieve the goal.

I have also tried  to set the endtime but the scroll bar did not work, i disablethe horizontal scrollbar, the scrolla bar you see reagrding gantt chart.

 var sv2 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(GanttChart, 0), 0) as ScrollViewer;

sv2.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto;

 sv2.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;


Best regards

Gian Piero Truccolo


VR Vignesh Ramesh Syncfusion Team March 29, 2021 01:28 PM UTC

Hi Gian Piero Truccolo, 

Thanks for your update. 

We have checked the reported problem by creating the simple sample as like you have provided in screen shot. We are not able to reproduce the reported right side white space problem in Gantt Chart. Can you please check with the sample in the following location? 

Output 

 

If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to give better solution in this. 

Also, we have added slider in application level and bind it with Gantt control’s ZoomFactor property. It is also working fine as expected and the GantChart’s horizontal scrollbar got visible/disable automatically when increase/decrease the zoom factor slider. 


Please refer the below user guide link for more information about zooming support in Gantt control 

Let us know if you have any queries. 

Regards, 
Vignesh Ramesh.

GI Gian March 29, 2021 02:01 PM UTC

Hi,

i have some error with your project so i attached my simple project with the white space.

Best regards
Gian Piero Truccolo

Attachment: TestProject_88f73b98.zip

MK Muneesh Kumar G Syncfusion Team March 31, 2021 11:43 AM UTC

Hi Gian Piero Truccolo, 

Thanks for your update. 

We can reproduce the reported problem and confirmed “GanttSchedule not get stretched to full available space when control size changed dynamically” as an issue and the fix will be included in our next weekly NuGet which is expected to be rolled out on 6th Apr 2021. We appreciate your patience until then.  

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 
Thanks, 
Muneesh Kumar G 


VR Vignesh Ramesh Syncfusion Team April 6, 2021 04:21 PM UTC

Hi Gian Piero Truccolo,

Sorry for the inconvenience caused.

Due to some technical problem, the reported issue fix is not moved in our 19.1.0.55 weekly NuGet release.

So, we have prepared patch for the issue, please find it below 

Please find the patch setup from the below location.  

or  

Please find the patch assemblies from the below location.  

or 

Please find the NuGet from the below location.  

Version: 19.1.0.54 

Disclaimer:  
  
Please note that we have created this patch for version 19.1.0.54 specifically to resolve the issue reported in the forum 163751. If you have received other patches for the same version for other products, please apply all patches in the order received.

Also, the fix will be included in our next weekly NuGet release, which is expected to be rolled out on next Tuesday (13th April 2021). We appreciate your patience until then. 

Regards, 
Vignesh Ramesh.

GI Gian April 13, 2021 01:50 PM UTC

Hi, 

i have tried 19.1.0.56 and i see that the the white space is disappeared but the horizontal scrooll viever is still inactive also if the activities go over. the visible space

I attached a sample for you.

Best regards
Gian Piero Truccolo

Attachment: TestProject_7132bcb2.zip

VR Vignesh Ramesh Syncfusion Team April 15, 2021 02:19 PM UTC

Hi Gian Piero Truccolo, 

Thanks for your confirmation. 

We have analyzed your query and would like to convey that, according to our GanttControl’s architecture, GanttSchedule and GanttChart are both the children of ScheduleViewScrollViewer and have the same Width. So, it is not possible to scroll the GanttSchedule horizontally using the GanttChart’s ScrollViewer. 

So, you must use the ScheduleViewScrollViewer’s Horizontal scrollbar to scroll the GanttSchedule and GanttChart horizontally and use GanttChart’s Vertical scrollbar to scroll the GanttChart vertically. 

Please find the snippet below 

private void Gantt_Loaded(object sender, RoutedEventArgs e) 
{ 
    GanttChart GanttChart = Gantt.FindElementOfType<GanttChart>(); 
 
    //I WANT TO USE THIS SCROLLER 
    sv2 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(GanttChart, 0), 0) as ScrollViewer; 
    sv2.VerticalScrollBarVisibility = ScrollBarVisibility.Visible; 
} 


Output: 
 

Please find the modified sample from the below link 

Regards, 
Vignesh Ramesh. 


GI Gian April 15, 2021 03:19 PM UTC

Hi,

i understand.

Is it possible to have the same template for vertical and horizontal bar.
As you can see one is blue and the other one is grey.



The last query regarding  the arrows circled in red.
Is it possible to click them and go over the gantt i both direction right and left?

Best regards
Gian Piero Truccolo

SS Sridevi Sivakumar Syncfusion Team April 16, 2021 01:59 PM UTC

Hi Gian Piero Truccolo,

Thanks for your update.

Query 1: Is it possible to have the same template for vertical and horizontal bar. 
As you can see one is blue and the other one is grey.

We have achieved this query by removing the style for ScheduleViewScrollViewer as like below snippet 
  
private void Gantt_Loaded(object sender, RoutedEventArgs e) 
{ 
    … 
    FieldInfo fieldInfo = Gantt.GetType().GetField("ScheduleViewScrollViewer", BindingFlags.NonPublic | BindingFlags.Instance); 
    if (fieldInfo != null) 
    { 
        scroller = fieldInfo.GetValue(Gantt) as ScrollViewer; 
        if (scroller != null) 
        { 
            scroller.Style = null; 
        } 
    } 
} 
  
Output: 


Query 2: It possible to click them and go over the Gantt I both directions right and left? 
Yes, we can be able to scroll the Gantt in all directions using horizontal and vertical scrollbar buttons also we have ensured this. Please find the tested video link from below for your reference.
https://www.syncfusion.com/downloads/support/forum/163751/ze/GanttScrolling1551027209

Please find the modified sample from the below link.
https://www.syncfusion.com/downloads/support/forum/163751/ze/TestProject969325937 
Please let us know if you have any queries.
  
Regards, 
Sridevi S. 
 


Loader.
Up arrow icon