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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

LightSwitch Integration

Thread ID:

Created:

Updated:

Platform:

Replies:

118315 Feb 24,2015 07:22 PM UTC Mar 2,2015 07:17 AM UTC JavaScript 5
loading
Tags: ejNavigationDrawer
Stefano Bottaro
Asked On February 24, 2015 07:22 PM UTC

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

Arun Kumar S [Syncfusion]
Replied On 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



Stefano Bottaro
Replied On 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 ?



Arun Kumar S [Syncfusion]
Replied On 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



Stefano Bottaro
Replied On 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

Arun Kumar S [Syncfusion]
Replied On March 2, 2015 07:17 AM UTC

Hi Stefano,

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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;