This is a migrated thread and some comments may be shown as answers.

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

4 Answers 26 Views
PageLayout
This is a migrated thread and some comments may be shown as answers.
Dana Cobb
Top achievements
Rank 1
Dana Cobb asked on 15 Aug 2014, 01:41 AM
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

4 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 15 Aug 2014, 02:27 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Dana Cobb
Top achievements
Rank 1
answered on 15 Aug 2014, 04:59 PM
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
0
Dana Cobb
Top achievements
Rank 1
answered on 15 Aug 2014, 06:45 PM
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
0
Ivan Zhekov
Telerik team
answered on 20 Aug 2014, 12:19 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
PageLayout
Asked by
Dana Cobb
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Dana Cobb
Top achievements
Rank 1
Share this question
or