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

NavigationDrawer question

Thread ID:

Created:

Updated:

Platform:

Replies:

121791 Jan 26,2016 09:26 AM UTC Jan 27,2016 08:57 AM UTC ASP.NET MVC 1
loading
Tags: NavigationDrawer(Mobile)
Emil Yotov
Asked On January 26, 2016 09:26 AM UTC


Hello, how to make a NavigationDrawer (mobile) item to load a link to a website or main web page. The example below is not working.

item.Add().Text("Link").Href("https://www.syncfusion.com");


My second question is how to do back button (or other button) to open the menu items, and not just slip ?

Dhinesh Ravi [Syncfusion]
Replied On January 27, 2016 08:57 AM UTC

Hi Emil,

Thank you for contacting Syncfusion Support.

We can load the new website in the NavigationDrawer(Mobile) with the help of template and iframe. Refer to the following steps to achieve the requirement.

Step1: We need to create the iframe within the page along with the NavigationDrawer with height and width equal to window size, so that the contents will be viewed clearly. Refer to the following code example

[Html]

<div style="height: 100%; width:100%">
    <iframe id="frame" style="height: 100%; width: 100%"></iframe>
</div>

@Html.EJMobile().NavigationDrawer("navpane").Width(200).TargetId("Header_rightbutton"). ContentTemplate(@<div>

        <h1>Websites</h1>

        <div id="Web1" class="temptext e-m-state-active">Syncfusion</div>

        <div id="Web2" class="temptext">Tutorials Point</div>

        <div id="Web3" class="temptext">Apache Cordova</div>

        <div id="Web4" class="temptext">Angular JS</div>

        <div id="Web5" class="temptext">W3 schools</div>
    </div>)


Step2: Create the NavigationDrawer with the inner contents as template as shown in the above code example.

Step3: Since inner contents used are template, we need to bind the events to the contents. Refer to the following code example

[Html]

<script>

        $(".temptext").bind('click', function (e) {

        //scripts to load the website within the Navigation Drawer iframe


        //Closes the NavigationDrawer on item select

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


        //Variable to store the selected item id

        var tempid = e.target.id;


        //Loads the website into the iframe as per the item selected

        if (tempid == "Web1")

            $("#frame").attr("src", "http://www.syncfusion.com")


        else if (tempid == "Web2")

            $("#frame").attr("src", "http://www.tutorialspoint.com")


        else if (tempid == "Web3")

            $("#frame").attr("src", "http://cordova.apache.org")


        else if (tempid == "Web4")

            $("#frame").attr("src", "https://angularjs.org")


        else if (tempid == "Web5")

            $("#frame").attr("src", "http://www.w3schools.com")


                                                 

        //Removes the previous selected item color

        $('.temptext').removeClass("e-m-state-active");

        //Adds the active item color to selected item
        $('#' + tempid).addClass("e-m-state-active");
    });
</script>


Step4: On the item click, we need to load the website into the iframe respectively as shown in the above code example.

Step5: Once the item is clicked, we need to add the active color to the selected item, to highlight the particular item is selected. Hence we have added the class “e-m-state-active” to selected item. Refer to the following code example.

[HTML]

<style>

    .e-m-state-active

    {

        background-color: #007aff; /*background color*/

        color: white !important; /*font color*/
    }
</style>


Now when the item is selected in the Navigation drawer, website is loaded into the iframe and selected item gets highlighted.

NavigationDrawer can be opened by tapping on any item by using the property “targetID”. Once targetID is provided to the NavigationDrawer, it opens on clicking the item, where the id is given as targetID. Refer to the following code example

[HTML]

@Html.EJMobile().NavigationDrawer("navpane").TargetId("Header_rightbutton")

Now the NavigationDrawer will open, by tapping on the Header right button.

We have also created simple sample for the requirement. Refer to the sample in the following attachment

NavigationDrawer
 
Regards,
Dhinesh R

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

;