Telerik Forums
Kendo UI for Angular Forum
0 answers
274 views

I have added a footer template in a tree list. I want position of this footer to be fixed in bottom. So Footer should be visible all the time.

As of now when I scroll through data, footer comes as last row.

Adding css as position: sticky works when virtual scroll is not added. Since with my application virtual scroll is required. 

How can I fix footer position in bottom of the treelist gird?


Thanks in advance.

KEMPEGOWDA
Top achievements
Rank 1
 asked on 12 Oct 2022
0 answers
107 views

I have been tasked with updating a few different vulnerable packages in our code base. This one has me confused.

 

jQuery 1.9.1 - Located at - CompanyName/Web/Administration/Scripts/kendo/jquery.min.js

 

When I check our jquery nuget package, it is up to date. It looks like this file specifically is out of date and I am unsure how to update it.

 

Can I update this specifically using the command line and npm?

If so, how can I find this specific package to update it with npm?

Or is there another way to update this?

Do I have to update Kendo in order to get the jquery package inside of it updated?

 

Here is a photo of the file for reference (It is a lot of code that I do not think is necessary for the question):

enter image description here

 

I am unsure if this question is even properly worded, I am a bit out of my depth here. Please provide any feedback necessary so I can improve on my question.

 

 

Corey
Top achievements
Rank 1
 updated question on 11 Oct 2022
0 answers
77 views

I have added a footer template in a tree list. I want position of this footer to be fixed in bottom. So Footer should be visible all the time.

As of now when I scroll through data, footer comes as last row.

Adding css as position: sticky works when virtual scroll is not added. Since with my application virtual scroll is required. 

How can I fix footer in bottom of the treelist gird?


Thanks in advance.

Kuljeet
Top achievements
Rank 1
 asked on 11 Oct 2022
1 answer
77 views

 Error: node_modules/@progress/kendo-angular-grid/localization/custom-messages.component.d.ts:15:19 - error TS2611: 'override' is defined as a property in class 'GridMessages', but is overridden here in 'CustomMessagesComponent' as an accessor.

      15     protected get override(): boolean;

 

i am facing issue with Kendo grid column resize for max size limit. when i upgrade to 7.3.x versions it gives above error. please note i have 6.0.0 version as existing and it does not have maxResizableWidth  available so i was trying with upgrade. 

Can anyone help me with this? 

 

Thanks

Martin Bechev
Telerik team
 answered on 11 Oct 2022
1 answer
330 views

Hello, I am using Angular 14 and Kendo popover to show popup (tooltip) when hovering on the column headers of my Kendo grid.

The problem I am experiencing is that I cannot find a way to add a 1s delay to the animation.

Here is part of the code:


<kendo-popover #template [animation]="popoverAnimation" position="bottom">
	<ng-template let-anchor kendoPopoverBodyTemplate>
		<es-table-reactive-help-popover
			[helpKey]="helpKeyMap.get(anchor.innerText)"
		></es-table-reactive-help-popover>
	</ng-template>
</kendo-popover>

<div
	class="wrapper"
	[popover]="template"
	(mouseover)="toggleTooltip($event)"
	(mouseleave)="hideTooltip()"
	kendoPopoverContainer
	showOn="hover"
>
	<kendo-grid>
		<kendo-grid-checkbox-column [width]="70" title="....">
		....
		</kendo-grid-checkbox-column>
		<kendo-grid-column [width]="200" field="name" title="....">
		</kendo-grid-column>
		<kendo-grid-column [width]="200" field="code" title="....">
		</kendo-grid-column
		><kendo-grid-column
			[width]="200"
			field="warehouseName"
			title="Customer warehouse"
		>
		</kendo-grid-column>
		<kendo-grid-column
			[sortable]="false"
			[width]="200"
			field="supplierEvents"
			title="...."
		>
			<ng-template kendoGridCellTemplate let-entry>
				<es-schedule-pills
					[eventSummary]="entry.eventSummary"
					[supplierName]="entry.name"
					[warehouseName]="entry.warehouseName"
					[supplierId]="entry.id"
				></es-schedule-pills>
			</ng-template>
		</kendo-grid-column>
	</kendo-grid>
</div>

 

  1. The kendo-popover component has an input for animation, which uses the interface PopupAnimation, but it does not support animation delay.
  2. I have tried adding a raw CSS animation through tag/class selectors but the popup shows and then the animation runs which seems buggy.
  3. I cannot attach an animation through the component template since the popup element is generated under the hood and I don't have direct access to it in the template.

Can you provide me some other solution?

 

Yanmario
Telerik team
 answered on 11 Oct 2022
2 answers
590 views

I'm trying to remove the title bar component completely from a window created with a call to WindowService.

Here's my custom open method:

openWindow(settings: WindowSettings, closeCallback: any, preventClose: boolean = false, inputData: any = null): WindowRef {


    if (preventClose) {
      settings.preventClose = (e: any, w: WindowRef) => {
        return true;
      }
    }

    
    let w = this.windowService.open(settings);
    let contentInstance = w.content.instance as any;

    if (inputData) {
      for (const key in inputData) {
        const value = inputData[key];
        contentInstance[key] = value;
      }
    }

    w.window.instance.resizeStart.subscribe(() => {
      //delete w.window.instance.titleBarView
      if (w.window.instance.titleBarView)
        w.window.instance.titleBarView.el.nativeElement.remove();
    });

    return w;
    
  }

As you can see, I've found that w.window.instance.titleBarView.el.nativeElement contains the title bar and I can remove it as such, but the problem is that if I try to access the titleBarView property right before the subscribe line, it's always undefined. The title bar disappears when I resize the window, but that's not what I want.

Is there a way I can subscribe to an event (like beforeShow) and have access to it ?

Or any other way to do it would be appreciated.

Thanks.

Francis
Top achievements
Rank 1
Iron
 answered on 07 Oct 2022
0 answers
1.7K+ views

Hello,

I have a problem with Kendo icons (k-icon k-i-menu etc.) which are now not showing after the latest update of Kendo and Angular to Angular 14.

This is what is showing (just rectangles) and it was working fine until now. I have not changed anything in the app related to fonts or icons so I don't really know where to search for the problem. I've tried rollback of the Kendo theme to the last version I had before the issue, but it didn't work. I have the issue in 3 different browsers.

 

This is the code i have in my angular.json loading kendo-theme-material v5.8.1

"styles": [{
                                "input": "node_modules/@progress/kendo-theme-material/dist/all.css",
                                "inject": true
                            },
                            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                            "./node_modules/bootstrap/dist/css/bootstrap.css",
                            "./node_modules/ngx-toastr/toastr.css"
                        ],

and the icons in my html are with class k-icon in combination with k-i-menu or other icons, which up until now have worked perfectly fine.

Can you help me solve the problem or at least give me some guidelines to what might be causing it?

Thanks

Petar
Top achievements
Rank 1
 asked on 07 Oct 2022
1 answer
800 views

In our application, we recently updated to Angular 14, and our kendo-dropdown import is currently on version 7.2.0. 
With our multiselect dropdowns, we found a weird interaction - when we include [popupSettings]="{appendTo: 'component'}", the dropdown's popup activates when clicking the searchbar but clicking on it automatically closes the popup without an activation or change of state. When we force the popup to stay open by using preventDefault when OnClose is called, the functionality is present and works as expected (though it can never close).
When appendTo is set to its default/"root", the multiselect dropdown does work as intended. However, we are experiencing a bug akin to https://www.telerik.com/forums/overwrite-default-value-for-appendto-setting-of-a-popup where scrolling on a page before opening a dialog with a multiselect dropdown will result in the popup being misaligned. We are using Angular Material's MatDialog.

 

 

Yanmario
Telerik team
 answered on 07 Oct 2022
0 answers
3.4K+ views

Hi!

I searched the forum but found no answer. I have several controls in the form, each one inserted according to the scheme:

      <div fxFlex="30">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Rodzaj przewozów">
            <kendo-dropdownlist #transportTypeDropdown class="transport-type" [data]="transportTypes"
              [textField]="'name'" [valueField]="'id'" [formControlName]="formNames.transportType"
              [(value)]="formModel.transportType" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.transportType" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="wyszukaj bez trasy">
            <input type="checkbox" #searchWithoutRouteCheckbox class="search-without-route-type"
              [formControlName]="formNames.searchWithoutRoute" [value]="formModel.searchWithoutRoute" kendoCheckBox
              [disabled]="areControlsDisabled" />
          </kendo-label>
          <app-form-error [controlName]="formNames.searchWithoutRoute" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Przes. kal. 2">
            <kendo-dropdownlist #calendarShiftDropdown class="calendar-shift" [data]="calendarShiftItems"
              [textField]="'text'" [valueField]="'value'" [formControlName]="formNames.calendarShift"
              [valuePrimitive]="true" [(value)]="formModel.calendarShift" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.calendarShift" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>

 

and I get errors in the console:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName

AFAIS there's no doubled controls in formfield. In other form I have simmilar controls and getting no errors and I'm stuck on this issue. What I'm doing wrong?


Robert
Top achievements
Rank 2
 updated question on 07 Oct 2022
0 answers
89 views
I have tried to implemented kendotreeview on json data.But I am unable to use filter using "filterable" property. Here is what so far I have done. Please help me with searching
https://stackblitz.com/edit/angular-hbjccw-xkwehf?file=app%2Fapp.component.ts
Meet
Top achievements
Rank 1
 updated question on 07 Oct 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?