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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Using routing, navbar-menubuilder exist using syncfusion control ?

Thread ID:

Created:

Updated:

Platform:

Replies:

118544 Mar 18,2015 07:26 AM UTC Mar 25,2015 03:48 PM UTC JavaScript 5
loading
Tags: General
Gomtesh
Asked On March 18, 2015 07:26 AM UTC

I have to do following functionality using Angularjs


<div class="collapse navbar-collapse navbar-menubuilder ">
                        <ul class="nav navbar-nav navbar-left">
                            <li><a rel='nofollow' href="#/">Home</a>
                            </li>
                            <li><a rel='nofollow' href="#/Leave_details">Leave Details</a>
                            </li>
                            <li><a rel='nofollow' href="#/Attendance_details">Attendance Details</a>
                            </li>
                            <li><a rel='nofollow' href="#/Request">Request</a>
                            </li>
                            <li><a rel='nofollow' href="#/Regularisation">Regularisation</a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right" ng-controller="EmployeeEditController">
                            <li class="dropdown">
                                <a rel='nofollow' href="#" class="dropdown-toggle link_style" data-toggle="dropdown" role="button" aria-expanded="false">{{employee.firstname}} <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li ng-class="{active:isActive('/profile')}"><a rel='nofollow' href="#/profile" class="link_style">Profile</a></li>
                                    <li class="divider"></li>
                                    <!--<li><a rel='nofollow' href="#">Logout</a></li>-->
                                    <li><a ng-click="LogoutUser()" class="User link_style" id="Logout">Logout</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>



here is app.js

.config(['$routeProvider', function ($routeProvider) {

  
        $routeProvider.when('/',
            {
                templateUrl: '../view/partial/Home.html',
                controller: 'home_controller'
            });

        $routeProvider.when('/Leave_details',
             {
                 templateUrl: '../view/partial/Leave_details.html',
                 controller: 'leave_details_controller'
             });

        $routeProvider.when('/Attendance_details',
            {
                templateUrl: '../view/partial/Attendance_details.html',
                controller: 'attendance_details_controller'
            });


Harikrishnan P [Syncfusion]
Replied On March 19, 2015 03:47 PM UTC

Hi Gomtesh,

Yes we have Menu component in our JS suite using which you can achieve your requirement using Angular JS. You can refer the following link to know about the Angular support in Syncfusion JS component.

http://help.syncfusion.com/ug/js/documents/angularjs.htm

Refer the following link to know about how to implement Angular support in Menu component

http://help.syncfusion.com/ug/js/default.htm#!documents/integration2.htm

We need to inject the ‘ejAngular’ in the module. Please refer the following code

<script>

angular.module('syncApp', ['ejangular']).controller('menuCtrl', function ($scope) {

});

</script>

We have attached a simple sample in the following location to showcase this.

Sample Location : Angular SPA sample

Please let us know if you have any other queries.

Regards,HariKrishnan


gomtesh
Replied On March 20, 2015 05:36 AM UTC

Thank you Harikrishnan for reply,
I am beginner while using Angular JS. So can you tell me solution that i can easily understand.  I have not used ASP.NET MVC - Views for web pages cshtml i have used html files also i have used routeprovider not stateprovider for routing.

Harikrishnan P [Syncfusion]
Replied On March 23, 2015 03:38 PM UTC

Hi Gomtesh,

Thanks for your update.

We have prepared a simple sample using HTML files, also we have used Angular routeprovider. Can you please check with the sample in the following location?

Sample Location : Angular JS Sample

While specifying the module, we need to inject the ‘ejAngular’ as shown below.

var app = angular.module("app", ['ngRoute', 'ejangular']);

Also run the above sample in web server (like IIS), because Ng-route needs webserver to function properly. In the above sample you can see that we have declared the ejMenu control using the directive ' ej-menu’. Please check with the provided sample and let us know if it helps.

Please get back to us if need further assistance.

Regards,

HariKrishnan


gomtesh
Replied On March 24, 2015 09:29 AM UTC

Hi  Harikrishnan,

Thank you for reply.
 I worked with above solution and ej-menu is working correct. But, there is a problem with dropdownlist at top right corner.As there is a dropdownlist for user which has dropdownmenus like 'profile' and 'logout' which redirects to their respective pages.I have worked with dropdown menu in bootstrap which is working correct.

<ul class="nav navbar-nav navbar-right" ng-controller="EmployeeEditController">
                        <li class="dropdown">
                            <a rel='nofollow' href="#/" class="dropdown-toggle link_style" data-toggle="dropdown" role="button" aria-expanded="false">&nbsp;{{UserName}}&nbsp;<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li ng-class="{active:isActive('/profile')}"><a rel='nofollow' href="#/profile" class="link_style">Profile</a></li>
                                <li class="divider"></li>
                                <li><a rel='nofollow' href="#/profile" ng-click="LogoutUser()" class="User link_style" id="Logout" ng-controller="LoginController">Logout</a></li>
                            </ul>
                        </li>
</ul

But, how can I use the ej-dropdownlist to display the dropdown list and dropdown menus(which redirects to their respective pages) for user in angularjs?

Sasikala Nagarajan [Syncfusion]
Replied On March 25, 2015 03:48 PM UTC

Hi Gomtesh,

Thanks for the update,

We have analyzed your requirement (display the dropdown list and dropdown menus which redirects to their respective pages). We can achieve your requirement using our SplitButton control by setting the buttonMode property of as DropDown. Also you can get selected option from the split button dropdown using client side event itemSelected (event that Fires when a menu item is clicked successfully).

Please refer the below code snippet:

[html]

<button id="splitbuttonnormal" ej-splitbutton e-buttonmode="DropDown" e-targetid="menu1" e-itemselected="ItemSelected">

Save

</button>

<ul id="menu1">

<li><span><a rel='nofollow' href="#logIn">LogIn</a></span></li>

<li><span><a rel='nofollow' href="#logout">Log Out</a></span></li>

<li><span><a rel='nofollow' href="#Account">Profile</a></span></li>

</ul>

</div>

[script]

function ItemSelected(args)

{

alert("selected " + args.text);

}

Please let us know if you have further queries,

Regards,

Sasikala Nagarajan


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

;