Telerik Forums
Kendo UI for Angular Forum
1 answer
114 views

I tried use the example from the demo page, and enable the legend, but nothing is happening. What did I do wrong?

<kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item type="bar" [stack]="true" [data]="[1, 2, 3]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-legend [visible]="true"></kendo-chart-legend>
  </kendo-chart>
Yanmario
Telerik team
 answered on 05 Mar 2024
0 answers
432 views

Hello,

For the Kendo UI Grid component, we were having some confusion re: the standard `<kendo-grid-colum>` vs. the one with a nested `<ng-template>` within it.

Specifically how you are binding the fields to the `save` event here:

saveTopic({ sender, rowIndex, isNew, dataItem }: SaveEvent): void { 

In other words, once the user EDITS a row and then SAVES - the `field`attributes of <kendo-grid-column> were binding to the `dataItem` param - however the ng-template items were NOT.

So in the end, we managed to add a `[formGroup]` on the <kendo-grid> markup, and added a few `formControlName` atrributes within the ng-templates - i.e. we have some material checkboxes and selects.

And now we are able to read the entirely modified grid row by accessing the formGroup in the SAVE function, as follows:

this.formGroup.value

 

However, at first we did NOT have the [formGroup] binding. So the updated values within ng-template were NOT binding on SAVE.


<kendo-grid [data]="topics" (add)="addTopic($event)" (edit)="editTopic($event)" (remove)="disableTopic($event)"
	(cancel)="cancelHandler($event)" (save)="saveTopic($event)"	
	[formGroup]="formGroup"
>       
	<ng-template kendoGridToolbarTemplate>
		<h3>Topics</h3>
		<button id="refreshButton" mat-flat-button (click)="getTopics()" >
			<mat-icon class="hover" svgIcon="refresh"></mat-icon>
		</button>
		<button id="addButton" kendoGridAddCommand>
			<mat-icon class="hover" svgIcon="add"></mat-icon>
		</button>
	</ng-template>

	<kendo-grid-column [width]="500" field="Name" title="Topic" ></kendo-grid-column>
	
	<kendo-grid-column [width]="350" field="Description" title="Description""></kendo-grid-column>
	
	<kendo-grid-column [width]="50" field="IsEnabled" editor="boolean" title="Enabled">
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-checkbox kendoCheckBox formControlName="IsEnabled" name="IsEnabled">
			</mat-checkbox>
		</ng-template>
	</kendo-grid-column>

	<kendo-grid-column [width]="50" field="Retained" editor="boolean" title="Retained" >
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-checkbox kendoCheckBox formControlName="Retained" name="Retained">
			</mat-checkbox>
		</ng-template>
	</kendo-grid-column>

	<kendo-grid-column [width]="200" field="HostName" title="HostName">
		<ng-template kendoGridEditTemplate let-dataItem="dataItem">
			<mat-select placeholder="Select Host" formControlName="HostID">
				<mat-option value="">None</mat-option>
				<mat-option *ngFor="let host of hosts" [(value)]="host.HostID">
					{{ host.HostName }}
				</mat-option>
			</mat-select>
		</ng-template>
	</kendo-grid-column>
	
		
	<kendo-grid-command-column *ngIf="!isLoading">
		<ng-template kendoGridCellTemplate let-isNew="isNew">
			<button kendoGridEditCommand [primary]="true"><mat-icon svgIcon="edit" title="Edit" i18n-title="@@editOption"></mat-icon></button>
			<button kendoGridSaveCommand>{{ isNew ? 'Add' : Update }}</button>
			<button kendoGridCancelCommand>{{ isNew ? 'Discard changes' 'Cancel' }}</button>
		</ng-template>
	</kendo-grid-command-column>
</kendo-grid>

So the above solution is working; but again, the formControlName has been added only to those ng-template sections. And now the binding works on all fields - that is, the user-modified values are successfully read via formGroup.value.

But if you can clarify best practices in this case, it would be appreciated and helpful.

Thanks,

Bob

 

 

Bob
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 04 Mar 2024
0 answers
63 views

I am using kendo-multiselecttree and i just simply wanna show all the selected items when hovering on the selected items

So here upon overing item1, i don't know how to get tooltip or something, please someone help me with it

Thank you.

Dhaval
Top achievements
Rank 1
 updated question on 04 Mar 2024
2 answers
239 views

When I inspect a Kendo UI component, like kendo-grid, in dev tools, no CSS is displayed. I can see that there are css classes applied to the component, k-grid and k-grid-md, but there's nothing displayed in dev tools for those css classes. I verified that I can create my own component, put it on my home component (as I've done with Kendo UI components), apply css classes to it and that css shows up in dev tools as I expect when I inspect it. So it only appears that I can't see the css for Kendo UI components. What do I need to do to get the css to show up?

 

Here's the element in dev tools:

 

Here's what the css pane in dev tools looks like:

Doug
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 29 Feb 2024
1 answer
85 views

When the scheduler call createFormGroup In kendoSchedulerReactiveEditing property miss the sender SchedulerComponent.
How can i take the sender?

thank you

 

Yanmario
Telerik team
 answered on 29 Feb 2024
0 answers
251 views

Hi, in our team we had issues with a tricky bug that we discovered in Safari for Kendo UI for Angular.

Steps to reproduce

1. In Safari, make sure that content is scrollable by having content that does not fit in the current size of the browser window. 

2.  Open a kendo window over the content, with a kendo datepicker inside.

3.  Possibly make the browser window smaller in height (depending on the screen resolution).

4. Open the datepicker popup.

Expected behaviour

Kendo window along with its content stay were it is. 

Actual behaviour

The kendo window jumps upwards and is partially out of view. 

If the page is still scrollable the user can scroll back to see all of the kendo window. For my team the problem was that we have an "overflow: hidden" css style on the body to prevent scrolling outside the kendo window when it is opened. This is problematic for the user since they cannot scroll back to see all the content of the kendo window. This problem only happens in Safari.

Solution

To solve it we set "position: fixed" on the wrapping element of the kendo window.

Stackblitz

https://stackblitz.com/edit/angular-p1tgbe-u8g3ff

 

Henrik
Top achievements
Rank 1
 updated question on 28 Feb 2024
2 answers
1.0K+ views

I would like to prevent the grid cells from wrapping and increasing the row height.

Instead I just want the text to be cut off and ending with ellipsis. I tried styling with column classes "white-space: nowrap", but that does not work.

Is that possible?

 

Thank you!

Zornitsa
Telerik team
 answered on 27 Feb 2024
1 answer
104 views
How to disabled dates before today in kendo date range with date input?
1 answer
205 views

Hello!

I'm working with a grid that contains several Kendo dropdown lists. The data for these dropdowns relies on certain values within the grid, which can vary for each row. Currently, the dataset from the last row is being applied to all dropdowns in previous rows. How can I ensure that each dropdown in a row uses its own unique dataset based on the values specific to that row?

Thanks,

Balazs

 

UPDATE:

The functionality is operating correctly as intended. The issue only occurred on my end.
Martin Bechev
Telerik team
 answered on 23 Feb 2024
1 answer
76 views

Hi Team,

I am trying to implement cell selection aggregates in my grids, similar to examples shown here :https://www.telerik.com/kendo-angular-ui/components/grid/selection/aggregates/

Looks like the aggregates does not get calculated correctly when grouping is done on the grid. Is this a limitation or am I missing something.

Appreciate your help.

Kaustubh

Martin Bechev
Telerik team
 answered on 22 Feb 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?