1. Home
  2. Forum
  3. WPF
  4. How to link two SfGridSplitter controls so that they always keep their distance?

How to link two SfGridSplitter controls so that they always keep their distance?

Hello Syncfusion Support Team,

I have to realize a window with three grid rows. The top and the bottom one present dynamic content. The middle one offers a time line for the other ones. The content grid rows have to be resizable (height). This is why I enhance the window to five grid rows (0-4) and implement SfGridSplitter controls in rows 1 and 3 i.e. between the time line and the content. See attached project. The challenge is to keep the time line's height constant.

As the content is dynamic I use Height="*" for row definitions of rows 0 and 4. Thus, the time line is resized on each movement of any SfGridSplitter. If I use fix definition (Height="200") the situation changes. If row 0 gets a fix height the time line keeps its height if using SfGridSplitter in row 1 but is resized if using SfGridSplitter in row 3. If row 4 gets a fix height there is a strange behavior. The SfGridSplitter in row 1 resizes the time line. The previewed movement of the SfGridSplitter in row 3 is not carried out on that SfGridSplitter. Instead, SfGridSplitter in row 1 is moved (in the opposite direction) which again resizes the time line. If both rows 0 and 4 get a fix height the behavior seems to be the same as if only row 0 gets a fix height.

So, so far, I couldn't find a way to keep the SfGridSplitter distance resp. the time line height no matter which SfGridSplitter is moved. I have already made some investigations towards correction of the time line height after completion of SfGridSplitter movement but I haven't found a suitable event which clearly defines the end of the movement. The attempt to correct the height in a handler of the DragCompleted event failed because the effect of the movement is applied only after DragCompleted which destroys the correction.

Please show me a way to realize my requirement. Don't hasitate to ask if something is unclear or to present alternative approaches.

Best regards,
Benedikt

Attachment: WpfApp1_600718fb.zip

7 Replies 1 reply marked as answer
VR Vijayalakshmi Roopkumar Syncfusion Team August 24, 2020 02:27 PM UTC

Hi Benedikt, 
 
Thank you for contacting Syncfusion support. 

Query :How to link two SfGridSplitter controls so that they always keep their distance?

 
We have checked the reported requirement with GridSplitter and could understood that you want to main the some fixed portion of distance between each SfGridSplitter. However for this , you can use the MinHeight property for Grid or you can set for SfGridSplitter.  
 
Code: 
 
 
  <Grid.RowDefinitions> 
            <RowDefinition Height="*" MinHeight="200"/><!-- resp. Height="200" --> 
            <RowDefinition Height="auto"/> 
            <RowDefinition Height="60" x:Name="FixRow" MinHeight="200"/> 
            <RowDefinition Height="auto"/> 
            <RowDefinition Height="*"/><!-- resp. Height="200" --> 
        </Grid.RowDefinitions> 
 
 
 
Screenshot: 
 
BA Benedikt Adamitzki August 24, 2020 02:54 PM UTC

Hi Vijayalakshmi,

thank you for your response. Unfortunatelly, it doesn't provide a solution for my problem. I know the MaxHeight and MinHeight attributes. But setting the MinHeight of row 2, as you suggest, only defines the lower limit of height. There is no upper limit definition so that the row 2 (time line) still can be resized as its height can be increased. Now, we can fix this by defining the MaxHeight i.e. by giving Height, MinHeight and MaxHeight the same value. But what happens as result? Indeed, the height of row 2 is fix now. But none of the SfGridSplitter controls in rows 1 and 3 works anymore. Thus, neither row 0 nor row 4 can be resized but this is what is requested. I can hardly believe that it's a feature.

Please check the described behavior.

Best regards,
Benedikt

VR Vijayalakshmi Roopkumar Syncfusion Team August 25, 2020 02:06 PM UTC

Hi Bendikt 
 
Thank you for your update. 
 
We could understood that your control between two splitter should be unmovable for this. for this, you can set the MinHeight and MaxHeight for the Fixed row grid. Please find the code for the same 
 
Code:[XAML] 
 
 
<Grid.RowDefinitions> 
<RowDefinition Height="*"/><!-- resp. Height="200" --> 
<RowDefinition Height="auto"/> 
<RowDefinition Height="60" x:Name="FixRow" MinHeight="200" MaxHeight="200"/> 
<RowDefinition Height="auto"/> 
<RowDefinition Height="*"/><!-- resp. Height="200" --> 
</Grid.RowDefinitions> 
 
 
 
 
 
 
Please try this solution and let us know if it is helpful. 
 
Regards, 
Vijayalakshmi VR 


BA Benedikt Adamitzki August 25, 2020 03:07 PM UTC

Hi Vijayalakshmi,

sorry but you seem to have misunderstood my last post. Being unmovable is my objection to a possible solution. I don't want the time line (row 2) to be unmovable. I only want it to be unresizable (in height). I do want that it moves as soon as one of the SfGridSplitters moves. If a SfGridSplitter is drawn away from the time line, the time line should follow. If a SfGridSplitter is drawn so that it would compress the time line, the time line should escape from it. But the time line should never change its height.

Your suggestion to use MaxHeight and MinHeight solves one necessary thing but inhibits another necessary thing. It gives a fixed height of the time line but at the same time it disables the SfGridSplitter controls. The grid splitters loose their necessary function. My initial question was already how to link the two grid splitters during their movement.

I'm asking how to achieve such a link (either in design i.e. using configuration or in code i.e. reacting to events). See a visualization of my requirements in the attached file.

Best regards,
Benedikt

Attachment: requirements_9a9b8254.zip

VR Vijayalakshmi Roopkumar Syncfusion Team August 27, 2020 02:25 AM UTC

Hi Benedikt,

Thank you for your update.

We have checked your requirement regarding sfgridsplitter and understood that you want to resize the 2nd splitter on resizing the first splitter, but the content size, between the splitter should be remain constant. If it is your requirement, we are currently checking for the solution to achieve this and will update you the details by 28th Aug, 2020.

Regards,
Vijayalakshmi VR

BA Benedikt Adamitzki August 27, 2020 06:31 AM UTC

Hi Vijayalakshmi,

your reported understanding seems to be correct now. I'd only want to point out that the opposite direction (1st splitter reacts on resizing of 2nd splitter) is a requirement as well. I have to do it because I have already seen one direction working the other one not. Half a solution wouldn't be the solution.

Best regards,
Benedikt

VR Vijayalakshmi Roopkumar Syncfusion Team September 1, 2020 03:04 AM UTC

Hi Benedikt, 
 
Thank you for your patience 
 
We have tried to achieve your requirement, but in our SfGridSplitter, we could able to make the second SfGridSplitter to move up and down, along with first SfGridSplitter, but it is not possible to make it for the same with second SfGridSplitter.  
 
Code for the same:[XAML] 
 
 
<Grid> 
<Grid.RowDefinitions> 
<RowDefinition /> 
<RowDefinition Height="auto" /> 
<RowDefinition /> 
</Grid.RowDefinitions> 
<GroupBox Grid.Row="0" /> 
<syncfusion:SfGridSplitter 
Grid.Row="1" 
Height="15" 
HorizontalAlignment="Stretch" /> 
<Grid Grid.Row="2"> 
<Grid.RowDefinitions> 
<RowDefinition /> 
<RowDefinition Height="auto" /> 
<RowDefinition /> 
</Grid.RowDefinitions> 
<GroupBox Grid.Row="0" /> 
<syncfusion:SfGridSplitter 
Grid.Row="1" 
Height="15" 
HorizontalAlignment="Stretch" /> 
<GroupBox Grid.Row="2" /> 
 
</Grid> 
</Grid> 
 
Please try this code, however in meanwhile we will check the possibility to achieve the same with second SfGridSplitter and provide you the solution accordingly. 
 
Regards, 
Vijayalakshmi VR 


Marked as answer
Loader.
Up arrow icon