The following webpage is a container with three different tabs: Uploaded Datasets, Bought Datasets and Integrated Datasets:
1st Tab
each tab content is a UI-Grid that I call through an angular directive as follows:
<div class="form-top">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-uploaded" role="tab" aria-controls="nav-uploaded" aria-selected="true">
Uploaded Datasets
</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-bought" role="tab" aria-controls="nav-bought" aria-selected="false" >
Bought Datasets
</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-integrated" role="tab" aria-controls="nav-integrated" aria-selected="false">
Integrated Datasets
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-uploaded" role="tabpanel">
<uploaded-grid></uploaded-grid>
<!-- <div id="grid1" ui-grid="uploadedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> -->
</div>
<div class="tab-pane fade" id="nav-bought" role="tabpanel">
<bought-grid></bought-grid>
</div>
<div class="tab-pane fade" id="nav-integrated" role="tabpanel">
<integrated-grid></integrated-grid>
</div>
</div>
</div>
and each directive contains the following Html code:
<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>
and linked with a specific controller:
var app = angular.module("integratedGridCtrl",[]);
app.controller('integratedGridCtrl', ['$http','$scope','$uibModal', function($http, $scope,$uibModal){
var data = [
{
id: "Cox",
title: "Carney",
creationDate: "22/22/2019",
description: "description"
},
{
id: "Lorraine",
title: "Wise",
creationDate: "22/22/2019",
description: "description"
},
{
id: "Nancy",
title: "Waters",
creationDate: "22/22/2019",
description: "description"
}
];
$scope.integratedGridOptions = {
showGridFooter: true,
showColumnFooter: true,
enableFiltering: true,
columnDefs: [
{ field: 'id', width: '*', minWidth: 60},
{ name: 'title', field: 'title', width: '*', minWidth: 60, displayName: 'title' },
{ field: 'creationDate', width: '*',displayName: 'creation Date', minWidth: 60, cellFilter: 'date' },
{ field: 'description', width: '*', minWidth: 60 },
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
rowTemplate: '<div ng-click=\"grid.appScope.detailPopup(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ui-grid-cell style="cursor: pointer"></div>',
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
return docDefinition;
},
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'LETTER',
exporterPdfMaxGridWidth: 500,
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
exporterExcelFilename: 'myFile.xlsx',
exporterExcelSheetName: 'Sheet1'
}
$scope.integratedGridOptions.data = data;
}]);
The first two tabs are well displayed, but the 3rd tab doesn't show the columns from the first click until I refresh again.
3rd Tab
Try ui-grid-auto-resize directive for the grid as follows:
<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-auto-resize
ui-grid-exporter class="grid"></div>
Related
I have the following code, I am trying to get an id in the SPAN and it is not accepting values in any type of tag that is located inside ....
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="text: nombre,style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
If I understand you correctly your problem is that any tag placed in <a> tag is to being rendered. The reason for that to happen is that your <a> tag is using text: nombre binding which is replacing anything you have put inside it.
I removed that binding and <span> started to appear in it with working attr binding.
var viewModel = function() {
this.loterias = ko.observableArray([
{
nombre: 'test',
color: 'red',
id: 'test-id',
nombreCorto: 1,
namerjarClickLoteria: function(){
}
},
{
nombre: 'test',
color: 'green',
id: 'test-id',
nombreCorto: 2,
namerjarClickLoteria: function(){
}
}
]);
return this;
}
ko.applyBindings(viewModel(), $('#contenedorListaTarea')[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div class="col-lg-12 col-md-12" id="contenedorListaTarea">
<ul class="nav nav-tabs align-items-lg-start mb-1" data-bind="foreach: loterias">
<li class="nav-item" name="loteria" data-bind="click:namerjarClickLoteria">
<a class="nav-link fontSizeTab" data-bind="style: { backgroundColor: color},attr:{id:id+nombreCorto}">
<span data-bind="attr:{id:nombreCorto}" >0.00</span>
</a>
</li>
</ul>
</div>
I have this part of my code in sidebar.component.html :
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
<a class="nav-link" [routerLink]="[menuItem.path]">
<i class="material-icons">{{menuItem.icon}}</i>
<p>{{menuItem.title}}</p>
</a>
<ng-container *ngIf="menuItem.children && menuItem.children.length > 0">
<ul class="nav">
<li routerLinkActive="active" *ngFor="let childmenu of menuItem.children"
class="{{menuItem.class}}">
<a class="nav-link" [routerLink]="[childmenu.path]">
<p>{{childmenu.title}}</p>
</a>
</li>
</ul>
</ng-container>
</li>
</ul>
and this is my code in sidebar.component.css :
export const ROUTES: RouteInfo[] = [
{ path: '/dashboard', title: 'dashbord', icon: 'dashboard', class: '', children: '' },
{
path: '/user-List', title: 'Parent', icon: 'apps', class: '', children: [
{ path: '#', title: 'Child Menu 1', icon: 'dashboard', class: '' },
{ path: '#', title: 'Child Menu 2', icon: 'add_shopping_cart', class: '' },
{ path: '#', title: 'Child Menu 3', icon: 'sports_soccer', class: '' },
]
}
];
can you help me please to show/hide submenu by click ?
In your parent component ts file create a property to store the submenu state:
showSubMenu: boolean = false;
In you parent template give your sub-menu an *ngIf and a button to toggle it:
<button (click)="showSubMenu = !showSubMenu">Toggle Sub Menu</button>
<sub-menu *ngIf="showSubMenu"></sub-menu>
Sorry I'm really new to all this.
I'm trying display a submenu during a menu item mouse-over. I've been given hints on recording the index of menu items, and recording the boolean value of whether the user currently has their mouse over the top menu's nav container. However I do not know how to proceed on using these to create conditional renderings for the submenu. Here's what I've tried:
HTML:
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
</li>
</ul>
<div class="pure-menu">
<ul id="submenu" class="pure-menu-list">
<li v-if= "topmenuhover == true" class="pure-menu-item">
<a v-bind:href="topmenu[topmenuitem].submenus.url" class="pure-menu-link">{{ topmenu[topmenuitem].submenus.title }}</a></li>
</ul>
</div>
</nav>
</div>
JS:
var vueinst = new Vue({
el: '#vuemain',
data: {
topmenuitem : -1,
topmenuhover : false,
topmenu: [
{ title:'Home', url:'/', submenus: [] },
{ title:'About', url:'/about',
submenus: [
{ title:'Who we are', url:'/about#us' },
{ title:'What we do', url:'/about#store' },
{ title:'Our range', url:'/about#range' }
]
},
{ title:'Contact Us', url:'/contact',
submenus: [
{ title:'Information', url:'/contact#info' },
{ title:'Returns', url:'/contact#return' },
{ title:'Locate Us', url:'/contact#locate' }
]
}
]
},
methods: {
mouseOver: function(index){
this.topmenuitem=index;
},
mouseOverNav: function(){
this.topmenuhover = true;
},
mouseLeaveNav: function(){
this.topmenuhover = false;
}
}
});
Can anyone help me with this? Thank you!
The Javascript part should do the trick, you just need to tweak the template a bit to actually render the submenu. Here's how you could do it:
var vueinst = new Vue({
el: "#vuemain",
data: {
topmenuitem: -1,
topmenuhover: false,
topmenu: [
{ title: "Home", url: "/", submenus: [] },
{
title: "About",
url: "/about",
submenus: [
{ title: "Who we are", url: "/about#us" },
{ title: "What we do", url: "/about#store" },
{ title: "Our range", url: "/about#range" },
],
},
{
title: "Contact Us",
url: "/contact",
submenus: [
{ title: "Information", url: "/contact#info" },
{ title: "Returns", url: "/contact#return" },
{ title: "Locate Us", url: "/contact#locate" },
],
},
],
},
methods: {
mouseOver: function (index) {
this.topmenuitem = index;
},
mouseOverNav: function () {
this.topmenuhover = true;
},
mouseLeaveNav: function () {
this.topmenuhover = false;
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vuemain">
<nav v-on:mouseover="mouseOverNav" v-on:mouseleave="mouseLeaveNav" class="pure-menu pure-menu-horizontal">
<ul id="topmenu" class="pure-menu-list">
<li v-for="(item, index) in topmenu" v-on:mouseover="mouseOver(index)" class="pure-menu-item">
<a v-bind:href="item.url" class="pure-menu-link">{{ item.title }}</a>
</li>
</ul>
<div class="pure-menu">
<ul v-if="topmenuhover" id="submenu" class="pure-menu-list">
<li v-for="subitem in topmenu[topmenuitem].submenus" class="pure-menu-item">
<a v-bind:href="subitem.url" class="pure-menu-link">{{ subitem.title }}</a></li>
</ul>
</div>
</nav>
</div>
How do you apply a bootstrap class like nav-link active to a onlick(). I've been having hard time implementing this. I thought it would have just been as simple as.
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item nav-link active"
>
But this however just makes all list items/anchor tags active.
return (
<div style={{ alignSelf: "center" }}>
<ul className="nav nav-pills">
<li className="nav-item dropdown ">
<div
className="dropdown-menu show"
x-placement="bottom-start"
style={{
position: "relative",
willChange: "transform",
top: "5px",
overflowY: "scroll",
maxHeight: "200px"
}}
>
{this.props.searchState.isActive === false
? probes.map(probe => (
<a
onClick={() => this.props.onUpdateSelectedProbe(probe)}
className="dropdown-item"
>
<div
className="dropdown-divider"
style={{ backgroundColor: "black" }}
></div>
{probe.companyPN}: {probe.description}
</a>
))
: filteredProbes.map(filterprobe => (
<a
onClick={() =>
this.props.onUpdateSelectedProbe(filterprobe)
}
className="dropdown-item"
>
<div className="dropdown-divider"></div>
{filterprobe.companyPN}: {filterprobe.description}
</a>
))}
</div>
</li>
</ul>
</div>
);
This is a basic example of adding items to a list and conditionally showing a "selected" class
.selected {
background: red;
}
function App() {
const [people] = useState([
{ id: 0, name: "Mario" },
{ id: 1, name: "Luigi" },
{ id: 2, name: "Peach" }
]);
const [selected, setSelected] = useState({});
return (
<div>
{people.map(({ id, name }) => (
<div
className={selected[id] ? "selected" : ""}
key={id}
onClick={() => setSelected({ ...selected, [id]: true })}
>
{name}
</div>
))}
</div>
);
}
https://codesandbox.io/s/funny-nobel-e6x6e
I've a nav bar and when I click any tab in the nav bar, it takes me to that tab.
<section id="tabs">
<div class="mob-nav">
<div class="nav nav-tabs nav-fill nav-tabs-scroll" id="nav-tab" role="tablist">
<!-- N add new class nav-tabs-scroll -->
<a class="nav-item nav-link" style="padding-top: 10px;"
ng-class="{ active: $index == 0 }"
id="nav-{{menuTab.menuURL}}-tab"
data-toggle="{{menuTab.dataToggle}}"
data-target="#{{menuTab.menuURL}}"
href="#{{menuTab.menuURL}}" role="tab"
aria-controls="nav-{{menuTab.menuURL}}"
ng-repeat="menuTab in menuList">
</a>
</div>
</div>
</section>
<!-- Tab Details -->
<section id="tabs">
<div class="">
<div class="">
<div class="mb-d-150">
<div class="tab-content py-3 px-sm-0 pl-0 pr-0"
id="nav-tabContent">
<!-- N removed py-3 class -->
<div class="tab-pane fade show"
ng-class="{ active: $index == 0 }"
id="{{menuTab.menuURL}}" role="tabpanel"
data-target="#{{menuTab.menuURL}}"
aria-labelledby="nav-{{menuTab.menuURL}}-tab"
ng-include="menuTab.colDef"
ng-repeat="menuTab in menuList">
</div>
<div class="tab-pane fade" id="changepass" role="tabpanel"
aria-labelledby="nav-about-tab"
ng-include="changePasswordTemplate">
</div>
</div>
</div>
</div>
</div>
</section>
Here's an example of menuList.
[{
menuID: "USER LANDING PAGE"
caption: "Dashboard"
parent: "root"
menuURL: "exampleModal"
cssClass: "fas fa-cog fa-lg"
cssParent: "nav navbar-nav"
aClass: "customerLandingPageTemplate"
SlNum: 98
colDef: "/js/templates/user-landing-page.html"
menuList: []
dataToggle: "modal"
},{
menuID: "USER QUERIES"
caption: "USER QUERIES"
parent: "root"
menuURL: "user-queries"
cssClass: "fas fa-comment-alt fa-lg"
cssParent: "nav navbar-nav"
aClass: "userQueriesTemplate"
SlNum: 100
colDef: "/js/templates/user-queries.html"
menuList: []
dataToggle: "tab"
}]
Here's the angularjs part which gives me the menuList:
GetData.async(CONFIG.urlMaker('ws/menulist?userid=' + userid)).then(function (data) {
$scope.menuList = data;
console.log($scope.menuList)
});
When I refresh browser, it always takes me back to the USER LANDING PAGE no matter where I refresh. But on browser refresh, I need to reload the page where I was before refreshing.
You could use the session storage for saving the last state.
Internal code snippet does not allow to use session storage.
A working example on JSBin.
angular.module('app', ['ui.router'])
.config(($stateProvider) => {
const helloState = {
name: 'hello',
url: '/hello',
template: '<h3>hello world!</h3>'
}
const aboutState = {
name: 'about',
url: '/about',
template: '<h3>Its the UI-Router hello world app!</h3>'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
})
.run(($state, $transitions) => {
$transitions.onSuccess({}, transition => {
sessionStorage.setItem('lastState', transition.to().name);
});
const lastState = sessionStorage.getItem('lastState');
if (lastState) {
$state.go(lastState);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="//unpkg.com/#uirouter/angularjs/release/angular-ui-router.min.js"></script>
<body ng-app="app">
<a ui-sref="hello" ui-sref-active="active">Hello</a>
<a ui-sref="about" ui-sref-active="active">About</a>
<ui-view></ui-view>
</body>