Using routing, navbar-menubuilder exist using syncfusion control ?

[Gomtesh]

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]

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]

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]

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]

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]

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