none
html client tab rendering issue RRS feed

  • Question

  • on my screen I have 2 tabs - each with a custom controls connected to a query,

    in the .RowTemplate_render method of each control I manipulate the query date and show it.

    this works fine sometimes and sometimes the rendering just fails completely - my custome control on one tab may show 5 records nicely formatted - when I switch to the other tab I just see 3 grey boxes but no actual data.

    do I need to render the custom control when the tab is clicked?

    is there a way to refresh a tab?

    I read some articles about wrapping javascript in a setTimeOut call - how and would that help?

    Thanks

    MrP

    Friday, September 6, 2013 8:43 PM

Answers

  • I reread some articles from Joe Binder - and I have forgotten about the rules of Lightswitch HTML client,

    after "don't talk about Lightswitch HTML Client"

    if you want to show lightswitch data on a screen use databinding!

        var procTime = $('<div id="procTime"></div>');
        $(procTime).addClass("procedureTime");
        procTime.appendTo($(element));
        contentItem.dataBind("stringValue", function (newValue) {
            procTime.text(moment(newValue).format("hh:mma"));
        });

    when you databind - it seems to work just fine :-)

    Thank you Joe Binder!

    Friday, September 13, 2013 9:58 PM

All replies

  • Hi,

    Without sample code, I can only offer a generic answer: In HTML Client, when a screen has multiple tabs, only the first Tab is activated and displayed when the screen is loaded. The rest of the Tabs are activated and displayed when the user clicked on them. This would mean:

    • Content items that are not on the first tab will have their render or postRender methods invoked later (or never), depending on whether the end user clicks on it or not.
    • So if you have jQuery Mobile controls/widgets on these tabs, they will not be enhanced after render/postRender is invoked, because at that point jQuery Mobile is already enhanced the page. You will need to trigger("create") or trigger("refresh") to have them enhanced.
    • Another common scenario is waiting for jQuery Mobile pagechange event to perform actions after jQuery Mobile has enhanced the page, this will not work with content items that are not on the first tab either, because by the time render or postRender is invoked on those, pagechange already happens.

    do I need to render the custom control when the tab is clicked?

    render and postRender will be invoked when the tab is displayed (user clicks on it).

    is there a way to refresh a tab?

    No, you will have to enhance the jQuery Mobile controls/widgets. See jQuery Mobile documentation for ways to do this.

    Best regards,
    Huy

    Monday, September 9, 2013 9:10 PM
  • Huy,

    I have this

    myapp.BrowseCasesByDivision.proc_time1_render = function (element, contentItem) {
        // Write code here.
        var itemTemplate = $("<div> </div>");
        var firstline = $("<h3> </h3>");
        var proctime = $("<div>" + moment(contentItem.value).format("hh:mma") + "</div>");
        $(proctime).addClass("procedureTime");
        proctime.appendTo($(firstline));
        firstline.appendTo($(itemTemplate));
        itemTemplate.appendTo($(element));
    };

    for rendering the custom control in the row - how do you trigger("create") or trigger("refresh") this?

    thx

    Wednesday, September 11, 2013 5:33 PM
  • Hi,

    You can try

    itemTemplate.appendTo($(element)).trigger("create");
    

    Best regards,
    Huy

     

    Wednesday, September 11, 2013 5:40 PM
  • nah, see the screen shot - the time being rendered it not the time from the data - the initial tab load it works fine but as you flick between the tabs it goes bonkers :)

    Wednesday, September 11, 2013 5:50 PM
  • I reread some articles from Joe Binder - and I have forgotten about the rules of Lightswitch HTML client,

    after "don't talk about Lightswitch HTML Client"

    if you want to show lightswitch data on a screen use databinding!

        var procTime = $('<div id="procTime"></div>');
        $(procTime).addClass("procedureTime");
        procTime.appendTo($(element));
        contentItem.dataBind("stringValue", function (newValue) {
            procTime.text(moment(newValue).format("hh:mma"));
        });

    when you databind - it seems to work just fine :-)

    Thank you Joe Binder!

    Friday, September 13, 2013 9:58 PM