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.
Related
Please help!
I cannot click the first item in the radlistview on IOS (onItemSelected is not triggered), however it is working fine on android.
My code:
<GridLayout class="p-x-10">
<RadListView
class="users"
loadOnDemandMode="Auto"
pullToRefresh="true"
selectionBehavior="Press"
[items]="userPaginator.docs"
(itemSelected)="onItemSelected($event)"
(loadMoreDataRequested)="onLoadMoreItemsRequested($event)"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
>
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="vertical" class="users__card">
<Label class="users__card-name" [text]="item.name"></Label>
<Label class="users__card-username" [text]="item.username"></Label>
<Label class="users__card-userId" [text]="item.userId"></Label>
<Label class="users__card-email" [text]="item.email"></Label>
<Label class="users__card-phone" [text]="item.phone"></Label>
</StackLayout>
</ng-template>
</RadListView>
<ActivityIndicator
rowSpan="1"
[busy]="isPageLoading"
[visibility]="isPageLoading ? 'visible' : 'collapse'"
horizontalAlignment="center"></ActivityIndicator>
</GridLayout>
Instead of OnItemSelected you can use tap event of StackLayout
<StackLayout orientation="vertical" class="users__card" (tap)="onItemSelected($event)">
I have the following angular html component:
<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">
<div flex class="item item-1" fxFlex="95%">
<mat-form-field class="large-field">
<input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
<mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
<span>{{ data.FullName }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div flex class="item item-2" fxFlex="4%">
<button matTooltip="Refresh" mat-icon-button (click)="refresh()">
<mat-icon>refresh</mat-icon>
</button>
</div>
</div>
What above does is showing an auto complete drop-down plus a refresh button. I am struggling to style above html to show something like the following picture:
However it looks like the following which is not the desired output:
What should I change to achieve the first image? I want the input field to take 95% width of the row and a small refresh button right next to it aligned to the right.
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
How do I align text to the right on a
<kendo-grid-column>
</kendo-grid-column>
because both
<kendo-grid-column field="margin" title="Margin" style="text-align: right;">
</kendo-grid-column>
and
<kendo-grid-column field="margin" title="Margin" text-align="right">
</kendo-grid-column>
dont work. Please could someone help?
This one should be work
.k-header .k-link{
text-align: right;
}
you can use this one also for specific one
[headerStyle]="{'text-align': 'right'}"
[style]="{'text-align': 'right'}"
You can easily do it with a template:
<template kendoGridCellTemplate let-dataItem>
<span class="right-align">{{dataItem.ProductName}}</span>
</template>
See this plunkr
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>