Base solution for your next web application
BLACK FRIDAY
From Nov 21
To Dec 1
XXDAYS : XXHRS : XXMIN : XXSEC
SAVE UP TO$3K
Also valid for the
existing customers!
Open Closed

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


0
sampath created

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)
  • 0
    sampath created

    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>