JQuery Mobile Tree Using Collapsible Sections and Dynamic Views in LightSwitch

Question

When displaying hierarchical data, or lists inside of lists, in a business application, a tree control is usually used. However, a traditional tree control is not well suited to a mobile friendly application.  JQuery Mobile recommends using collapsible content blocks.

To enable collapsible content blocks in Visual Studio LightSwitch HTML Client, it is necessary to use the Jewel Lambert method described in jQuery Mobile Collapsible Content Control with LightSwitch. This will enable collapsible content, but it will not handle dynamic content inside the collapsible sections.

To enable dynamic content we can create dynamic HTML inside the collapsible content blocks.

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/2220/JQuery-Mobile-Tree-Using-Collapsible-Sections-and-Dynamic-Views-in-LightSwitch.aspx

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 1

Micheal and Jewel ,

I am a huge fan of your blogs .They have helped me greatly in the past few months since I started work on the CTP4 product. I saw Jewel's response to my question about collapsible content yours too. They are extremely informative and thanks to both of you.

I found that jewel's blog required that I upgrade to JQuery 1.3.2 .I did that using nugget.

I also did the updates to my default.html .

jquery 1.9.1

jquery mobile -  1.3.0

msls 1.0.0 to msls 1.0.1

The problem I am having is with the jquery.mobile.structure 1.2.0.min.css  .As soon as I upgrade this to 1.3.0 the app starts looking like a very long single page that has just appended all the pages on a single long page.

What am I doing wrong?

Also if I leave everything at 1.8.2 as it came installed and use jewel's panel code below at the        div.panel();  lightswitch  errors out with object has no method panel.

 

 

 

function

buildPanel(element, contentItem, dataAttributes) {

    setTimeout(

function() {

 

varpage = $(element).closest('.ui-page');

     

vardiv = $('<div id = "'+ contentItem.name + '" data-role ="panel">');

        div.data(dataAttributes);

        page.prepend(div);

        $(element).appendTo(div);

        div.panel();

    }, 0);

}

 

Answer 2

I have VS2012 apps using the tree where this works for me:

    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>

    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-1.0.1.css" />

    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-1.0.1.min.css" />

---

Unleash the Power - Get the LightSwitch HTML Client book

http://LightSwitchHelpWebsite.com

Answer 3

Thanks Micheal. This worked.

<script type="text/javascript" src="Scripts/moment.js" charset="utf8"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="Scripts/datajs-1.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/Generated/resources.js"></script>
<script type="text/javascript" src="Scripts/msls-2.0.0.min.js"></script>
<script type="text/javascript" src="Scripts/Common.js"></script>
<script type="text/javascript" src="Scripts/toastr.js"></script>

Also the css were at version: -

    <link rel="stylesheet" type="text/css" href="Content/light-theme.css" />
    <link rel="stylesheet" type="text/css" href="Content/APConfiguratorTheme_Green.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/toastr.css" />
    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.2.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-2.0.0.min.css" />
    

Now my panel code isn't working. I need to tinker with that.

-S

Answer 4

I  got my panel working. yay.

Thanks

-S