How can I get ride of the space between the first data point and the y-axis of a line chart.
Or in other words how can the category axis start exactly at the value axis?
Using multiple select mode and paging with a custom key for determining selection and your built in selection directive.
If you select a row on one page of data and then go to another page and select a row WITHOUT holding CTRL, the selected item on the first page remains selected instead of clearing. This is not what I would expect and not what it does without using the custom key/directive features. Especially since it will clear any other selections on the page I'm looking at, but not clear them on the other pages.
Your docs say the following..
To leave only the current row selected and deselect all previously selected rows:
You can see the incorrect behavior in your demo site.
Persisting the Selection - Grid - Kendo UI for Angular (telerik.com)
Hi,
Could i see on screen simultaneously all my week on left screen And current day on right screen ?
Could i use an scheduler compomnent alone or i must add an other Calendar Compoinent ?
Regards
Team,
I am facing the kendo combo box with issue, as i have multiple combo box i have to fix for only one combo box width. i tried a solution to increase the width of kendo dropdown popup with css below but its applying to all the kendo dropdown. I am trying to use id or class for specific dropdown but its not working and if i use the below css its applying to all the kendo dropdown popup. Attaching the below css, kendo dropdown elements and the kendo dropdown expand popup images. Please provide the solution.
}
Id like to see a working Angular 6 sample (complete with angular.json settings) with Kendo componets along with the bootstrap theme, while also using bootstrap to handle normal html components.
Seems like im getting some conflict between the bootstrap theme and the bootstrap styles (from bootstrap css). Not sure if things are getting set correctly, or something else. See previous thread on conflicts between with/without bootstrap css and kendo bootstrap theme
This question is related to the jQuery version of the product which has a similar question:
https://www.telerik.com/forums/how-to-save-tilelayout-and-reload-this-in-later
What I want to do is bind an array of data to tile layout items and when those items are resized, reordered via drag-drop, etc. is to update the data in the array so that I can persist the data to load again later. For example, a user navigates to a page that has the tile layout already loaded with items with default settings, the user arranges the items the way they want them, saves the changes, and when the come back to the application and load the page later, I can reload their settings as they last modified them.
Is there a way to do this with the Angular Tile Layout component?
Thanks!
Hi,
I use latest bootstrap default theme with
package.json
"@progress/kendo-theme-bootstrap": "^4.36.0",
Error message is
- Generating browser application bundles (phase: building)...WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
How could i avoid it ?
Regards
Is there a way to restrict column reorder?
In general we would like users to reorder the column as they see fit for preference. However, there are some scenarios where it becomes problematic to allow it. Even it we disable a column for reorder, if other columns are reorderable it can still move columns which have it disabled.
I'll give you a few examples of where restricting the reorder is helpful - columns meant for outside edge.
- "Select" column is set to be 1st column in the grid. It doesn't have reorder enabled, so a user can't move it directly. However, other columns which are reorderable can be moved in front of the "Select" column making it 2,3,4th or whatever. It would be great to prevent this to say the select is not reorderable it should remain 1st (reorder to in front of it off-limits).
- This would also be true for an action column that we made sticky on the far right side (last). Its not reorderable and should remain last.
I have a nested, selectable grid. When I click on the check that are below the scope of the window it causes the grid to auto scroll all the way back to the top. Selecting by clicking on the cells does not cause this to happen. Only when I click on the checkbox itself.
<
kendo-grid
class
=
"kendo-grid"
[data]="gridView"
filterable
=
"menu"
(dataStateChange)="dataStateChange($event)"
[pageable]="{ pageSizes: [10, 25, 50], previousNext: true, buttonCount: 5, info: true }"
[pageSize]="state.take"
[skip]="state.skip"
(pageChange)="pageChange($event)"
[resizable]="true"
[sortable]="{ allowUnsort: true, mode: 'multiple' }"
[sort]="state.sort"
[selectable]="selectableSettings"
[kendoGridSelectBy]="'id'"
[selectedKeys]="selections"
(selectedKeysChange)="onSelectedKeysChange($event)"
(cellClick)="transactionSelected($event)"
[rowClass]="rowCallback"
>
<
kendo-grid-checkbox-column
[hidden]="group?.groupId !== 1"
width
=
"50"
></
kendo-grid-checkbox-column
>
<
kendo-grid-column
field
=
"transactionId"
title
=
"ID"
width
=
"90"
>
<
ng-template
kendoGridFilterMenuTemplate let-filter
let-column
=
"column"
let-filterService
=
"filterService"
>
<
kendo-grid-numeric-filter-menu
[column]="column" [filter]="filter" [filterService]="filterService">
</
kendo-grid-numeric-filter-menu
>
</
ng-template
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"effectiveDate"
title
=
"Date"
width
=
"100"
format
=
"MM/dd/yyyy"
>
<
ng-template
kendoGridFilterMenuTemplate let-filter
let-column
=
"column"
let-filterService
=
"filterService"
>
<
kendo-grid-date-filter-menu
[column]="column" [filter]="filter" [filterService]="filterService"> </
kendo-grid-date-filter-menu
>
</
ng-template
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"amount"
title
=
"Amount"
width
=
"110"
[format]="{ style: 'currency' }">
<
ng-template
kendoGridFilterMenuTemplate let-filter
let-column
=
"column"
let-filterService
=
"filterService"
>
<
kendo-grid-numeric-filter-menu
[column]="column" [filter]="filter" [filterService]="filterService">
</
kendo-grid-numeric-filter-menu
>
</
ng-template
>
<
ng-template
kendoGridCellTemplate let-dataItem>
<
span
*
ngIf
=
"dataItem.debitCredit == 'DR'"
>-</
span
>{{ dataItem.amount | currency: 'USD' }}
</
ng-template
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"transactionTypeVerbose"
title
=
"Type"
width
=
"120"
>
<
ng-template
kendoGridFilterMenuTemplate
let-column
=
"column"
let-filter
=
"filter"
let-filterService
=
"filterService"
>
<
multicheck-filter
[isPrimitive]="true"
[field]="column.field"
[filterService]="filterService"
[currentFilter]="filter"
[data]="distinctPrimitive(column.field)"
>
</
multicheck-filter
>
</
ng-template
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"source"
title
=
"Source"
width
=
"120"
>
<
ng-template
kendoGridFilterMenuTemplate
let-column
=
"column"
let-filter
=
"filter"
let-filterService
=
"filterService"
>
<
multicheck-filter
[isPrimitive]="true"
[field]="column.field"
[filterService]="filterService"
[currentFilter]="filter"
[data]="distinctPrimitive(column.field)"
>
</
multicheck-filter
>
</
ng-template
>
</
kendo-grid-column
>
<
kendo-grid-column
field
=
"details"
title
=
"Details"
> </
kendo-grid-column
>
<
kendo-grid-column
field
=
"transactionCommentFirst"
title
=
"Comment"
> </
kendo-grid-column
>
<
kendo-grid-column
data-filterable
=
"false"
width
=
"140"
>
<
ng-template
kendoGridCellTemplate let-dataItem>
<
i
*
ngIf
=
"!dataItem.isRemoving && user.canWrite"
(click)="openMoveToPendingModal(dataItem)"
class
=
"fa fa-2x fa-share cursor-pointer text-success mr-2"
aria-hidden
=
"true"
placement
=
"top"
ngbTooltip
=
"Move Transaction to Pending Resolution"
container
=
"body"
></
i
>
<
app-nori-comments
[dataItem]="dataItem" [user]="user"></
app-nori-comments
>
<
i
*
ngIf
=
"dataItem.isRemoving && user.canWrite"
class
=
"fa fa-2x fa-circle-o-notch fa-spin fa-fw text-primary cursor-pointer mr-2"
aria-hidden
=
"true"
></
i
>
<
app-audit-history
[dataItem]="dataItem"></
app-audit-history
>
<
i
*
ngIf
=
"!dataItem.isRemoving && dataItem.transactionGroup.groupName !== 'Ungrouped' && user.canWrite"
(click)="removeFromGroup(dataItem)"
class
=
"fa fa-2x fa-minus-circle text-danger cursor-pointer"
aria-hidden
=
"true"
placement
=
"top"
ngbTooltip
=
"Remove from Group"
container
=
"body"
></
i
>
</
ng-template
>
</
kendo-grid-column
>
</
kendo-grid
>
Hi.
I'm using donut chart, and I would like to know if there is any way to add a tooltip with the full name of the legend when hovering over it. I needed it because there is a scenario where I add ellipsis when the name is too big. As in the image below:
I'm adding ellipsis changing the legend content:
public legendItemContent = (elements: any): string => {
if (elements.text.length > 30) {
elements.text = elements.text.substring(0, 30);
return elements.text.concat('...');
}
return elements.text;
};
I tried several solutions but none were successful. I found out this answer, which was the closest approach, but it's not exactly what I wanted.
If it helps in any way, I'm using this stackblitz project to perform my tests.
Thank you beforehand.