Telerik Forums
Kendo UI for Angular Forum
0 answers
5 views

Hello,

 

I have a kendo grid with many columns and virtualcolumns set to true. I would like to know how to have the horizzontal scroll working while selecting cells with drag enable in order to select cells that are outside of the portion of grid visible in the screen. I've noticed that if I set drag to false the scroll works but then I'm not able to select multiple cells with the mouse. Thanks

GIUSEPPE
Top achievements
Rank 1
 asked on 14 Mar 2024
1 answer
9 views

Is it possible to do nested grouping in a grid? And I don't mean a column grouping. Like handling a case where the grid can do a

file1
file2
folder1
  file3
  folder2
    folder3
      folder4
        file4
        file5

And do we have some sample code if this is possible?

 

Thanks!

 

J

Zornitsa
Telerik team
 answered on 14 Mar 2024
0 answers
6 views

I have an angular project that has a kendo grid that needs to be exported into PDF.  Kendo grid has an expanded details per specific items when conditions met. 

As can see below, I need to make the parent row to be together with its expanded detail when the page breaks. How can I achieve it?



Appreciate the response about my inquiry.

 

Thank you!

Yadabase
Top achievements
Rank 1
 asked on 13 Mar 2024
0 answers
8 views

Hello!

I have a grid filter is specified as "menu"  ([filterable]="'menu'")

Some the grid columns are created dynamically like this:

<kendo-grid-column *ngFor="let c of myColumnsObjects"
        field="{{ c.name }}"
        title="{{ c.title }}"
    >
    <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <app-mycolumn-filter
            [field]="column.field"
            [filterService]="filterService"
            [currentFilter]="filter"
            [distinctData1]="getDistinctData1(column.field)"
            [distinctData2]="getDistinctData2(column.field)"
            [distinctData3]="getDistinctData3(column.field)"
          ></app-mycolumn-filter>
        </ng-template>
    <ng-template 
      kendoGridCellTemplate 
      let-dataItem >
        <ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
          <div class="{{getClassByObject(myItem)}}">
            <div>{{myItem.dataOfField1}}</div>
            <div>{{myItem.dataOfField2}}</div>
            <div>{{myItem.dataOfField3}}</div>
          </div>
        </ng-container>
    </ng-template>
    </kendo-grid-column>

Where

myColumnsObjects is

interface IMyDynamicallyColumn {
  name: string;
  title: string;
}

dataItems is array of

interface IMyData {
  id: number;
  name: string;
  somecomlexobject: any;
  ....
  myItems: IMyItem[];
  otheItems: IOtherItem[];
}

myItem is: 

interface IMyItem {
  id: number;
  dataOfField1: string;
  dataOfField2: number;
  dataOfField3: EMyItemState;
}

const enum EMyItemState {
  State1 = 'state1',
  State2 = 'state2',
  ...
  State<N> = 'state<n>'
}


Input data   distinctData1, distinctData2 and distinctData3 used in angular's component of app-mycontrol-filter.

In this case, the standard filter does not work.

How can I organize a filter on an objects (type is IMyItem) associated with a column using all the properties of the object?

 

Vsevolod
Top achievements
Rank 1
Iron
 asked on 13 Mar 2024
0 answers
12 views
We want to use the built in re-ordering rows feature in kendo grid. Currently Kendo-grid-rowreorder-column has its default icon. How do I change it to a different icon (i.e using font awesome). Plus, how do I use custom content for a dragging row (as shown in the attached file)  
Thao
Top achievements
Rank 1
 asked on 08 Mar 2024
0 answers
8 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
 updated question on 04 Mar 2024
2 answers
21 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
15 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
Telerik team
 answered on 23 Feb 2024
1 answer
9 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
Telerik team
 answered on 22 Feb 2024
1 answer
14 views

Hi!

I implemented a filter over all columns to implement a search like the example in the Overview-section for the Grid component.

I would like to highlight all text in the columns yellow that match the entered search text.

Is that easily possible?

Best regards,

Gerald

Zornitsa
Telerik team
 answered on 22 Feb 2024
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?