Jump to content

Recommended Posts

  • Members

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

  • Like 1
Link to post
Share on other sites
  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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