locked
HTML Client - catch Rows Layout resize event RRS feed

  • Question

  • Is it possible to listen to Group resize event ?

    Scenario : screen with a Columns Layout group.

    Columns group has two children : custom control (FullCalendar) bound to entity collection, and Rows Layout with all entity fields bound to selected item.

    As the (right) Rows Layout group sizing is set to 'Fit to content' it automatically adjusts its size depending on data, so I would need to catch group resize event to render again the (left) custom control that is a FullCalendar, in order to adjust calendar to the new available width.

    Thanks in advance.


    Marco

    Saturday, October 19, 2013 3:11 PM

Answers

  • Thank you again for your help, Yunjie !

    Resizing browser window with 'Stretch to Container' option, sometimes swaps right panel down under calendar, I know this is a feature for a better adjustment for mobile devices, but as this application is mainly intended for PC/Tablets I need panel remains always at the right of the screen, always in front of user, resizing accordingly calendar content only.

    I think the only alternative will be setting a fixed size to right panel as Compact Margin doesn't seem to change behavior, or continue using render after timeout interval, maybe testing last width to avoid unnecessary screen redraw.

    ComponentOne controls are too expensive to be considered in this test phase, so not an option for me right now.

    Best regards


    Marco

    Tuesday, October 22, 2013 1:04 PM

All replies

  • Think I've found a workaround setting a wait timeout when entity selected item changes (and right Rows Layout group control is resized showing the entity properties):

    window.setTimeout(function () {
        $('#calendar').fullCalendar('render');
    }, 1000);
    

    I'm very new to javascript so I can't understand if this trick is to be considered a by design solution, it looks very quick&dirty to me...

    Any suggestion for a more robust/clean solution ?


    Marco

    Saturday, October 19, 2013 4:45 PM
  • Hi Marco,

    As your mentioned above, we can use .fullCalendar( 'render' ) to  forces the calendar to render and/or readjusts its size.

    This method is useful in the scenario where a tab setup might hide/show a calendar.

    $('#my-tabs').tabs({

        activate: function(event, ui) {

            $('#calendar').fullCalendar('render');

        }

    });

    You can also have a look at this reference: http://arshaw.com/fullcalendar/docs/display/render/


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, October 21, 2013 12:01 PM
  • Hi Yunje,

    thank you for confirming FullCalendar render method usage.

    Anyway I'd like to stress that my question was mainly about Group (Columns/Rows) Layout resize event, or equivalent if any. Setting those setTimeout interval looks like a modest solution...how could I predict how much time it actually takes changing selected item and redrawing screen ?


    Monday, October 21, 2013 12:41 PM
  • I would use:

    window.onresize = function(event) {
        ...
    }

    And inside function will get the latest width of what ever region you need.

    Also, if Calendar is an control, it has support some methods to change its size.

    It is not a good practise to rerender the control every time when something changes.

    Look for api, there should be properties for width and height.

    Monday, October 21, 2013 2:01 PM
  • Thank you nicksav for your help !

    The Calendar is a control indeed, has support to window resize event and gives a convenient callback also, to perform additional adjustments (FullCalendar windowResize callback). I use this callback to adjust height ratio against window height and it works very well.

    Your suggestion too should work well on window resizing.

    Please look at the image : my problem is that window resize doesn't fire when Panel Rows Layout that stands at the right of Calendar control's group (Custom Control Calendario) automatically changes width because it has 'Fit to Content' sizing.

    That's why I asekd for LS Group Control resize event and not window resize event.

    [Calendar is bound to a visual collection (all calendar events) when user clicks on a calendar event can see additional details in the right panel, this panel is rows layout with all entity properties.]

    Hope this helps you to help me :)


    Marco

    Monday, October 21, 2013 2:56 PM
  • Hi,

    I’d like to suggest you to try ‘Stretch to Container’ or Use Compact Margin.

    In addition, there is a sample about using Calendar control, please check the link below if it helps.

    LightSwitch Employee Vacation Tracker Using The ComponentOne HTML Scheduler Control

    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1215/LightSwitch-Employee-Vacation-Tracker-Using-The-ComponentOne-HTML-Scheduler-Control.aspx

    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, October 22, 2013 12:31 PM
  • Thank you again for your help, Yunjie !

    Resizing browser window with 'Stretch to Container' option, sometimes swaps right panel down under calendar, I know this is a feature for a better adjustment for mobile devices, but as this application is mainly intended for PC/Tablets I need panel remains always at the right of the screen, always in front of user, resizing accordingly calendar content only.

    I think the only alternative will be setting a fixed size to right panel as Compact Margin doesn't seem to change behavior, or continue using render after timeout interval, maybe testing last width to avoid unnecessary screen redraw.

    ComponentOne controls are too expensive to be considered in this test phase, so not an option for me right now.

    Best regards


    Marco

    Tuesday, October 22, 2013 1:04 PM