Are current active breakpoints available as a read-only property?

[Dana Cobb]

Scenario:
Everything working great by dynamically generating columns and dynamically placing controls/content within them. So far... excellent!
So say i have a LayoutRow with 1 column span=12 and underneath that i have another LayouRow with 3 columns each with span=4.
In the column in the first row is a wide header graphic.
When i resize to a mobile device, my 3 columns in row 2 stack upon each other quite nicely,but obviously row 1 with the wide header graphic forces the horizontal scrollbars.

Question:
When the viewport/browser is at a given size/breakpoint, let's say 360px (xs).... Is there any object(RadPageLayout, LayoutRow, LayoutColumn) that knows which breakpoint is being applied? Is it xs? sm? md? lg? or xl?. Can i "read" that property from any of the controls .. like If myLayoutColumn.SpanXs = True or myLayoutColumn.breakpoint = ?

Goal:
I want to be able to read the breakpoint from the Rad control and then correspondingly and programmatically insert a smaller graphic into row 1 so that the 360px will take up 100% of the screen with no horizontal scrollbars.

Thanks  in advance,

Dana

[Ivan Zhekov]

Hello, Dana.

RadPageLayout is a server only control and it does not have any idea about the client side, which happens to be the domain of responsive layout.

You can do one of two things:

1) create styles for images like the following and apply the class name to the images you need.

.t-container .t-img {max-width: 100%}

2) Use the DeviceDetectionFramework (http://www.telerik.com/products/aspnet-ajax/device-detection-framework.aspx) to guess the viewport size.

My advice is to use the first approach as it requires least of work and is guaranteed to work.

Regards,
Ivan Zhekov
Telerik

 

 

[Dana Cobb]

Finally located the help pages of how to implement the Device Detection Framework. It is really hard to find (just a suggestion).
Thanks once again for your excellent response. I had already begun working with max-width: 100% this morning, so I can def see where that comes in.
Question: Can the RadPageLayout and the Device Detection Framework be used together at the same time? Since the forms I am working with are completely dynamically generated (I mean completely, as in the RadPageLayout control is the only control on the page in design mode!), they are extremely complex. There are times that i want fluid layout, but I also want to know which device I am rendering for .... since I might render a completely different section of code based on the device.

Thanks as always,

Dana

[Dana Cobb]

I tried to implement the Device Detection Framework by registering the dll in the bin folder and placing the Imports Telerik.Web.Device.Detection at the top of the .vb page.

Dim screenDimensions As DeviceScreenDimensions = Detector.GetScreenDimensions(Request.UserAgent)
        Me.msg.Text = "Screen dimensions for " & Request.UserAgent & " are: " & screenDimensions.Width & "px X " & screenDimensions.Height & "px!"

 
Above was my attempt at testing. I viewed it on the different pcs and a Galaxy S3 and i got 0(zero)px for every test! Am i missing something?

Dana

[Ivan Zhekov]

Hello, Dana.

The detection framework is based on assumptions e.g. we sniff the agent and if it is this agent, we assume you are on a this device.

We have a database with common device user agents and Galaxy S3 is within those. It's quite unusual that you get 0 value.

As for desktop, that's actually expected, since it's literally impossible from the server to be able to know the dimensions of the browser. Not to mention, on desktop users are able to resize the browsers.

And on your other question: can the PageLayout / Detection framework be used in conjunction? Definitely yes. In fact you can use them to completely stop certain portions from rendering based on the various visible attributes.

Regards,
Ivan Zhekov
Telerik