Calendar in Filter Menu populates below page

[Ron]

I'm currently completing a project in which I've installed filter menus in my UI Grids. So far everything has been working fine with one exception, that the calendars show up off screen something like 10 or 15 frames below the view I'm in. I remember this being related to collision but I'm not entirely sure where I'd need to input the code to nudge this in the right direction globally. Also this may not be the only problem as I remember in the past, before this issue came up, the calendars were coming up as blank objects.

Let me know if you can think of any extra steps that need to be followed in implementing the calendars in either the datepickers or filter menus for Angular 2/4/5. My project is a .Net Core 2/Angular 4 SPA so it's quite possible that I need some type of script in my Layout.cshtml, I'm just not sure what. 

 

Thank you!

[Dimiter Topalov]

Hi Ron,

I am afraid that I do not fully understand the described issue. In general the Popups, containing the Grid filter menus are attached to the filter icon in the Grid header, while the ones, containing the DatePicker Calendar components are anchored to the DatePicker inputs, e.g.:

https://plnkr.co/edit/vPO8uUI5vn6LL49PdIAn?p=preview

If you are observing a different behavior/layout, please make sure that you are using the latest versions of all our packages that can be involved (Grid, Popup, DateInputs, DropDowns) and the Kendo UI theme (either kendo-theme-default or kendo-theme-bootstrap), and that there are no other custom or third-party styling that might interfere with our built-in one.

If the issue persists, please send us an isolated runnable project or a plunker example, similar to the one above, where the undesired layout can be observed, so we can inspect it further, and determine what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter, 

I tried updating my npm, VS version, and progress elements with no change of outcome. 

If I build a .Net Core/Angular project to illustrate this can I attach it to this thread or would I need to submit a ticket?

[Ron]

Not to change the subject but after updating my node js and Visual Studio I've been getting the attached errors. The first occurs with the install as I enter the package install request at the command line: ie. npm install --save @progress/kendo-angular-grid @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-dateinputs @progress/kendo-data-query @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-drawing @progress/kendo-angular-excel-export @angular/animations

The second error occurs the moment I hit play on IIS in .Net Core (again for the .Net Core 2/Angular 4.25 SPA). It looks like there's some kind of conflict between versions of angular-router-loader occuring. This seems to happen whether I follow the full install process that I've been performing and having no problems with for the past six months or whether I only install the @progress/kindo items. 

Let me know if I should submit a ticket on this one or whether it's something you think we can get resolved here.

 

Thank you!

 

[Dimiter Topalov]

Hi Ron,

The errors seem related to a local setup issue and some of the build tools/environment versions mismatch rather than to a problem in the Kendo UI for Angular components. I can recommend installing/upgrading to the latest versions of Node, npm, Visual Studio and the related .NET SDK, etc.

Once you are able to run the application, generated by the template you are using (without our components installed), adding the Grid and other Kendo UI for Angular components should not present an issue.

Just in case you can make sure that you are able to install the latest versions of our components by following the instructions in this GitHub issue:

https://github.com/telerik/kendo-angular/issues/712

If by any chance you have a reference to the old privately scoped Progress npm registry in either a .npmrc or a package-lock.json file, this might prevent installing the latest versions of our packages.

If the initially described Grid filter menus layout issue persists, you can archive the application (removing the node_modules folder to reduce size), and send it to us by attaching it to a response to this thread. We will inspect it accordingly and provide further feedback. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter,

I brought all of my npm current (I'm learning that the .Net Core Angular SPA versions the package.json entries off of a snapshot date rather than what's in npm - needs to be updated by hand), my @progress items are all current per the website in the link below, and it looks like the same behavior is still occurring with the calendar. For how this issue stayed constant across versions of Angular (so far I've experienced it in three different versions now) I'm guessing this may end up being a common situation with SPA users.

 

I tried to attach my zip file and was told that it has to be under 2MB, the file size I get after compression is 6MB. Will the project still work for you if I delete my dist folders (wwwroot and ClientApp) or will I need to send this over another way?

[Ron]

Dist folders have been deleted. Let me know if this file works for you, if not I can send the full version by ShareFile.

[Dimiter Topalov]

Hi Ron,

Thank you for the provided project. The issue seems to be a styling one - an old version of the kendo-theme-default is used (one that does not include the proper Grid styling for the latest features like the Fitler menu). The current version of the theme should be downloaded from @progress/kendo-theme-default (instead of @telerik/kendo-theme-default). The latest official version is 2.46.0:

https://www.telerik.com/kendo-angular-ui/getting-started/#toc-adding-the-styles

https://www.telerik.com/kendo-angular-ui/components/styling/#toc-installation

After performing the following changes:

1) In package.json:

"dependencies": {
    "@progress/kendo-angular-dateinputs": "^1.4.2",
    "@progress/kendo-angular-dropdowns": "^1.5.0",
    "@progress/kendo-angular-excel-export": "^1.0.5",
    "@progress/kendo-angular-grid": "^1.6.4",
    "@progress/kendo-angular-inputs": "^1.4.1",
    "@progress/kendo-angular-intl": "^1.3.0",
    "@progress/kendo-angular-l10n": "^1.0.5",
    "@progress/kendo-angular-popup": "^1.3.1",
    "@progress/kendo-data-query": "^1.1.2",
    "@progress/kendo-drawing": "^1.4.0",
    "@progress/kendo-theme-default": "^2.46.0"
  }

2) In webpack.config.vendor.js:

const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    'zone.js',
    '@progress/kendo-theme-default/dist/all.css'
];

... and running a clean build/run of the application, the Filter menu worked and was displayed as expected:

https://www.screencast.com/t/LEfBDpAFN1

I hope using the latest version of our theme will resolve the issue on your end as well.

Regards,
Dimiter Topalov
Progress Telerik

[Ron]

Dimiter - that resolved the problem. Thank you!