[Solved] Grid Layout issues with browser re-size

[Binu]

I have a grid inside a Tab strip control, when I re-size the browser, tabstrip shrinks correctly, but grid does not !
I introduced .Scrollable(), this helps with the issue but now I have a new issue, in the grid header column height increases and border does not extend down to touch the baseline! (I am using Windows 7 theme)

Any help appreciated :)

[Atanas Korchev]

Hi Binu,

 We need more details about your case. Could you provide a sample project? Just attach it to this forum thread.

Regards,
Atanas Korchev
the Telerik team

[Binu]

I will try to extract this to a sample project. Meanwhile to give you an idea what I am talking about, I am attaching screenshots, Screenshot 1 is grid that is rendered well inside a tab, screenshot2 shows when browser is manually re-sized, layout fails to re-paint well.

Thanks for your support.
-Binu

[Atanas Korchev]

Hi Binu,

 This is not a failed repaint - just the total width of the columns (set via the Width property) is bigger than the available space. You can either enable scrolling or try different column widths. I don't know what the expected behavior is otherwise.

Kind regards,
Atanas Korchev
the Telerik team

[Binu]

Yes, you are right. This does not happen always, only when we have a long value without any breaks within in one of our columns (this was a fail test case )
ex: ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

When scrollable is enabled, columns behave differenlty, and also as i mentioned in my original post it does create an issue with the header styling !

Any suggestions? 

Thanks!

[Atanas Korchev]

Hi Binu,

 I will need a sample project showing those issues in order to assist you further. Please attach one to this thread and also specify the browser which you are using and the steps required to reproduce the issue. 

Regards,
Atanas Korchev
the Telerik team

[Binu]

I was able to re-produce this issue with the Telerik.Mvc sample project. 
1. Update your norhwind customer table to make contactname table a nvarchar(200)
2. Update the Contact Name (I picked Customer ID: VINET) to a long name without space breaks, ex: PaulHenriotPaulHenriotPaulPaulHenriotPaulHenriotPaulPaulHenriotPaulHenriotPaulPaulHenriotPaulHenriotPaulPaulHenriotPaulHenriotPaulPaulHenriotPaulHenriotPaul
3. Run the Telerik MVC sample project
4. Load Grid > FirstLook, turn OFF scrollable 
5. Re-size the browser manually to shrink the width, you will see the issue

I am also attaching a screenshot.

Hope this helps to understand the issue.

Thanks
Binu

[Atanas Korchev]

Hello Binu,

 I now understand the issue. Please let me know what the expected behavior is in your case. I would recommend scrolling for such cases but you said you have a problem with that. Could you elaborate on the scrolling problem?

Regards,
Atanas Korchev
the Telerik team

[Binu]

Expected behavior would be grid adjusting its layout depending on browser re-size, or not trying re-size at all so that it won't mess up the styling.

I am attaching a screenshot with scrollable, Windows 7 theme. Tested with FF 3.6 and IE 7.0

On a different note, 
How can I create a component on client side with out doing a round trip to server?

For example add a new combobox to an existing panel content or adding a new panel to a panel bar, can we do this just from the JavaScript client layer?

Thanks for your support

[Alex Gyoshev]

Hi Binu,

Regarding your second question, creating components on the client-side is not yet possible (apart from the calendars and windows). We have this feature logged and will consider doing it after the Q3 release.

Regarding the overflow issue, we'll research a bit more and post our findings tomorrow -- thanks for the patience.

Kind regards,
Alex Gyoshev
the Telerik team

[Binu]

Thank you. Will look for your reply.

[Alex Gyoshev]

Hi Binu,

Please take a look at the attached solution. It uses the CSS "white-space: nowrap" property in order to prevent the lines from wrapping, and has enabled scrolling in order to fix the problem with long lines.

Hope this helps,
Alex Gyoshev
the Telerik team

[Binu]

This worked very well. It did introduced some additional bottom margin to my grid header, I had to override it like this:

div.t-grid-header-wrap table{

margin : 0; 

}

Thanks for your support. 
-Binu