Telerik Forums
Kendo UI for Angular Forum
1 answer
66 views
i'm currently using the kendoUI multiselect component, and wondering if there is anyway to change the default functionality, where instead of coloring the selected item. it can be removed from the list once it has been selected populates in the input element and added back to the list once it de-selected.
Martin Bechev
Telerik team
 answered on 08 Mar 2024
1 answer
55 views

Hello,

Linestyle option of scatterLine chart is not working. Whatever value I put there, it is not changing line style. It is always normal.

Even if I put just some random value, it does not throw any error and plotting chart as normal linestyle.

I am trying to make it smooth. Let me know what I am missing.

    <kendo-chart-series-defaults
        [style]="'smooth'"
        type="scatterLine"
    >
    </kendo-chart-series-defaults>

 

 

Yanmario
Telerik team
 answered on 06 Mar 2024
1 answer
69 views

To reproduce this issue please select your time zone as any time zone of US (eastern, central or pacific) select the date of date light saving change either the start or end of day light saving i.e the 2nd Sunday of March or November click on 4 am (or to be precise add your time zone offset to 2 am and click on any for example for eastern standard time any time from 2am to  7 am) it returns the wrong time. This can be observed for any kendo scheduler version from 2.1.6 to 15..1.0. 

The ideal behavior for any time after the change time i,e 2 am should return the value of the slot clicked but as of now it is incorrect for any value till 2+offest of the the time zone with day light saving. 

To reproduce this select a US time zone as mentioned (eastern, central or pacific) select 10th march 2024 or 3rd November 2024 and select 3am, 4 am , 5am etc. 

https://stackblitz.com/edit/angular-st2crm

Let me know if you need more details

Yanmario
Telerik team
 answered on 06 Mar 2024
1 answer
135 views

Hey guys,

I have an angular form that contains two tree lists: the first one is hierarchal and the 2nd is flat.  Both are populated using [kendoTreeListFlagBinding] and both render correctly.  The first tree list is hierarchal and the second is flat.  Yay Kendo!!

The issue is when I go to export from the flat treelist, it exports hierarchal and not flat.

First Treelist

 <kendo-treelist
            *ngIf="!this.isFlatList"
            [kendoTreeListFlatBinding]="ssAllowances"
            filterable="menu"
            [filter]="filter"
            (filterChange)="this.setFilter($event)"
            [sortable]="{ mode: 'multiple' }"
            [sort]="sort"
            kendoTreeListExpandable
            idField = 'currentGUID'  
            parentIdField='parentGUID'
            >
            <ng-template kendoTreeListToolbarTemplate>
              <button look="flat" type="button" class="btn"
                      title="Export to Excel" kendoTreeListExcelCommand>
                <i class="fa fa-lg fa-file-excel-o"></i>
              </button>
            </ng-template>

code for the column defs etc

 

second Treelist

 <kendo-treelist-column
              *ngIf="this.canDeleteAllowance()"
              width="25">
              <ng-template kendoTreeListCellTemplate let-dataItem #deleteButtonTemplate>
                <a *ngIf="dataItem.canDelete && dataItem.allowanceId !== 0"
                (click)="deleteAllowance(dataItem)"
                title="CLick to Delete">
                <i class="fa fa-trash"></i></a>
              </ng-template>
            </kendo-treelist-column>
            <kendo-treelist-excel fileName="ShipsetAllowances.xlsx"></kendo-treelist-excel>
          </kendo-treelist>

code for the column defs etc

 

What I need is the "directive" to tell excel to export the data as a flat list.

What am I missing from the doc

 

Thanx Kyle

 

 

Kyle
Top achievements
Rank 1
Iron
 answered on 05 Mar 2024
0 answers
104 views

Not sure why, but when i use the kendo-datepicker anywhere in my application, datepicker header template is invisible. I tried with kendo-calender, header is visible initially, but on click of any date buttons or "Today" button it's hiding. Kindly assist soon. Am I missing something? Is there any event's that should be controlled? or can we resolve with styles? 

<kendo-datepicker></kendo-datepicker>

RAMAKRISHNAN
Top achievements
Rank 1
Iron
 updated question on 05 Mar 2024
1 answer
102 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
377 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
52 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
203 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
80 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?