I'm working on a project where I have 2 horizontal panes. The left side is a tree view and the right side is the content view (Think windows explorer). Is it possible to have a content layout (grid) in that right pane that will resize based on the size of the splitter pane? Right now I can't seem to get controls to stack properly when the pane is resized. This isn't a kendo issue exactly, but I'm hoping someone else has worked through this. My left pane is going to start with a fixed size and the right pane takes the remainder of the viewport.
3 Answers, 1 is accepted
0
Hello Mike,
I have prepared the following Dojo example, where a similar scenario like the one described is demonstrated.
You will notice that the above example does not use any of the bootstrap classes like col-*-* to achieve the desired effect. Is this the behavior that you are expecting on your end?
In addition to the above, please keep in mind that Kendo UI uses content-box box model, whereas Bootstrap uses border-box. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout. You can find more information and a workaround in the following article:
In case the above example differs from what you are trying to achieve, may I ask you to modify it so that it reproduces the issue faced and send it back to us for a review? This way I will be able to troubleshoot the cause of the problem and provide you with further assistance.
I am looking forward to your reply.
Regards,
Dimitar
Progress Telerik
I have prepared the following Dojo example, where a similar scenario like the one described is demonstrated.
You will notice that the above example does not use any of the bootstrap classes like col-*-* to achieve the desired effect. Is this the behavior that you are expecting on your end?
In addition to the above, please keep in mind that Kendo UI uses content-box box model, whereas Bootstrap uses border-box. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout. You can find more information and a workaround in the following article:
In case the above example differs from what you are trying to achieve, may I ask you to modify it so that it reproduces the issue faced and send it back to us for a review? This way I will be able to troubleshoot the cause of the problem and provide you with further assistance.
I am looking forward to your reply.
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Mike
Top achievements
Rank 1
Rank 1
answered on 20 Jun 2017, 11:30 AM
Thanks for the response. That's not what I have right now. I'll have to update it when I'm off work.
Basically what I need is where you have the grid in the right pane to be a bootstrap container to work with existing ui work.
I may scrap the idea of using the splitter if there is no easy way to do this and just not allow the user to resize the treeview area.
0
Hello Mike,
I have modified the Dojo example which now uses the bootstrap container-fluid class to take 100% of the right pane. In addition to this, I have applied the fix suggestion in the Boostrap integration article for the box-sizing property, which makes the grid columns to stack correctly.
Can you please verify if this is the behavior that you are expecting on your end?
If this is not the case, may I ask you to modify the Dojo sample and send it back to us for a review along with additional clarifications and guidelines to what exactly are you trying to achieve. This way I will be able to investigate the issue further and provide you with a viable suggestion.
Regards,
Dimitar
Progress Telerik
I have modified the Dojo example which now uses the bootstrap container-fluid class to take 100% of the right pane. In addition to this, I have applied the fix suggestion in the Boostrap integration article for the box-sizing property, which makes the grid columns to stack correctly.
Can you please verify if this is the behavior that you are expecting on your end?
If this is not the case, may I ask you to modify the Dojo sample and send it back to us for a review along with additional clarifications and guidelines to what exactly are you trying to achieve. This way I will be able to investigate the issue further and provide you with a viable suggestion.
Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.