src/ui/toolbar/smart-toolbar.component.ts
AbstractFormChild
OnInit
AfterViewInit
OnDestroy
| selector | smart-toolbar |
| styleUrls | ./smart-toolbar.component.css |
| templateUrl | ./smart-toolbar.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(registry: SmartToolbarRegistry, changeDetector: ChangeDetectorRef, container: ViewContainerRef, injector: Injector, renderer: Renderer2, elementRef: ElementRef, cefsharpService: CefSharpService)
|
||||||||||||||||||||||||
|
Parameters :
|
| disabled-buttons |
Type : string
|
|
The names of the buttons that are or should be disabled by the toolbar. |
| responsive |
Type : boolean
|
| smart-navigation |
Default value : false
|
|
If set to true, the toolbar will display the next and previous navigation buttons. |
| smart-object-name |
Type : string
|
|
The toolbar's object name |
| smart-toolbar-buttons |
Type : string
|
|
A comma delimited list of buttons that the toolbar should display. Possible values: add, delete, cancel, save, copy |
| toolbarStyle |
Type : any
|
Default value : {}
|
| on-add |
Type : EventEmitter<any>
|
|
Fires when the add button is clicked. |
| on-button-clicked |
Type : EventEmitter<string>
|
|
Fires when any button is clicked. |
| on-cancel |
Type : EventEmitter<any>
|
|
Fires when the cancel button is clicked. |
| on-copy |
Type : EventEmitter<string>
|
|
Fires when the copy button is clicked. |
| on-delete |
Type : EventEmitter<any>
|
|
Fires when the delete button is clicked. |
| on-next |
Type : EventEmitter<any>
|
|
Fires when the next button is clicked. |
| on-previous |
Type : EventEmitter<any>
|
|
Fires when the previous button is clicked. |
| on-save |
Type : EventEmitter<any>
|
|
Fires when the save button is clicked. |
| smart-activeio-target-changed |
Type : ReplaySubject<string>
|
|
Emits a new value every time the Smart Toolbar's active IO target has changed |
| Public activateSmartTableIOTarget | ||||||||
activateSmartTableIOTarget(target: string)
|
||||||||
|
Sets the Smart Viewer with the specified instance name as the Smart Toolbar's active IO target
Parameters :
Returns :
void
|
| clickButton | ||||||
clickButton(btn: string)
|
||||||
|
Fires the button with the specified name's corresponding button clicked event
Parameters :
Returns :
void
|
| disableButton | ||||||
disableButton(btn: string)
|
||||||
|
Disables the toolbar button with the given name, if it is displayed.
Parameters :
Returns :
void
|
| disableButtons | ||||||
disableButtons(btns: string[])
|
||||||
|
Disables the toolbar buttons specified in the given list, if they are displayed.
Parameters :
Returns :
void
|
| enableButton | ||||||
enableButton(btn: string)
|
||||||
|
Enables the toolbar button with the given name, if it is displayed.
Parameters :
Returns :
void
|
| enableButtons | ||||||
enableButtons(btns?: string[])
|
||||||
|
Enables the toolbar buttons specified in the given list, if they are displayed. If no list is provided, all toolbar buttons are enabled.
Parameters :
Returns :
void
|
| getButtonControl | ||||||
getButtonControl(btnName: string)
|
||||||
|
Parameters :
Returns :
SmartToolbarButtonComponent
SmartToolbarButtonComponent |
| getComboControl | ||||||
getComboControl(btnName: string)
|
||||||
|
Parameters :
Returns :
SmartComboEditorComponent
SmartComboEditorComponent |
| Public handleLayoutChange | ||||||
handleLayoutChange(newLayout: literal type)
|
||||||
|
Parameters :
Returns :
void
|
| hasButton | ||||||
hasButton(btn: string)
|
||||||
|
Returns true if the toolbar is currently displaying a button with the given name.
Parameters :
Returns :
boolean
|
| initializeWithDatasource | ||||||
initializeWithDatasource(datasource: SmartDataSource)
|
||||||
|
Parameters :
Returns :
void
|
| isDisabled | ||||||
isDisabled(btn: string)
|
||||||
|
Returns true if the button with the given name is displayed and is disabled.
Parameters :
Returns :
boolean
|
| popupMenuBlurred | ||||
popupMenuBlurred($event)
|
||||
|
Parameters :
Returns :
void
|
| popupMenuClicked | ||||
popupMenuClicked($event)
|
||||
|
Parameters :
Returns :
void
|
| popupMenuClosing | ||||||
popupMenuClosing(event: PreventableEvent)
|
||||||
|
Parameters :
Returns :
void
|
| popupMenuFocused | ||||
popupMenuFocused($event)
|
||||
|
Parameters :
Returns :
void
|
| toolbarSizeChanged | ||||||||
toolbarSizeChanged(event: literal type)
|
||||||||
|
Parameters :
Returns :
void
|
| contentInit |
Default value : false
|
| contextUpdated |
Type : EventEmitter<any>
|
Default value : new EventEmitter<any>()
|
| customItems |
Type : QueryList<SmartToolbarItem>
|
Decorators :
@ContentChildren(SmartToolbarItem)
|
| hamburgerMenuItems |
Type : literal type[]
|
Default value : []
|
| hiddenButtonHolder |
Type : HiddenButtonHolder
|
Decorators :
@ViewChild('hiddenButtonHolder', {static: true})
|
| isCefsharp |
Type : boolean
|
| itemRenderers |
Type : QueryList<SmartToolbarItemRenderer>
|
Decorators :
@ContentChildren(SmartToolbarItemRenderer)
|
| Public possibleIOTargets |
Type : string[]
|
Default value : []
|
|
Possible IO targets that have been registered with the Smart Toolbar |
| separators |
Type : QueryList<SmartToolbarSeparatorComponent>
|
Decorators :
@ContentChildren(SmartToolbarSeparatorComponent)
|
| toolbarButtonControls |
Type : QueryList<SmartToolbarButtonComponent>
|
Decorators :
@ContentChildren(SmartToolbarButtonComponent)
|
| toolbarComboControls |
Type : QueryList<SmartToolbarComboButtonComponent>
|
Decorators :
@ContentChildren(SmartToolbarComboButtonComponent)
|
| dropdownButton | ||||
getdropdownButton()
|
||||
|
Returns :
ElementRef
|
||||
setdropdownButton(value)
|
||||
|
Parameters :
Returns :
void
|
| allControls |
getallControls()
|
|
Returns :
any[]
|
| toolbarControls |
gettoolbarControls()
|
|
Returns :
QueryList<SmartToolbarButtonComponent | SmartToolbarComboButtonComponent | SmartToolbarSeparatorComponent | SmartToolbarItemRenderer>
|
| hasAdd |
gethasAdd()
|
|
Indicates whether the toolbar has an add button
Returns :
boolean
|
| hasSave |
gethasSave()
|
|
Indicates whether the toolbar has a save button
Returns :
boolean
|
| hasCancel |
gethasCancel()
|
|
Indicates whether the toolbar has a cancel button
Returns :
boolean
|
| hasDelete |
gethasDelete()
|
|
Indicates whether the toolbar has a delete button
Returns :
boolean
|
| isAddDisabled |
getisAddDisabled()
|
|
Indicates whether the toolbar's add button is disabled
Returns :
boolean
|
| isSaveDisabled |
getisSaveDisabled()
|
|
Indicates whether the toolbar's save button is disabled
Returns :
boolean
|
| isCancelDisabled |
getisCancelDisabled()
|
|
Indicates whether the toolbar's cancel button is disabled
Returns :
boolean
|
| isDeleteDisabled |
getisDeleteDisabled()
|
|
Indicates whether the toolbar's delete button is disabled
Returns :
boolean
|
| isPreviousDisabled |
getisPreviousDisabled()
|
|
Indicates whether the toolbar's previous button is disabled
Returns :
boolean
|
| isNextDisabled |
getisNextDisabled()
|
|
Indicates whether the toolbar's next button is disabled
Returns :
boolean
|
| hasCopy |
gethasCopy()
|
|
Indicates whether the toolbar has a copy button
Returns :
boolean
|
| isCopyDisabled |
getisCopyDisabled()
|
|
Indicates whether the toolbar's copy button is disabled
Returns :
boolean
|
| buttons | ||||||
setbuttons(value: string)
|
||||||
|
A comma delimited list of buttons that the toolbar should display. Possible values: add, delete, cancel, save, copy
Parameters :
Returns :
void
|
| toolbarButtons |
gettoolbarButtons()
|
|
A list of the names of the buttons displayed by the toolbar
Returns :
string[]
|
| buttonWidthClass |
getbuttonWidthClass()
|
|
The appropriate bootstrap grid layout CSS class that should be applied to the toolbar buttons. The value is obtained by dividing the total number of grid layout columns (12) by the number of buttons that are displayed. e.g. if the toolbar is displaying the add, save, delete and cancel buttons, the value would be 'col-3' since 12 / 4 = 3.
Returns :
string
|
| activeIOTarget |
getactiveIOTarget()
|
|
The instance name of the Smart Viewer representing the current IO target
Returns :
string
|
| disabledButtons | ||||||
getdisabledButtons()
|
||||||
|
Returns :
string
|
||||||
setdisabledButtons(value: string)
|
||||||
|
The names of the buttons that are or should be disabled by the toolbar.
Parameters :
Returns :
void
|
| hasHamburgerMenuItems |
gethasHamburgerMenuItems()
|
|
Returns :
boolean
|
<div class="toolbar-wrapper row" [ngClass]="{ cefsharp: isCefsharp }" [ngStyle]="toolbarStyle" #containerRef>
<div class="w-100" (onSizeChanged)="toolbarSizeChanged($event)"></div>
<ng-content></ng-content>
<smart-toolbar-button *ngIf="navigation" role="previous"></smart-toolbar-button>
<smart-toolbar-button *ngIf="navigation" role="next"></smart-toolbar-button>
<div class="dropdown" #dropDownButton [hidden]="!hasHamburgerMenuItems">
<button kendoButton class="dropdown-toggle smart-toolbar-button smart-toolbar-item" type="button" data-toggle="dropdown" style="margin-left: 0px !important; margin-right: 0px !important;">
<i class="fa fa-bars"></i>
</button>
<ul role="menu" class="dropdown-menu dropdown-menu-right smart-toolbar-dropdown-menu">
<li role="menuitem" *ngFor="let item of hamburgerMenuItems">
<div class="smart-toolbar-menu-item">
<ToolbarDropDownControl class="dropdown-item" [control]="item.control"></ToolbarDropDownControl>
</div>
</li>
</ul>
</div>
<!--
<kendo-dropdownbutton #dropdownButton *ngIf="hasHamburgerMenuItems" iconClass="fa fa-bars" [data]="hamburgerMenuItems" class="smart-toolbar-item last" (close)="popupMenuClosing($event)" (blur)="popupMenuBlurred($event)" (focus)="popupMenuFocused($event)" (itemClick)="popupMenuClicked($event)">
<ng-template kendoDropDownButtonItemTemplate let-dataItem>
<ToolbarDropDownControl (click)="$event.preventDefault() && $event.cancelBubble() && $event.stopPropagation()" style="z-index: 9999" [control]="dataItem.control"></ToolbarDropDownControl>
</ng-template>
</kendo-dropdownbutton>
-->
<!--
<button *ngIf="navigation" [disabled]="isPreviousDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('previous')"><</button>
<button *ngIf="navigation" [disabled]="isNextDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('next')">></button>
-->
</div>
<HiddenButtonHolder #hiddenButtonHolder></HiddenButtonHolder>
<!--
<button *ngIf="hasAdd" [disabled]="isAddDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('add')">Add</button>
<button *ngIf="hasCopy" [disabled]="isCopyDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('copy')">Copy</button>
<button *ngIf="hasSave" [disabled]="isSaveDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('save')">Save</button>
<button *ngIf="hasCancel" [disabled]="isCancelDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('cancel')">Cancel</button>
<button *ngIf="hasDelete" [disabled]="isDeleteDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('delete')">Delete</button>
<button *ngIf="navigation" [disabled]="isPreviousDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('previous')"><</button>
<button *ngIf="navigation" [disabled]="isNextDisabled" kendoButton [class]="buttonWidthClass" (click)="clickButton('next')">></button>
-->
./smart-toolbar.component.css
::ng-deep .smart-toolbar-item {
float: left;
margin-right: 5px;
}
::ng-deep .toolbar-wrapper.row {
margin-left: 0 !important;
margin-right: 0 !important;
height: inherit !important;
}
::ng-deep .smart-toolbar-item, ::ng-deep .smart-toolbar-button {
min-height: 30px;
}
::ng-deep .smart-toolbar-item.last {
margin-left: 5px;
margin-right: 0px !important;
}
::ng-deep .toolbar-wrapper li.k-item {
z-index: -1 !important;
}
::ng-deep .smart-toolbar-menu-item {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
::ng-deep ToolbarDropDownControl * .smart-toolbar-item {
width: 100% !important;
}
::ng-deep ToolbarDropDownControl * button.smart-toolbar-item {
text-align: left !important;
}
.smart-toolbar-button.dropdown-toggle {
width: 30px
}
.toolbar-wrapper.cefsharp {
display: none !important;
}
.resizeable-container {
width: 100%;
}