I want to display pagination with record count both at top and bottom. By default its displaying at the bottom of the kendo grid angular.
Can anyone tell me how to show both top and bottom?
Yes it is possible with some "hacking" of kendo grid templates.
There is a ticket submitted regarding this to Telerik team:
https://feedback.telerik.com/kendo-angular-ui/1360833-add-an-option-to-place-the-grid-pager-on-top-and-or-bottom?_ga=2.25947124.872125813.1622645938-1424594580.1622645938
'In order to show the Grid Pager at the top and bottom of the Grid, the Toolbar and the Pager template can be used together, as shown in the following example:'
https://stackblitz.com/edit/angular-ajraak-nwa5pq
It is worth mentioning, that the described custom approach is not fully tested and supported. Therefore, further modification might be needed.
Full code:
import { Component, ViewEncapsulation } from "#angular/core";
import { products } from "./products";
import { GridDataResult, PageChangeEvent } from "#progress/kendo-angular-grid";
#Component({
selector: "my-app",
template: `
<kendo-grid
[kendoGridBinding]="data"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="true"
[height]="400"
>
<ng-template
kendoGridToolbarTemplate
kendoPagerTemplate
[position]="'bottom'"
>
<div class="k-pager-wrap k-grid-pager k-widget">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons
[buttonCount]="5"
></kendo-pager-numeric-buttons>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-info></kendo-pager-info>
</div>
</ng-template>
<kendo-grid-column field="ProductID" title="ID" width="40">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Name" width="250">
</kendo-grid-column>
<kendo-grid-column
field="UnitPrice"
title="Price"
width="80"
format="{0:c}"
>
</kendo-grid-column>
</kendo-grid>
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
.k-grid-pager {
order: -1;
border-width: 0 0 1px;
width: 100%;
}
`
]
})
export class AppComponent {
public data: any[] = products;
public pageSize = 10;
public skip = 0;
}
Related
I created this codepen, which is a simple flip card and it works fine in codepen, but when I add this project in my vue project created with cli, everything works fine; upon clicking a card, it shows back of the card, but it doesn't apply that transition so user can visually see that it is rotating. It rotates very fast, sounds like transition is not effecting.
This is the template code
<div v-for="card in cards" #click="toggleCard(card)" :key="card.id">
<transition name="flip">
<div
v-bind:key="card.flipped"
v-html="card.flipped ? card.back : card.front"
></div>
</transition>
</div>
and the script code
export default {
name: "FlipCard",
data() {
return {
cards: [
// cards here
],
};
},
methods: {
toggleCard: function (card) {
const isFlipped = card.flipped;
this.cards.forEach((strategy) => {
strategy.flipped = false;
});
isFlipped === true ? (card.flipped = false) : (card.flipped = true);
},
},
};
and css code:
.flip-enter-active {
transition: all 2s ease;
}
.flip-leave-active {
display: none;
}
.flip-enter,
.flip-leave {
transform: rotateY(180deg) !important;
opacity: 0;
}
can anyone help why in vue cli project the transition is so fast or maybe not applying?
Thank you in advance
The codepen you provided uses Vue 2. Your question is tagged Vue 3, so I assume you are using Vue 3.
Vue 3 made changes to transition class names - https://v3-migration.vuejs.org/breaking-changes/transition.html#_2-x-syntax.
-enter and -leave are now -enter-from and -leave-from.
Following the example in the docs, I'm using transition-group for a list of items. Strangely it works when items appear (enter), not when they disappear (leave), meaning they slide down in an animated fashion when appearing, but disappear instantly without animation: the leave animation failed. Why?
<template>
<div v-if="notifications.length">
<transition-group name="notifications">
<span
v-for="notification in notifications"
:key="notification.id"
>
<!-- content -->
</span>
</transition-group>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
notifications: state => state.notifications.notifications
})
}
}
</script>
<style lang="scss" scoped>
.notifications-enter-active,
.notifications-leave-active {
transition: all 0.5s;
}
.notifications-enter {
transform: translateY(-100%);
}
.notifications-leave-to {
opacity: 0;
}
</style>
Store
export const mutations = {
DELETE_NOTIFICATION (state, id) {
state.notifications.splice(
state.notifications.findIndex(item => item.id === id),
1
)
}
}
I couldn't reproduce the exact symptom with that code (demo 1), which only transitions on leave instead of enter in your scenario. The reason for that is because the span is display: inline, which prevents the transition.
The Vue docs provide a tip for this:
One important note is that these FLIP transitions do not work with elements set to display: inline. As an alternative, you can use display: inline-block or place elements in a flex context.
So, you can apply display: flex on the transition-group:
<template>
<transition-group class="container">
...
</transition-group>
</template>
<style>
.container {
display: flex;
}
</style>
demo 2
Or display: inline-block on the span to be transitioned:
<template>
<span class="notification-item">
...
</span>
</template>
<style>
.notification-item {
display: inline-block;
}
</style>
demo 3
Turns out by replacing <div v-if="notifications.length"> with <div v-if="notifications"> transitions now work. Even though this doesn't make any sense to me.
If anyone can explain in a comment that'd be nice :)
Trying initialize custom elements (3 buttons) in for loop but first element missing text.
LeftMenu.vue
<template>
<div id="left-menu">
<MenuButton v-for="mytext in buttonList" v-bind:key="mytext" v-bind:mytext="mytext"/>
</div>
</template>
<script>
import MenuButton from './components/MenuButton.vue'
export default {
name: 'left-menu',
components: {
MenuButton
},
computed: {
buttonList() {
return ["Test1", "Test2", "Test3"];
}
}
}
</script>
<style>
#left-menu {
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
MenuButton.vue
<template>
<div id="left-menu-button">
{{mytext}}
</div>
</template>
<script>
export default {
name: 'left-menu-button',
props: {
mytext: String
}
}
</script>
<style>
#left-menu-button {
width: 180px;
height: 50px;
margin-left: 10px;
margin-bottom: 5px;
}
</style>
main.js
import Vue from 'vue'
import LeftMenu from './LeftMenu.vue'
import MenuButton from './components/MenuButton.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(LeftMenu)
}).$mount('#left-menu')
new Vue({
render: h => h(MenuButton)
}).$mount('#left-menu-button');
I am new to vue and still trying to figure out how all part are connected and working together. It just seems very strange that I got 3 buttons but only last two of them have text and first one does not...may be someone can point me to my mistake.
You've assigned an id of left-menu-button to each of your buttons. You've then told Vue to mount something into that id. The first element (i.e. first button) with that id will be treated as the mounting element, which blows away the text.
You should remove the ids from all elements within your templates. The only id should be the one within your HTML file. For styling purposes use classes instead of ids. Then create a single Vue instance (just one call to new Vue, not two) targeting the id of the element inside your HTML file.
It is possible to create multiple Vue instance directly using new Vue but that is rarely necessary. To do that you would need to have multiple target elements within your HTML file.
I'm using a v-carousel with some images and I want the slides between the itens to be slower/smoother.
What would be an elegant way to do it?
<v-carousel interval="5000" :height="window.height - 48" hide-controls hide-delimiters>
<v-carousel-item :src="congresso">
</v-carousel-item>
<v-carousel-item :src="stf">
</v-carousel-item>
<v-carousel-item :src="tse">
</v-carousel-item>
</v-carousel>
I did that with the help of Vuetify’s transition helper function that lets you to define your own transition.
First if you did not add variables.scss file into your project you must do that with the help of this link from official documentation. Then you can add your own custom transition to that file. Here I used the original fade-transition of vuetify and only changed the transition time:
/* the variables.scss file */
.new-transition {
&-leave-active {
position: absolute;
}
&-enter-active, &-leave, &-leave-to {
transition: 100ms; /* here you can define your desired time for transition */
}
&-enter, &-leave-to {
opacity: 0
}
}
After that in your .vue file you can use createSimpleTransition of vuetify and register that in "mounted" hook as follow:
<template>
<section>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
reverse-transition="new-transition"
transition="new-transition"
></v-carousel-item>
</v-carousel>
</section>
</template>
<script>
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition';
export default {
name: 'Carousel',
data () {
return {
items: [
{
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
},
{
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
},
],
}
},
mounted() {
const newTransition = createSimpleTransition('new-transition');
this.$once("hook:components", () => {
newTransition
})
}
}
</script>
Now you can use new-transition that were defined in your carousel and the time that you has set in variables.scss will affect in your carousel.
<b-carousel
id="carousel-1"
v-model="slide"
:interval="1000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
>
I have just tried this and it works
interval is written like this :interval="nubmer" it has : so try to put that :
Add this to your variables.scss file:
.v-window {
&-x-transition,
&-x-reverse-transition,
&-y-transition,
&-y-reverse-transition {
&-enter-active,
&-leave-active {
transition: 1.1s cubic-bezier(0.25, 0.8, 0.5, 1) !important;
}
}
}
change the first param (here 1.1s) in the transition variable to set the overall speed.
*From https://github.com/vuetifyjs/vuetify/issues/7476
For a button, by default Bootstrap 4 allow you to set default button "size" between : xs, sm, md, lg, xl.
So, in my code, small screen first, i use sm size for screen <576px :
<button type="button" class="btn btn-success btn-sm"></button>
But for xl screen ≥1200px, need i to change size attribute or something else with Bootstrap to adjust button size ?
I don't really understand Bootstrap responsive behavior for button and 'size' attribute between small and large screen.
Thanks.
I don't think there's anything built out of the box for responsive buttons in bootstrap, you'd probably be better off extending the existing bootstrap button sizes in sass/media queries ie
.responsive-button {
#media (min-width: 576px) { #extend .btn-sm }
#media (min-width: 768px) { #extend .btn-md }
}
I haven't tested this so may need to research a bit further but hopefully this gets you on track :)
According to the Vue.js documentation, i had finally computed my CSS class dynamically according to window.onresizeevent call in mounted () function.
Example :
Here is my Bootstrap button :
<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
<font-awesome-icon icon="search"/>
</b-button>
Here is my function in App.vue file:
<script>
export default {
name: 'topnavbar',
data () {
return {
nsize: "sm",
mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
}
},
mounted () {
if (window.addEventListener) {
window.addEventListener("resize", this.updateSize, false);
} else if (window.attachEvent) {
window.attachEvent("onresize", this.updateSize);
}
},
methods : {
updateSize: function (){
let sizeEl = "md";
let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if(width <= 576){
sizeEl = "sm";
}
this.nsize = sizeEl;
}
}
}
</script>
Sources:
Get the browser viewport dimensions with JavaScript
https://fr.vuejs.org/v2/guide/class-and-style.html