We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

LightSwitch Integration

Hi to all,
I'm integrating your NavigationDrawer in my Main menù of an HTML5 LightSwitch application.
How can I to call my internal page from Drawer? below a piece of code:
i've create a js function
function createMenu() {
     $("#home").show();
        $("#navpane").ejNavigationDrawer({ type: "overlay", direction: "left", enableListView: true, listViewSettings: { width: 200, mouseDown: 'slideMenuClick' }, position: "fixed" });
        function slideMenuClick(e) {
            $("#navpane").ejNavigationDrawer("close");
            $("#container .subpage").hide();
            $("#" + e.text.toLowerCase()).show();
            $(".e-header h2").text(e.text);
        }
        $("#butdrawer").click(function () {
            $("#navpane").ejNavigationDrawer("open");
        });   
};

in my default page I have....
...........................
  <!--Navigation Drawer Control-->
                        <div id="navpane">
                            <ul>
                                <li data-ej-imageurl="Content/Images/00House.png" data-ej-text="Home"
                                    id="navhome"></li>
                                <li data-ej-imageurl="Content/Images/01People.png" data-ej-text="Clienti"
                                    id="navpeople"></li>
                                <li data-ej-imageurl="Content/Images/02Project.png" data-ej-text="Prodotti"
                                    id="navprofile"></li>
                                <li data-ej-imageurl="Content/Images/08Clock.png" data-ej-text="Appuntamenti"
                                    id="navphotos"></li>
                                <li data-ej-imageurl="Content/Images/12Resources.png" data-ej-text="Risorse"
                                    id="navcommunities"></li>
                                <li data-ej-imageurl="Content/Images/05Graph.png" data-ej-text="Statistiche"
                                    id="navlocation"></li>
                                <li data-ej-imageurl="Content/Images/06Configuration.png" data-ej-text="Configurazione"
                                    id="navconfig"></li>
                            </ul>
                        </div>
...............................
tks in advance

5 Replies

AK Arun Kumar S Syncfusion Team February 25, 2015 11:47 AM UTC

Hi Stefano,

Thanks for your interest in Syncfusion products.

Please follow the steps described in the below link to achieve your requirement.

UG Link: http://help.syncfusion.com/ug/js/default.htm#!documents/createyourfirstnavig.htm

We have created a simple sample for the same and attached in the link below.

Sample Link: NavigationDrawer.zip

Please check this and let us know if you need any further assistance.

 
Regards,
Arun Kumar S




SB Stefano Bottaro February 25, 2015 07:32 PM UTC

Tks Arun,
now i need to call  my internal page...... something about:
http://localhost:50512/HTMLClient/#/BrowseCustomers/[e15999] .....this url is dinamicaly composed by framework html5 Lightswitch
can you help me ?




AK Arun Kumar S Syncfusion Team February 26, 2015 07:09 AM UTC

Hi Stefano,

Thanks for the update.

Yes, We can navigate to the internal page by using ajax. You could find the below steps to achieve your scenario.

First, we have to create an internal pages from which we are going to get the content while clicking the items in the drawer. Once, we have done with creating pages we can render navigation drawer with mousedown event to handle the ajax post as in below the code snippets below.

[default.html]

<div class="navi">

        <div id="target" class="icon-target">

            Drawer

        </div>

    </div>

    <div id="navpane">

        <ul>

            <li data-ej-imageclass="icon-home" data-ej-text="Home"></li>

            <li data-ej-imageclass="icon-profile" data-ej-text="Profile"></li>

            <li data-ej-imageclass="icon-photo" data-ej-text="Photos"></li>

            <li data-ej-imageclass="icon-locations" data-ej-text="Location"></li>

        </ul>

    </div>

    <!-- Default Page Content-->

    <div id="render">

        This page displays the content of the item in drawer on click.

    </div>

    <script type="text/javascript">

        $(function () {

            $("#navpane").ejNavigationDrawer({ enableListView: true, targetId: "target", listViewSettings: { mouseDown: 'slideMenuClick', persistSelection: true } });

        });

   </script>

Now, we have to handle $.ajax() function to load the internal page content to the current page. Please find the below code snippets.

[script]

function slideMenuClick(args) {

            $.ajax({

                url: "ajaxpages/" + args.text + ".html", //To get internal page url

                type: "POST",

                success: function (e, status, response) {

                    //Success handler of content loading while list click happens

                    $('#render').html(response.responseText);

                    $('#target').html(args.text);//To change the header based on the internal page content

                    $("#navpane").ejNavigationDrawer("close");

                },

                error: function (error) {

                    alert("error");

                }

            })

        }

For your convenience, We have created a simple sample and attached it in the below link.

Sample Link: Sample.zip

Please check this and let us know if you need further assistance.
 
Regards,
Arun Kumar S




SB Stefano Bottaro February 28, 2015 06:35 PM UTC

Tks for your assistence, I 've modified the  slideMenuClick function .
Below the row updated for Lightswitch implementation

function slideMenuClick(args) {
    switch (args.text) {
        case "Home":
            scr = "DashBoard";                                //the  Lightswitch screen neme
            break;
      ...................
    };   
    msls.application.showScreen(scr, null, null);    // this row is most important ............. compose the url in LS format
    $("#navpane").ejNavigationDrawer("close");
}

thank to all for the great work
I'll come back alive with new requests for clarification on the other components that I'm testing
:-)
have you a god day


AK Arun Kumar S Syncfusion Team March 2, 2015 07:17 AM UTC

Hi Stefano,

Thanks for the update. We will wait to hear from you.
 
Regards,
Arun Kumar S



Loader.
Live Chat Icon For mobile
Up arrow icon