Telerik Forums
Kendo UI for Angular Forum
2 answers
720 views

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>


Dimiter Madjarov
Telerik team
 answered on 03 May 2021
1 answer
637 views

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?

Dimiter Madjarov
Telerik team
 answered on 03 May 2021
3 answers
317 views

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.

 

 

Dimiter Madjarov
Telerik team
 answered on 03 May 2021
1 answer
2.8K+ views

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

 

Dimiter Madjarov
Telerik team
 answered on 02 May 2021
1 answer
460 views

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

Tyler
Top achievements
Rank 1
Iron
 answered on 30 Apr 2021
1 answer
1.2K+ views

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" :

addNewAddress(){
    this.var=false
    if(this.isvalidAddresses){
      this.var = true;
      this.addresses.push(this.oneDamageAddress);
      console.log(this.addresses)
    }
  }

 

And this is my HTML :

<button (click)="addNewAddress()">add</button>

<kendo-listview*ngIf="var"

 
            #listView
            [kendoListViewBinding]="addresses"
            [loading]="loading"
            [containerClass]="'k-d-flex k-flex-col k-flex-nowrap'"
            
        >
            <ng-template
                kendoListViewItemTemplate
                let-dataItem="dataItem"
            >
            <div class="product" >
            <div class="description">
                <div class="product-name">{{ dataItem.streetName }}</div>
                <div class="category-name">{{ dataItem.surname }}</div>
            </div>
            <div class="price">
              <button ><i class="fas fa-trash"></i></button>
            </div>
        </div>           
            </ng-template>
        

</kendo-listview>

Dimiter Madjarov
Telerik team
 answered on 30 Apr 2021
1 answer
2.7K+ views

[{
"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

 

Martin Bechev
Telerik team
 answered on 30 Apr 2021
1 answer
5.2K+ views

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

Hetali
Telerik team
 updated answer on 29 Apr 2021
1 answer
969 views
This is the first time I am using kendo listview and I am wondering how to get the selected Item from the listView ! I mean how can I change the listView to selectable and then how can I recuperate the selected Item ? Can anyone help me ?
Dimiter Madjarov
Telerik team
 answered on 29 Apr 2021
1 answer
1.7K+ views

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

 

Svet
Telerik team
 answered on 29 Apr 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?