I would like ta dd buttons in a kendo-panelbar-item.
Is that possible?
<kendo-panelbar>
<kendo-panelbar-item title="Heroes" >
<kendo-panelbar-item *ngFor="let hero of heroes" title={{hero.name}} >
//add buttons here
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
I cannot see a problem with adding buttons inside the PanelBar item.
<kendo-panelbar>
<kendo-panelbar-item title="My Teammates" expanded="true">
<template kendoPanelBarContent>
<button kendoButton>Button</button>
</template>
</kendo-panelbar-item>
</kendo-panelbar>
See this plunkr
It's not template but ng-template
<ng-template kendoPanelBarContent>
<button kendoButton>Button</button>
</ng-template>
Related
I am using a list of expansion panels inside virtual-scroll using scrollWindow,
it works fine until I put this virtual scroll in matSideNav.
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-accordion multi>
<cdk-virtual-scroll-viewport itemSize="50" scrollWindow>
<mat-expansion-panel *cdkVirtualFor="let item of items">
<mat-expansion-panel-header>
<mat-panel-title>
{{item}}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<div>
Content for {{item}}
</div>
<div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div>
</div>
</mat-expansion-panel>
</cdk-virtual-scroll-viewport>
</mat-accordion>
</mat-sidenav-container>
when I expand an expansion panel, the side-nav shows its own scroll instead of varying the height of the virtual scroll.
here is the scenario.
steps to recreate the issue
scroll to the bottom
expand the last item
I am using:
angular15
material-design 15
I built a data grid using
Kendo Angular Grid in which i have given size to each columns and also has command button "Edit, Update, Cancel" as very last columns.
Due to size of columns, grid gets horizontal scroll bars.
Editing is allowed only in last two field columns.
When ever i click on "Edit" button the row scrolls to very left and my editable columns + command buttons ("update"&"cancel") hided this is something weird or not liking to user. Again user has to scroll to right and do the update/cancel operation.
Does any one has solution to this issue.
<kendo-grid [kendoGridBinding]="view" [height]="700" [pageSize]="25" [pageable]="true" [sortable]="true" [selectable]="true"
(dataStateChange)="onStateChange($event)" (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
(save)="saveHandler($event)">
<!-- <kendo-grid-messages
noRecords="{{ this.noRecordMsg }}">
</kendo-grid-messages> -->
<kendo-grid-column title="View" width="60">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<button kendoButton [icon]="'hyperlink-open'" [look]="'outline'" [routerLink]="['/detail', dataItem.ID]"></button>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="FILE_NAME" title="File Name" width="140"></kendo-grid-column>
<kendo-grid-column field="FILE_DATE" title="File Date" width="90">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.FILE_DATE | date:"shortDate" }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="AMT" title="AMT" width="80"></kendo-grid-column>
<kendo-grid-column field="NAME" title="Name" width="90"></kendo-grid-column>
<kendo-grid-column field="ID" title="ID" width="80"></kendo-grid-column>
<kendo-grid-column field="PI" title="PI" width="110">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="PIListItems" [value]="dataItem.PI" [(ngModel)]="dataItem.PI" name="PI"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="STATUS" title="Status" width="100">
<ng-template kendoGridEditTemplate let-dataItem="dataItem">
<kendo-dropdownlist [data]="statusListItems" [value]="dataItem.STATUS" [(ngModel)]="dataItem.STATUS" name="STATUS"></kendo-dropdownlist>
</ng-template>
</kendo-grid-column>
<kendo-grid-command-column title="command" width="180">
<ng-template kendoGridCellTemplate let-isNew="isNew" let-dataItem="dataItem">
<button kendoGridEditCommand class="k-primary">Edit</button>
<button kendoGridSaveCommand [disabled]="myForm.invalid">{{ isNew ? 'Add' : 'Update' }}</button>
<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' : 'Cancel' }}</button>
</ng-template>
</kendo-grid-command-column>
<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
<kendo-pager-prev-buttons></kendo-pager-prev-buttons>
<kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
<kendo-pager-info></kendo-pager-info>
<kendo-pager-next-buttons></kendo-pager-next-buttons>
<kendo-pager-page-sizes [pageSizes]="[25, 50, 100, 200]"></kendo-pager-page-sizes>
</ng-template>
</kendo-grid>
I don't see how exactly your edit handler looks like but Grid have (edit) emitter according to the documentation.
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/
I believe if you add this in template:
<kendo-grid (edit)="onGridEdit($event)">...</kendo-grid>
And then in the component try add the following:
onGridEdit($event: any): void {
$event.preventDefault();
$event.stopPropagation();
}
It will help.
I'm trying to center a <v-btn> into a <v-flex>. Since <v-flex> is a flexbox div, I use justify-center that is transformed into
justify-content: center
Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem.
https://codepen.io/anon/pen/ZXLzex
I want to signup the button to be centered inside the div (v-flex).
Here is the full code:
<v-card>
<v-card-text >
<v-text-field label="Email"></v-text-field>
<v-text-field label="Password"></v-text-field>
</v-card-text>
<v-card-actions>
<v-layout row>
<v-flex justify-center>
<v-btn primary>
Signup
</v-btn>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
wrap button inside <div class="text-xs-center">
<div class="text-xs-center">
<v-btn primary>
Signup
</v-btn>
</div>
Dev uses it in his examples.
For centering buttons in v-card-actions we can add class="justify-center" (note in v2 class is text-center (so without xs):
<v-card-actions class="justify-center">
<v-btn>
Signup
</v-btn>
</v-card-actions>
Codepen
For more examples with regards to centering see here
<v-layout justify-center>
<v-card-actions>
<v-btn primary>
<span>SignUp</span>
</v-btn>
</v-card-actions>
</v-layout>
It works for me using the v-layout in the following way:
<v-layout justify-center>
<div class="text-center ma-5">
<v-card-actions>
<v-btn primary>
<span>LogIn</span>
</v-btn>
</v-card-actions>
</div>
</v-layout>
vuetify's v-layout allows you to modify all the elements inside the layout.
v-flex does not have a display flex!
Inspect v-flex in your browser and you will find out it is just a simple block div.
So, you should override it with display: flex in your HTML or CSS to make it work with justify-content.
I have the following panelbar:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="menuItem.title" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active">
<kendo-panelbar-item [title]="menuItemSub.title" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active">
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
An example of the generated item is like this:
<kendo-panelbar-item routerlinkactive="active" tabindex="0" ng-reflect-router-link="/dashboard-edge"
ng-reflect-router-link-active="active" ng-reflect-title="Dashboard Edge"
ng-reflect-icon-class="fa fa-lg fa-window-maximize" role="treeitem"
class="k-item k-state-default " id="k-panelbar-item-default-1" aria-selected="false">
<span class="k-link k-header">
<!--bindings={"ng-reflect-ng-if": "fa fa-lg fa-window-maximize"}-->
<span class="k-icon fa fa-lg fa-window-maximize" ng-reflect-klass="k-icon"
ng-reflect-ng-class="[object Object]">
</span>
<!--bindings={"ng-reflect-ng-if": ""}-->
Dashboard Edge
<!--bindings={}-->
<!--bindings={"ng-reflect-ng-if": "false"}-->
</span>
<!--bindings={"ng-reflect-ng-if": "false"}-->
</kendo-panelbar-item>
How can I customize the content of the item (with HTML) so that I can get more control of how the information is displayed? For instance, I would like to have the title wrapped in a <span> tag with some specific class.
I'm able to customize the content using templates, but not the header itself.
Telerik support helped me with this.
Basically, you only need to:
Pass null to [title] binding
And create the ng-template with the kendoPanelBarItemTitle directive
Here is an example:
<kendo-panelbar *ngIf="mainMenu"
[expandMode]="expandMode">
<kendo-panelbar-item [title]="null" *ngFor="let menuItem of mainMenu" iconClass="fa fa-lg {{menuItem.faIcon}}"
[routerLink]="menuItem.link" routerLinkActive="active" [attr.name]="menuItem.name">
<ng-template kendoPanelBarItemTitle>
<span class="item-title">{{menuItem.title}}</span>
</ng-template>
<kendo-panelbar-item [title]="null" *ngFor="let menuItemSub of menuItem.sub"
[routerLink]="menuItemSub.link" routerLinkActive="active" [attr.name]="menuItemSub.name">
<ng-template kendoPanelBarItemTitle>
<span class="sub item-title">{{menuItemSub.title}}</span>
</ng-template>
</kendo-panelbar-item>
</kendo-panelbar-item>
</kendo-panelbar>
Example provided by Telerik guys: example
I have this code in ionic and the problem is that the grid layout isn't showing and the side menu is working well, any help will be great.
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-round"</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>About Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Contact Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Gallery</ion-item>
</ion-list>
<ion-list>
<ion-item>News</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<div class="row">
<div class="col-50"> Gallery</div>
</div>
</ion-content>
</body>
Why are you opening a new ion-list to every item? Shouldn't you just use one list and inserting the items you want in it?
This way can cause problems in the scroll, any kind of distribution you want to apply to the elements should be done by css.