How to add Inner Menu items to the Sub Menu #587

sampath created 8 years ago

AppNavigationProvider.cs

.AddItem(new MenuItemDefinition(
                    PageNames.App.Tenant.Dashboard,
                    L("Reports"),
                    icon: "glyphicon glyphicon-eye-open",
                    requiredPermissionName: AppPermissions.Pages_Tenant_Dashboard
                   ).AddItem(new MenuItemDefinition(
                        PageNames.App.Tenant.PropertyListingsReport,
                        L("PropertyListings"),
                        url: "tenant.propertyListingsReport",
                        icon: "glyphicon glyphicon-eye-open")
                       ).AddItem(new MenuItemDefinition(
                        PageNames.App.Tenant.BpoReports,
                        L("BpoReports"),
                        icon: "glyphicon glyphicon-eye-open")
                        .AddItem(new MenuItemDefinition(
                        PageNames.App.Tenant.PaymentReceived,
                        L("PaymentReceived"),
                        url: "tenant.PaymentReceived",
                        icon: "glyphicon glyphicon-eye-open")
                       ).AddItem(new MenuItemDefinition(
                        PageNames.App.Tenant.BankReport,
                        L("BankReport"),
                        url: "tenant.BankReport",
                        icon: "glyphicon glyphicon-eye-open")
                       ))
                )

app.js

$stateProvider.state('tenant.propertyListingsReport', {
            url: '/propertyListingsReport',
            templateUrl: '~/App/tenant/views/reports/propertyListings.cshtml',
            menu: 'PropertyListingsReport.Tenant'
        });

        $stateProvider.state('tenant.PaymentReceived', {
            url: '/PaymentReceived',
            templateUrl: '~/App/tenant/views/reports/propertyListings.cshtml',//I'll change this later
            menu: 'PaymentReceived.Tenant'
        });

        $stateProvider.state('tenant.BankReport', {
            url: '/BankReport',
            templateUrl: '~/App/tenant/views/reports/propertyListings.cshtml',//I'll change this later
            menu: 'BankReport.Tenant'
        });

Please see the image here for more details : [http://imgur.com/s2W9oT3])

1 Answer(s)

sampath created 8 years ago

Here is the Solution : cheers :)

Web\App\common\views\layout\sidebar.cshtml

<ul class="sub-menu" ng-if="menuItem.items.length">
                <li ui-sref-active="active" ng-repeat="childMenuItem in menuItem.items">

                    <a ui-sref="{{childMenuItem.url}}" ng-if="!childMenuItem.items.length">
                        <i class="{{childMenuItem.icon}}"></i>
                        <span class="title">{{childMenuItem.displayName}}</span>
                    </a>

                    <a href="javascript:;" class="auto" ng-if="childMenuItem.items.length">
                        <i class="{{childMenuItem.icon}}"></i>
                        <span class="title">{{childMenuItem.displayName}}</span>
                        <span class="arrow "></span>
                    </a>

                    <ul class="sub-menu" ng-if="childMenuItem.items.length">
                        <li ui-sref-active="active" ng-repeat="childMenuItem2 in childMenuItem.items">
                            <a ui-sref="{{childMenuItem2.url}}">
                                <span><i class="sub-menu-icon {{childMenuItem2.icon}}"></i> {{childMenuItem2.displayName}}</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>

Have an answer to this question? Log in and write your answer.