Jump to content

mrojas

Members
  • Content Count

    18
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by mrojas

  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

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