How can I detect which Span setting is being used?

7 posts, 0 answers
  1. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 23 Sep 2014 Link to this post

    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!
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 26 Sep 2014 Link to this post

    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
     

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 26 Sep 2014 in reply to Ivan Zhekov Link to this post

    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
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 01 Oct 2014 Link to this post

    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
     

    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.

     
  6. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2014 in reply to Ivan Zhekov Link to this post

    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!
  7. Dana Cobb
    Dana Cobb avatar
    46 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2014 in reply to Ivan Zhekov Link to this post

    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
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 08 Dec 2014 Link to this post

    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
     

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017