FullCalendar 5 with Sticky Resources Under Top Menu with Bootstrap 4 - css
I'd like to be able to use Bootstrap 4's sticky menu in conjunction with Full Calendar 5's sticky resource headers. When scrolling down, I'd like the bootstrap menu to remain at the very top, followed by the resource headings (i.e. "Room A", "Room B", etc.) from Full Calendar directly underneath. It looks like Full Calendar does have a sticky resource headings feature, but the feature only sticks to the very top of the page and is not visible because of the Bootstrap menu.
Here's a what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div id='calendar'></div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: "bootstrap",
initialView: "resourceTimeGridDay",
dayMinWidth: 200,
height: "auto",
resources: [
{ id: "a", title: "Room A" },
{ id: "b", title: "Room B" },
{ id: "c", title: "Room C" },
{ id: "d", title: "Room D" },
{ id: "e", title: "Room E" },
{ id: "f", title: "Room F" },
{ id: "g", title: "Room G" },
{ id: "h", title: "Room H" },
{ id: "i", title: "Room I" },
{ id: "j", title: "Room J" },
{ id: "k", title: "Room K" },
{ id: "l", title: "Room L" }
]
});
calendar.render();
});
</script>
</body>
</html>
Here's a simple CodePen to show you: https://codepen.io/bakerstreetsystems/pen/VwmoyJb
What I'd like it to look like is something like this after scrolling all the way to the bottom:
See how the Bootstrap menu is at the very top and then the resource titles ("Room A", "Room B", etc.) come right after?
Any help would be appreciated!
Change the top offset of your sticky table-header to match the height of the nav-bar.
document.addEventListener("DOMContentLoaded", function() {
var calendarEl = document.getElementById("calendar");
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: "bootstrap",
initialView: "resourceTimeGridDay",
dayMinWidth: 200,
height: "auto",
resources: [{
id: "a",
title: "Room A"
},
{
id: "b",
title: "Room B"
},
{
id: "c",
title: "Room C"
},
{
id: "d",
title: "Room D"
},
{
id: "e",
title: "Room E"
},
{
id: "f",
title: "Room F"
},
{
id: "g",
title: "Room G"
},
{
id: "h",
title: "Room H"
},
{
id: "i",
title: "Room I"
},
{
id: "j",
title: "Room J"
},
{
id: "k",
title: "Room K"
},
{
id: "l",
title: "Room L"
}
]
});
calendar.render();
});
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky>* {
top: 56px !important;
z-index: 100;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.5.1/main.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/examples/navbar-fixed/navbar-top-fixed.css" rel="stylesheet" />
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div id="calendar"></div>
</main>
Related
Remove recipes from emit
I have a Recipe project and I want to delete those recipes through a button. I have 3 components:
RecipesCar: Who prints the recipes
RecipesList: Who load de list
App: Who has the recipes object.
I'm trying to delete the recipes but at this moment is not working. I can capture the events but is not working cause the recipes are not deleting.
Here my code:
RecipesCard:
<template>
<div class="recipe" :class="recipe.featured && 'featured'">
<button class="delete-recipe">
<img
src="../assets/delete-button.svg"
alt="Delete recipe"
#click="deleteRecipe(this.recipe.id)"
/>
</button>
<h2 class="recipe-title">{{ recipe.title }}</h2>
<div class="recipe-image">
<img :src="recipe.imageUrl" />
</div>
<div class="recipe-info">
<div class="recipe-info-item">
<span class="recipe-info-label">Servings:</span>
<span class="recipe-info-value">{{ recipe.servings }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Time:</span>
<span class="recipe-info-value">{{ recipe.time }}</span>
</div>
<div class="recipe-info-item">
<span class="recipe-info-label">Difficulty:</span>
<span class="recipe-info-value">{{ recipe.difficulty }}</span>
</div>
</div>
<div class="recipe-ingredients">
<h3 class="recipe-ingredients-title">Ingredients</h3>
<ul class="recipe-ingredients-list">
<li v-for="ingredient in recipe.ingredients" :key="ingredient">
{{ ingredient }}
</li>
</ul>
</div>
<div class="recipe-directions">
<h3 class="recipe-directions-title">Directions</h3>
<ol class="recipe-directions-list">
<li v-for="direction in recipe.directions" :key="direction">
{{ direction }}
</li>
</ol>
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
name: "RecipeCard",
props: {
recipe: {
type: Object,
required: true,
},
},
methods: {
deleteRecipe() {
console.log(this.recipe.id);
this.$emit("my-event-delete", this.recipe.id);
},
},
});
</script>
RecipesList:
<template>
<div id="recipe-list" class="recipe-list">
<div v-for="(recipe, id) in recipeList" :key="recipe.id">
<recipe :recipe="recipe" #my-event-delete="deleteRecipe(id)" />
</div>
</div>
</template>
<script>
import { defineComponent } from "vue";
import Recipe from "./RecipeCard.vue";
export default defineComponent({
name: "RecipeList",
props: {
recipeList: {
type: Array,
required: true,
},
},
components: { Recipe },
methods: {
deleteRecipe(id) {
console.log("Componente borrado " + id);
},
},
});
</script>
App
<template>
<div id="app">
<div class="header">
<img class="logo" alt="UOC logo" src="./assets/uoc-logo.png" />
<div class="app-name">Recipe book</div>
</div>
<search-bar />
<recipe-list :recipeList="recipeList" #deleteRecipe="deleteRecipe" />
<recipe-form v-if="showModal" />
</div>
</template>
<script>
import RecipeList from "./components/RecipeList.vue";
import RecipeForm from "./components/RecipeForm.vue";
import SearchBar from "./components/SearchBar.vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {
RecipeList: RecipeList,
RecipeForm,
SearchBar,
},
data: () => ({
recipeList: [
{
id: 1,
servings: 4,
time: "30m",
difficulty: "Easy",
title: "Spaghetti",
ingredients: ["noodles", "tomato sauce", "cheese"],
directions: ["boil noodles", "cook noodles", "eat noodles"],
imageUrl:
"https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=face&w=2000&h=1000&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F21%2F2018%2F02%2F14%2Frecetas-4115-spaghetti-boloesa-facil-2000.jpg",
},
{
id: 2,
servings: 2,
time: "15m",
difficulty: "Medium",
title: "Pizza",
ingredients: ["dough", "tomato sauce", "cheese"],
directions: ["boil dough", "cook dough", "eat pizza"],
imageUrl:
"https://www.saborusa.com/wp-content/uploads/2019/10/Animate-a-disfrutar-una-deliciosa-pizza-de-salchicha-Foto-destacada.png",
featured: true,
},
{
id: 3,
servings: 6,
time: "1h",
difficulty: "Hard",
title: "Salad",
ingredients: ["lettuce", "tomato", "cheese"],
directions: ["cut lettuce", "cut tomato", "cut cheese"],
imageUrl:
"https://www.unileverfoodsolutions.es/dam/global-ufs/mcos/SPAIN/calcmenu/recipes/ES-recipes/In-Development/american-bbq-beef-salad/main-header.jpg",
},
],
showModal: false,
}),
methods: {
deleteRecipe() {
console.log("this.id");
this.recipeList.splice(this.recipeList.indexOf(this.id), 1);
},
},
});
</script>
Can you help me plz? Thanks
I tried to make and 'emit' but the emit stops on RecipeList.
Bootstrap asp.net framework begginer
I'm a little new to both Bootstrap and ASP.Net.
I'm trying to use an very simple example from Bootstrap homesite
where I just throw this into about.cshtml file.
The Bootstrap is version 3.4.1 on the ASP.Net and I'm choosing the 3rd version of the Bootstrap example but I'm not getting any table and just 3 stacked text besides each other. Is it the wrong version or am I not able to see the mistake? What am I doing wrong?
#{
ViewBag.Title = "About";
}
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
{
'id': 1,
'name': 'Item 1',
'price': '$1'
},
{
'id': 2,
'name': 'Item 2',
'price': '$2'
},
{
'id': 3,
'name': 'Item 3',
'price': '$3'
},
{
'id': 4,
'name': 'Item 4',
'price': '$4'
},
{
'id': 5,
'name': 'Item 5',
'price': '$5'
}
]
$table.bootstrapTable({ data: data })
})
</script>
My _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Your script tags need to be inside the Scripts section. Otherwise, you're trying to load them before the libraries they depend on.
#{
ViewBag.Title = "About";
}
<table id="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
#section Scripts {
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<script>
var $table = $('#table')
$(function () {
var data = [
{
'id': 0,
'name': 'Item 0',
'price': '$0'
},
...
]
$table.bootstrapTable({ data: data })
})
</script>
}
If you check the developer console in your browser with your current page, you'll see errors telling you that jQuery has not been loaded.
Exporting all records from Shield UI Grid
I am trying to export all data from a data grid. The shield UI example demo does export all records so I know it can be done! When I do it, it only exports the current pages data!
Java code snippets:
remote: {
read: {
type: "POST",
url: "/portals/ajax"
}
}
});
$("#manageportalsgrid").shieldGrid({
dataSource: portals,
sorting: {
multiple: true
},
selection: {
type: "row",
multiple: true,
toggle: false
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "portalID", width: "130px", title: "Portal ID" },
{ field: "overx", width: "130px", title: "Overworld X" },
{ field: "overy", width: "130px", title: "Overworld Y" },
{ field: "overz", width: "130px", title: "Overworld Z" },
{ field: "netherx", width: "130px", title: "Nether X" },
{ field: "nethery", width: "130px", title: "Nether Y" },
{ field: "netherz", width: "130px", title: "Nether Z" },
{ field: "portalowner", width: "130px", title: "Portal Owner"},
{ field: "description", width: "130px", title: 'Portal Description'},
{
field:"actions",
width: "200px",
title:"Actions",
columnTemplate: $("#portalEditTemplate").html() + $("#portalDeleteTemplate").html()
}
],
toolbar: [
{
buttons: [
{
commandName: "csv",
caption: '<span class="sui-sprite sui-grid-icon-export-csv"></span> <span class="sui-grid-button-text">Export to CSV</span>'
}
]
}
],
exportOptions: {
proxy: "/attachments/save",
csv: {
fileName: "Viikis Community Server portals " + getMonthforFile(),
dataSource: portals,
readDataSource: true
}
}
});
function getMonthforFile(){
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var now = new Date();
var thisMonth = months[now.getMonth()];
var year = now.getFullYear();
var monthyear = thisMonth +' ' + year;
return monthyear;
}
the datasource calls a php script that generates the data source, which outputs:
[{"portalID":"2","netherx":"63","nethery":"32","netherz":"-69","overx":"500","overy":"59","overz":"-550","description":"Carley_Guys Base","owner":"2","userID":"2","portalowner":"carley_guy"},{"portalID":"3","netherx":"66","nethery":"32","netherz":"112","overx":"531","overy":"57","overz":"892","description":"Krons Portal","owner":"3","userID":"3","portalowner":"Kron"},{"portalID":"4","netherx":"-19","nethery":"32","netherz":"-79","overx":"-150","overy":"64","overz":"-629","description":"Rosysian's Home","owner":"4","userID":"4","portalowner":"Rosysian"},{"portalID":"5","netherx":"-22","nethery":"32","netherz":"97","overx":"-178","overy":"59","overz":"776","description":"Budmeister's Portal","owner":"5","userID":"5","portalowner":"Budmeister91"},{"portalID":"6","netherx":"100","nethery":"32","netherz":"51","overx":"796","overy":"53","overz":"406","description":"Tired_Luvs Portal","owner":"6","userID":"6","portalowner":"Tired_Luvs"},{"portalID":"7","netherx":"47","nethery":"56","netherz":"-68","overx":"378","overy":"53","overz":"-547","description":"","owner":"7","userID":"7","portalowner":"EdenShieldex"},{"portalID":"9","netherx":"50","nethery":"32","netherz":"11","overx":"401","overy":"80","overz":"89","description":"","owner":"10","userID":"10","portalowner":"thewookie0"},{"portalID":"10","netherx":"165","nethery":"35","netherz":"139","overx":"1317","overy":"63","overz":"1113","description":"Viikis Jungle Portal","owner":"8","userID":"8","portalowner":"Viiki"},{"portalID":"11","netherx":"333","nethery":"32","netherz":"331","overx":"2661","overy":"68","overz":"2650","description":"Dummy Portal Beths Adventure","owner":"6","userID":"6","portalowner":"Tired_Luvs"},{"portalID":"12","netherx":"-32","nethery":"32","netherz":"43","overx":"-256","overy":"81","overz":"340","description":"egidasha's portal","owner":"31","userID":"31","portalowner":"egidasha"},{"portalID":"13","netherx":"-58","nethery":"34","netherz":"-7","overx":"-464","overy":"71","overz":"-52","description":"Psylences Portal","owner":"23","userID":"23","portalowner":"Psylence33"},{"portalID":"14","netherx":"-33","nethery":"32","netherz":"25","overx":"-262","overy":"77","overz":"199","description":"Viikis Portal Near Spawn","owner":"8","userID":"8","portalowner":"Viiki"},{"portalID":"15","netherx":"-41","nethery":"32","netherz":"26","overx":"-330","overy":"64","overz":"206","description":"Pengdonuts Portal","owner":"19","userID":"19","portalowner":"PengDonut"},{"portalID":"16","netherx":"-24","nethery":"32","netherz":"-112","overx":"-193","overy":"63","overz":"-898","description":"RocWolfes Portal","owner":"14","userID":"14","portalowner":"RocWolfe"},{"portalID":"17","netherx":"32","nethery":"32","netherz":"-133","overx":"256","overy":"59","overz":"-1066","description":"MysteryMuffins' Portal","owner":"11","userID":"11","portalowner":"meepymuffins"},{"portalID":"18","netherx":"-24","nethery":"32","netherz":"83","overx":"-193","overy":"105","overz":"663","description":"Moi33","owner":"25","userID":"25","portalowner":"MoiXtra"},{"portalID":"19","netherx":"-56","nethery":"32","netherz":"21","overx":"-450","overy":"51","overz":"166","description":"Jerv's Portal","owner":"21","userID":"21","portalowner":"jervi_servi"},{"portalID":"20","netherx":"19","nethery":"32","netherz":"12","overx":"154","overy":"66","overz":"98","description":"Br3admakesufat's Portal","owner":"24","userID":"24","portalowner":"BR3ADMAKESUFAT"},{"portalID":"22","netherx":"96","nethery":"32","netherz":"113","overx":"771","overy":"65","overz":"906","description":"BentlyEU's Portal","owner":"26","userID":"26","portalowner":"bentley"},{"portalID":"23","netherx":"60","nethery":"32","netherz":"78","overx":"483","overy":"63","overz":"621","description":"hozbombs Portal","owner":"29","userID":"29","portalowner":"hozbomb"},{"portalID":"24","netherx":"-8","nethery":"32","netherz":"5","overx":"-64","overy":"96","overz":"36","description":"sushis Portal","owner":"27","userID":"27","portalowner":"thereal_sushi"},{"portalID":"25","netherx":"-64","nethery":"32","netherz":"68","overx":"-509","overy":"72","overz":"547","description":"ikxrleys Portal","owner":"32","userID":"32","portalowner":"ikxrley"},{"portalID":"26","netherx":"-67","nethery":"32","netherz":"-6","overx":"-532","overy":"64","overz":"-46","description":"wizard1011's Portal","owner":"30","userID":"30","portalowner":"superswag3211"},{"portalID":"27","netherx":"-50","nethery":"32","netherz":"41","overx":"-400","overy":"66","overz":"324","description":"WW__WW's Portal","owner":"29","userID":"29","portalowner":"hozbomb"},{"portalID":"28","netherx":"-44","nethery":"32","netherz":"6","overx":"-352","overy":"67","overz":"51","description":"hippert02s Portal","owner":"33","userID":"33","portalowner":"hippert"},{"portalID":"29","netherx":"67","nethery":"32","netherz":"50","overx":"535","overy":"65","overz":"398","description":"FaithfulSO3s Portal","owner":"28","userID":"28","portalowner":"ixfaithful"},{"portalID":"30","netherx":"156","nethery":"32","netherz":"143","overx":"1245","overy":"11","overz":"1141","description":"Bud's Jungle Portal","owner":"5","userID":"5","portalowner":"Budmeister91"},{"portalID":"31","netherx":"192","nethery":"32","netherz":"-252","overx":"1532","overy":"65","overz":"-2013","description":"VirusBB8's base","owner":"17","userID":"17","portalowner":"VirusBB8"},{"portalID":"32","netherx":"-150","nethery":"32","netherz":"-151","overx":"-1197","overy":"22","overz":"-1205","description":"End Portal Room","owner":"3","userID":"3","portalowner":"Kron"},{"portalID":"34","netherx":"244","nethery":"32","netherz":"249","overx":"1950","overy":"68","overz":"1993","description":"NorwegianGreaser Home","owner":"22","userID":"22","portalowner":"NorwegianGreaser"},{"portalID":"35","netherx":"-22","nethery":"15","netherz":"54","overx":"-172","overy":"75","overz":"430","description":"LordPapi_s Portal","owner":"12","userID":"12","portalowner":"Lordpapi_"},{"portalID":"36","netherx":"642","nethery":"32","netherz":"633","overx":"5133","overy":"70","overz":"5067","description":"Middle of the sea","owner":"22","userID":"22","portalowner":"NorwegianGreaser"},{"portalID":"37","netherx":"548","nethery":"32","netherz":"272","overx":"4385","overy":"70","overz":"2172","description":"Desert into soul sand valley","owner":"35","userID":"35","portalowner":"iamtehnub"},{"portalID":"38","netherx":"140","nethery":"32","netherz":"56","overx":"1123","overy":"70","overz":"450","description":"Mountain biome port","owner":"35","userID":"35","portalowner":"iamtehnub"},{"portalID":"39","netherx":"405","nethery":"32","netherz":"219","overx":"3237","overy":"65","overz":"1753","description":"","owner":"22","userID":"22","portalowner":"NorwegianGreaser"},{"portalID":"43","netherx":"-110","nethery":"32","netherz":"-130","overx":"-880","overy":"97","overz":"-1040","description":"TmacMusic's Base","owner":"1","userID":"1","portalowner":"TmacMusic"}]
Here is the manage portal view code
<?php require APPROOT . '/views/inc/header.php'; ?>
<h1><?php echo $data['title']; ?></h1>
<div id="adminFlex">
<?php require APPROOT . '/views/inc/navadmin.php'; ?>
<div id="adminDashBoard" class="dashboard">
<script type="text/x-shield-template" id="portalEditTemplate">
<a class="btn btn-info" href="/portals/edit/{portalID}">Edit</a>
</script>
<script type="text/x-shield-template" id="portalDeleteTemplate">
<button type="button" class="btn btn-danger" id="delete" data-target="#confirmDeletePortal" data-toggle="modal" data-portalid="{portalID}">Delete</button>
</script>
<div class="row">
<div id="manageportalsgrid" class="center">
</div>
<button class="btn-info" onclick="refreshManagePortalData()">Refresh Portals</button>
<button class="btn-danger" data-target="#confirmDeleteAllPortals" data-toggle="modal">Delete All Portals</button>
</div>
<!-- Delete portal by ID Modal -->
<div class="modal fade" id="confirmDeletePortal" tabindex="-1" role="dialog" aria-labelledby="confirmDeletePortalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmDeletePortalLabel">Delete portal?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this portal?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<form action="<?php echo URLROOT; ?>portals/delete/" method=post>
<input type="hidden" id="delportalID" name="portalID" value="">
<input type="submit" class="btn btn-danger" name="action" value="delete"/>
</form>
</div>
</div>
</div>
</div>
<!-- Delete All Portals Modal -->
<div class="modal fade" id="confirmDeleteAllPortals" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteAllPortalsLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmDeleteAllPortalsModalLabel">Delete All Portals?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete all the portals?
</div>
<div class="modal-footer">
<form action="<?php echo URLROOT; ?>portals/clear/" method=post>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<input type="submit" name="yes" value="yes" class="btn btn-primary"/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<?php require APPROOT . '/views/inc/footer.php'; ?>
My issue is that it only ever exports the current page, not the entire record set. The documentation says you should set the readDataSource to true for it to do so, but it's not working.
Thanks in advance for any help.
I think the readDataSource option is ignored if the datasources and or their variables are Identical. I duplicated the the portals datasource and made the copy exportportals like so:
var portals = new shield.DataSource({
remote: {
read: {
type: "POST",
url: "/portals/ajax"
}
}
});
var exportportals = new shield.DataSource({
remote: {
read: {
type: "POST",
url: "/portals/ajax"
}
}
});
Then I changed the dataSources for the grid and the export dataSources respectively:
$("#manageportalsgrid").shieldGrid({
dataSource: portals,
sorting: {
multiple: true
},
selection: {
type: "row",
multiple: true,
toggle: false
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "portalID", width: "130px", title: "Portal ID" },
{ field: "overx", width: "130px", title: "Overworld X" },
{ field: "overy", width: "130px", title: "Overworld Y" },
{ field: "overz", width: "130px", title: "Overworld Z" },
{ field: "netherx", width: "130px", title: "Nether X" },
{ field: "nethery", width: "130px", title: "Nether Y" },
{ field: "netherz", width: "130px", title: "Nether Z" },
{ field: "portalowner", width: "130px", title: "Portal Owner"},
{ field: "description", width: "130px", title: 'Portal Description'},
{
field:"actions",
width: "200px",
title:"Actions",
columnTemplate: $("#portalEditTemplate").html() + $("#portalDeleteTemplate").html()
}
],
toolbar: [
{
buttons: [
{
commandName: "csv",
caption: '<span class="sui-sprite sui-grid-icon-export-csv"></span> <span class="sui-grid-button-text">Export to CSV</span>'
}
]
}
],
exportOptions: {
proxy: "/attachments/save",
csv: {
fileName: "Viikis Community Server portals " + getMonthforFile(),
dataSource: exportportals,
readDataSource: true
}
}
});
Now the Grid shows with the pagination and when exporting all the records get exported!
Displaying multiple columns in single carousel item with Bootstrap carousel
So I am able to have four columns in single item at a time , but when I implement 'carousel' class (4th div in html file) then the first two item displays fine. But in the last item as it should only have 2 columns with task name 9 and 10, instead task name 1 and 5 are also displayed there.
if I don't implement carousel class then data displays fine but carousel buttons stops working.
' I've already tried different solutions provided on stack overflow. '
here is my HTML file
<!-- my tasks -->
<div class="row mt-3 mb-3">
<div class="col-md-12">
<!-- carousel -->
<div class="row mx-auto my-auto">
<div id="myTaskDiv" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100">
<!-- carousel item -->
<div class="carousel-item {{ i == 0 ? 'active' : '' }}" *ngFor="let chunkMyTask of productData ;let i =index;">
<!--widget-->
<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let myTask of chunkMyTask">
<div class="widget border">
<div class="widget-body">
{{myTask.name}}
</div>
</div>
<!--widget end-->
</div>
<!-- carousel item end-->
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" role="button" href="#myTaskDiv" data-slide="prev">
<i class="fa fa-angle-left fa-3x" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" role="button" href="#myTaskDiv" data-slide="next">
<i class="fa fa-angle-right fa-3x" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
<!-- carousel controls end-->
</div>
<!-- carousel end -->
</div>
</div>
<!-- my tasks end-->
then this below is my .ts file
import { Component, OnInit } from '#angular/core';
import { task } from '../task';
import { TasksService } from '../tasks.service';
import { MyTaskServiceService } from 'src/app/dashboard/my-tasks/my-task-service.service';
#Component({
selector: 'app-my-tasks',
templateUrl: './my-tasks.component.html',
styleUrls: ['./my-tasks.component.css']
export class MyTasksComponent {
title = 'Carousel';
productData: any;
private myTasks: any;
private myTaskArray: any;
constructor(private myTaskService: MyTaskServiceService) { }
chunks(array, size) {
let results :any;
results = [];
while (array.length) {
results.push(array.splice(0, size));
this.num=this.num+1;
}
return results;
}
ngOnInit() {
this.myTaskService.get_New_Products().subscribe(
data => {
this.productData = this.chunks(data.json(), 4);
console.log(this.productData);
});
}
}
And at last this below is my json file:
[
{
"taskType": "myTask",
"name": "Task 1"
},
{
"taskType": "myTask",
"name": "Task 2"
},
{
"taskType": "myTask",
"name": "Task 3"
},
{
"taskType": "myTask",
"name": "Task 4"
},
{
"taskType": "myTask",
"name": "Task 5"
},
{
"taskType": "myTask",
"name": "Task 6"
},
{
"taskType": "myTask",
"name": "Task 7"
},
{
"taskType": "myTask",
"name": "Task 8"
},
{
"taskType": "myTask",
"name": "Task 9"
},
{
"taskType": "myTask",
"name": "Task 10"
}
]
Ui-grid column gets expand on hover
I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.
Here is my file.
HTML File
<div class="full-panle-body">
<div class="row user-view-grid" ng-show="gridOptions.data.length > 0 && userLoaded">
<div ui-grid="gridOptions" ui-grid-auto-resize ui-grid-cellNav ui-grid-edit ui-grid-resize-columns ui-grid-pinning ng-style="getTableHeight()"></div>
</div>
<div class="row loading-spinner" ng-hide="userLoaded">
<div class="col-xs-3"></div>
<div class="loading col-xs-6">
<span rel='spinner' class='data-spinner'></span>
<div class="loading-text">{{::'label.loading.user.list' | translate}}</div>
</div>
<div class="col-xs-3"></div>
</div>
<div class="no-records" ng-show="!numberRecordsFound && userLoaded">
{{:: 'text.search.no.records' | translate }}
</div>
</div>
<!-- html template for status -->
<script type="text/ng-template" id="statusCell-template.html">
<div ng-click="grid.appScope.onUserDetails(row.entity)" class="inner-data-cell-center">
<div style="text-align:center;">
<i class="fa fa-envelope-o" aria-hidden="true" style="color:grey;" ng-show="'added' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-envelope-o" aria-hidden="true" style="color:blue;" ng-show="'notified' == row.entity.registrationStatus.toLowerCase()"></i>
<i class="fa fa-check" aria-hidden="true" style="color:green;" ng-show="'complete' == row.entity.registrationStatus.toLowerCase()"></i>
</div>
<div style="text-align:center;" class="smaller-grey">{{row.entity.registrationStatus}}</div>
</div>
</script>
<script type="text/ng-template" id="name-template.html">
<div class="ui-grid-cell-contents" ng-click="grid.appScope.onUserDetails(row.entity)">
<div class="name-style">{{row.entity.lastName}}, {{row.entity.firstName}}</div>
<div class="email-style">{{row.entity.email}}</div>
</div>
</script>
<!-- html template for organization -->
<script type="text/ng-template" id="organization-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span class="dummy">{{row.entity.organization}}</span>
</div>
</script>
<!-- html template for username -->
<script type="text/ng-template" id="username-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span>{{row.entity.userName}}</span>
</div>
</script>
<!-- html template for Account Status -->
<script type="text/ng-template" id="accountstatus-template.html">
<div class="single-elm-style" ng-click="grid.appScope.onUserDetails(row.entity)">
<span ng-show="row.entity.isActive">Enabled</span>
<span ng-show="!row.entity.isActive">Disabled</span>
</div>
</script>
CSS File
.ui-grid-row:hover{
border-left: solid 6px #hoverBlue;
}
JS File
$scope.gridOptions = {
rowHeight: 60,
multiSelect: false,
enableColumnMenus: false,
enableEdit: false,
enableSoring: true,
columnDefs: [
{
name: 'registrationStatus',
width: "15%",
displayName: 'Status',
headerCellClass: 'grid-header-center',
cellClass: 'grid-data-cell',
cellTemplate: 'statusCell-template.html'
},
{
name: 'lastName',
width: "30%",
displayName: 'Name',
headerCellClass: 'grid-header-left',
cellTemplate: 'name-template.html'
},
{
name: 'organization',
width: "15%",
displayName: 'Organization',
headerCellClass: 'grid-header-left',
cellTemplate: 'organization-template.html'
},
{
name: 'userName',
width: "20%",
displayName: 'Username',
headerCellClass: 'grid-header-left',
cellTemplate: 'username-template.html'
},
{
name: 'isActive',
width: "20%",
displayName: 'Account Status',
headerCellClass: 'grid-header-left',
cellTemplate: 'accountstatus-template.html'
}
]
};
Hi.I am using ui-grid in angular which has 5 columns. on hover of grid options columns are getting expanded towards right side.