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

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:

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

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.

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:

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

thank you

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

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!

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:

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