I have two donut charts displayed side by side .. and even though I set the height of the chart area to be same.. the actual chart series coming different height .. how to make it same.. It is in Angular Kendo UI.. Following in my code of the component
fyi: I added the image as well how they look as an attachment
<kendo-chart
[transitions]="false"
(seriesHover)="onSeriesHover($event)"
(seriesClick)="onSeriesClick($event)" >
<kendo-chart-area background="transparent" [height]="height">
<kendo-chart-legend [visible]="false">
</kendo-chart-legend>
<kendo-chart-title [text]="header"></kendo-chart-title>
<kendo-chart-series style="cursor: pointer">
<kendo-chart-series-item
[autoFit]="true"
type="donut" [data]="data"
categoryField="name" field="value" colorField="color" >
<kendo-chart-series-item-labels
position="outsideEnd"
color="#000"
background="transparent"
[content]="labelContent">
</kendo-chart-series-item-labels>
<kendo-chart-series-item-tooltip format="pie" padding="2">
<ng-template let-category="category" let-dataItem="dataItem">
{{category}} ({{dataItem.value}})
</ng-template>
</kendo-chart-series-item-tooltip>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart-area>
</kendo-chart>I want to achieve a menu like the Azure DevOps menu with the Drawer control (see image below)
How can I put the toggle button at the bottom within the Drawer control? The drawer control is a fixed menu at the left side with height 100%.
Can i do this with the footer template?
I have just updated my dialogs to use the latest 5.0.0 dependency and now I see a major difference in the way the action buttons are rendered. Previously the buttons took up all the space across the bottom of the dialog, and now they have shrunk and are placed bottom right. Please see attached pics of the difference. How do I render them as before? I've tried passing actionLayout: "stretched" to the dialog service when creating them but this has no effect.
Hi,
In our use case, there are two tabs in a card having kendo grid each. If user is on first tab grid and scroll down to any row eg 300, and switches the tab. Now if user returns back to first tab again, dataStateChange event returns skip as 0 for the first grid and because of that it scrolls to top, but the expectation is to remain on row 300. Virtual scroll is enabled in both the grids. Similar behavior can be observed in https://www.telerik.com/kendo-angular-ui/components/grid/, when user navigates from one page to another.
Is this the expected behavior or there is a way to keep the scroll at the earlier position.
Please suggest.
Regards,
Jaspreet
Good day,
I am trying to export multiple girds (from an external button request) into one Excel doc, with each grid in its own sheet. I cannot get it quite right, and cannot find any example that can help me (the export multiple data sets from the Excel Export section looks close, but the objects in the grid are different than those.
Any examples or assistance would be greatly appreciated.
Thank you,
Tyler
I am using kendo listview and I have a dynamic data that's why I want to reload data automatically in the listView. Can anyone help me ?
This is the method I used where I add new item in the data of the lisView "addresses" :
And this is my HTML :
<button (click)="addNewAddress()">add</button>
<kendo-listview*ngIf="var"
</kendo-listview>
[{
"drpt": {
"dname": "test",
"cname": ["aaa", "bbb ", "ccc "],
"qgate": "passed",
"utest": {
"pass": 222,
"fail": 9,
"perc": 56.6
},
"ctest": {
"pass": 202,
"fail": 0,
"perc": 100
}
}
},
{
"drpt": {
"dname": "test1",
"cname": ["aaa1", "bbb1", "ccc1"],
"qgate": "failed",
"utest": {
"pass": 232,
"fail": 9,
"perc": 56.6
},
"ctest": {
"pass": 202,
"fail": 10,
"perc": 45
}
}
}
]
how do I parse this nested JSON to display the below data in the Kendo UI grid for angular?
| dname | UtestPerc | CtestPerc | qgate |
| test | 56.6 | 100 | passed |
| Test1 | 56.6 | 45 | failed |
can anyone help to give some pointers on this

I have a requirement where I need to either display simple text if available otherwise need to show dropdown list in the same column in Kendo Grid. The list items for every row need to bound at runtime and this list item is part of the data source to which grid is bound to.
Kindly help

Hello,
I'm using Kendo UI Grid for Angular. I'm using the ColumnMenuChooser component in two places in my code.
In one place, I'm using just the generic directive :
<kendo-grid-columnmenu-chooser [service]="service">
</kendo-grid-columnmenu-chooser>
In another place, I'm using a more customized code :
<ng-template #template>
<kendo-grid-columnlist
[columns]="columns"
[applyText]="localization.get('columnsApply')"
[resetText]="localization.get('columnsReset')"
[autoSync]="autoSync"
[allowHideAll]="allowHideAll"
(apply)="onApply($event)"
(columnChange)="onChange($event)"
>
</kendo-grid-columnlist>
</ng-template>
In both places, is it possible to disable a column's checkbox according to its column's property ?
I know this was possible in Kendo UI grid for jQuery but I can't find a way to do it in Kendo UI for Angular.
The goal is that if a given column has a certain property true (for example "locked = true", then it would be impossible for the end user to hide it via the ColumnMenuChooser component.
Thank you in advance
