Jump to content

mrojas

Members
  • Content Count

    18
  • Joined

  • Last visited

  • Days Won

    1

mrojas last won the day on April 24

mrojas had the most liked content!

Community Reputation

1 Neutral

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. All of our WebMap controls rely on the Telerik UI Angular controls. https://www.telerik.com/kendo-angular-ui If you want to learn more about them I recommend these pages: https://www.telerik.com/kendo-angular-ui/components/ Ok. In order to support what you mentioned we can use a Telerik Menu feature that is called openOnClick One thing to notice with this feature os that when the user opens an item with a click, all Menu items open on hover until one of them is selected. To modify this behavior, the toggle option of the openOnClick can be used. For example, setting toggle:'leave', the user opens an item with a click and the Menu items open on hover until either one of them is selected, or the mouse pointer leaves the Menu and the predefined delay (in milliseconds, default is 100) passes. <kendo-menu [items]="items" [openOnClick]="{ toggle: 'leave' }"> </kendo-menu> https://stackblitz.com/edit/angular-aurqtm?file=app/app.component.ts All options are listed in the same article that you already explored: https://www.telerik.com/kendo-angular-ui/components/menus/menu/open-close/#toc-opening-on-click Ok. An how do you apply that on a migrated component? That is easy too: In general. WebMap controls add some services to the Telerik Controls and provide most of the functionality that you might need for funtional equivalence. But if you want to modify their behaviour, you just need to extend that component. In this case we will extend the wm-toolstrip component. To do that in angular, just under app/components/app-name folder create a new folder called wm-toolstrip-custom And create 3 files. wm-toolstrip-custom.ts, wm-toolstrip-custom.scss wm-toolstrip-custom.html For the wm-toolstrip-custom.ts write some content like this: import { Component, ChangeDetectionStrategy, ElementRef, ChangeDetectorRef, Renderer2 } from '@angular/core'; import { ToolStripComponent } from "@mobilize/winforms-components"; import { WebMapService } from '@mobilize/angularclient'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'wm-toolstrip-custom', styleUrls: ['./wm-toolstrip-custom.scss'], templateUrl: './wm-toolstrip-custom.html' }) export class WMToolstripCustom extends ToolStripComponent { constructor(private service3: WebMapService, private changeDetector3: ChangeDetectorRef, private renderer3: Renderer2, private element3: ElementRef) { super(service3, changeDetector3, renderer3, element3); } } For that component we are just inheriting from ToolStripComponent For the wm-toolstrip-custom.scss we just copy the scss from the ancestor or any other styles you might need .before { width: 100%; height: 100%; text-align: center; display: contents; } .above { width: 100%; height: 100%; text-align: center; } And finally for the .html we copy the inherited html just by adding the onClick piece mentioned before <kendo-menu *ngIf="model" [items]="items" (select)="onSelect($event)" [ngClass]="class" wmControls [openOnClick]="{ toggle: 'leave' }"> <ng-template kendoMenuItemTemplate let-item="item"> <div *ngIf="item.type == toolStripTypes('Label') || item.type == toolStripTypes('Button')" [ngClass]="item.cssClass" [wmDisabledItem]="item.enabled"> <img *ngIf="!!item.imageUrl && item.imageFirst" src="{{item.imageUrl}}" /> <span *ngIf="item.checked">&#10004; </span> <div style="display: inline-block;">{{item.text}}</div> <img *ngIf="!!item.imageUrl && !item.imageFirst" src="{{item.imageUrl}}"/> </div> <div *ngIf="item.type == toolStripTypes('ComboBox')"> <wm-combobox *ngIf="item.ComboBox" [model]="item.ComboBox"></wm-combobox> </div> <div *ngIf="item.type == toolStripTypes('Separator')" [ngClass]="item.cssClass" [wmDisabledItem]="item.enabled"></div> </ng-template> </kendo-menu> Notice the [openOnClick]="{ toggle: 'leave' }" Ok. So that is all the coding needed. Now to be able to use it you need to steps.: 1. Export in index.ts import { WMToolstripCustom } from './wm-toolstrip-custom/wm-toolstrip-custom'; export { WMToolstripCustom }; 2. Import the Telerik Module in the module for your application. For example for an app like sks modify sks-module.ts // Some elements excluded import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { WebMapKendoModule } from '@mobilize/winforms-components'; import { WebMapService, WebMapModule } from '@mobilize/angularclient'; import { GridModule } from '@progress/kendo-angular-grid'; import { DialogsModule } from '@progress/kendo-angular-dialog'; import * as SKS from './components/sks'; // Import the Menus Module so you can reference it import { MenusModule } from '@progress/kendo-angular-menu'; @NgModule({ imports: [ CommonModule, WebMapKendoModule, WebMapModule, WindowModule, // Add import MenusModule, GridModule, DialogsModule ], exports: [ SKS.frmCustomers, // some code omitted. SKS.WMToolstripCustom, ], declarations: [ // other elements excluded SKS.WMToolstripCustom, ], entryComponents: [ // other elements excluded SKS.WMToolstripCustom, ], providers: [WebMapService], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) export class SKSModule { } 3. And finally change your wm-toolstrip references by wm-toolstrip-custom in your html And that should be all
  2. The ExtendedProperties.xml is mostly a report that the VBUC generates about some of the changes that it applies. I think it is also used by the ReflectionHelper class as an aid when trying to dynamically invoke a member.
  3. In general no not upgrade the typescript automatically because some of the newer versions might throw additional compilation errors
  4. This is a common error that usually happens when you try to run your webmap app on IIS. It is cause because you have not properly installed all the ASP.NET components for IIS. For more details see: https://mrojas.ghost.io/iis-internal-server-error/
  5. https://mrojas.ghost.io/handling-controllers-with-the-same-name-2/
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. Terms of Use