NavigationDrawer question

[Emil Yotov]

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]

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