How can I detect which Span setting is being used?

[Dana Cobb]

Can I get information from the page layout system that will tell me which span (i.e. SpanXl, SpanLg, SpanMd, SpanSm, or SpanXs) is in effect at any given browser size or device size?
I want to be able to say:
If SpanInEffect = "SpanMd" Then
   -Do this
ElseIf SpanInEffect = "SpanXs" Then
Do something different
End If

I am really hoping this is available, because I want to dynamically change which .css class I am applying to the Column based on the "Span in Effect" at a given time. Currently the columns are reacting responsively, but I want to be able, for example, when viewing in SpanXs mode, to make the font smaller, by applying a different class.

thanks,
got my fingers crossed!

[Ivan Zhekov]

Hello, Dana.

You can do this one of two ways:

* either use media queries with the same or similar breakpoints
* or use window matchmedia (https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia)

But here is the thing -- match media does not work in IE9, where as the mediaqueries will.

That said, there is no way you can do this on the server or atleast not in a way that will otherwise involve some client side snooping.

Do you need things just for SpanXS or you would like a more broad generic example covering all breakpoints?

Regards,
Ivan Zhekov
Telerik

 

 

[Dana Cobb]

i would like to cover all the breakpoints, but the project that i am converting to use the pagelayout system currently uses 3 media queries. I have tried to maintain more than that before and it is a task of diminishing returns. My project dynamically generates all controls, it is a specialty of mine. so i have database columns for each breakpoint i.e. SpanXl, to Span Xs. so my goal is to be able to dynamically be able to change some of the cssclass properties when rendering the <div> tags. I looked into jQuery sniffing the classes, but the Page LifeCycle  does not allow me to grab the jQuery value before rendering the page.
So I have already looked throught the webresource css and found your breakpoints and am in the process of adding classes that can tweak the trouble spots. In theory i can set the Span?? property and then after the columns are created, I could read those values and dynamically assign different classes (which are in my custom sheet) and let the media queries handle the  slight changes required in the classes for different devices.
I took a look at the window.matchmedia code. looks promising. i haven't looked too deep yet, is that code javascript or C# ?

Thanks for getting back to me,
this project is on a deadline and precious time sometimes needs critical decisions early in the structure. This has helped a great deal and I may continue to contact you as new problems present themselves...

Dana

[Ivan Zhekov]

Hello, Dana.

Something like the following should work.

I do have to tweak it, because it's quite verbose in it's current form, and also it doesnt work on dynamic window resizing, but I will get it work and attach the updated verison here

Regards,
Ivan Zhekov
Telerik

 

 

[Dana Cobb]

This would be for all breakpoints. Currently i have been testing the Device Detection Framework and once the sizes are consistent with the PageLayout sizes like SpanSm, I can use the DeviceScreenSize.Small etc... to accomplish... I think. Hopefully!

[Dana Cobb]

This would be for all breakpoints. I am hopeful that once the breakpoints for the Device Detection Framework are relative to the PageLayout breakpoints, I can use the DDF. i.e. SpanSm would be comparable to DeviceScreenSize.Small

Dana

[Ivan Zhekov]

Dana, I have addressed the mismatch question in another thread -- http://www.telerik.com/community/forums/radpagelayout-detects-wrong-screensize-and-viewport.


Regards,
Ivan Zhekov
Telerik