jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Angular 2 jqxbutton
This topic contains 1 reply, has 2 voices, and was last updated by Ivo Zhulev 8 years, 8 months ago.
-
AuthorAngular 2 jqxbutton Posts
-
I have two issues when working with a button.
1. I can disable the button through properties and button class changes and disable=true but button responsive to mouse click.
2. I can not get cursor set to pointer. I believe this is inheritance issue with css classes. I have Bootstrap 3.3.7 loaded first and it sets cursor to pointer for role=button. Then jqx-button class resets cursor to default. If I change default to pointer it works through browser development function.
I’m using chrome browser.
Below is Angular 2 component.
/// <reference path=”../vendor/jqwidgets-ts/jqwidgets.d.ts” />
import {Component, ViewChild, AfterViewChecked, ViewEncapsulation, DoCheck, ViewContainerRef} from ‘@angular/core’;import {Overlay, overlayConfigFactory} from ‘angular2-modal’;
import {Modal, BSModalContext} from ‘angular2-modal/plugins/bootstrap’;import {jqxGridComponent} from ‘../vendor/jqwidgets-ts/angular_jqxgrid’;
import {jqxButtonComponent} from ‘../vendor/jqwidgets-ts/angular_jqxbutton’;
import {jqxNotificationComponent} from ‘../vendor/jqwidgets-ts/angular_jqxnotification’;import {LogService} from “./log.service”;
@Component({
selector: ‘my-grid’,
template: `<span defaultOverlayTarget></span>
{{AccountName}}
<angularGrid (OnRowclick)=”OnRowclick($event)”></angularGrid>
<div>
<angularButton (OnClick)=”onDelete()”></angularButton>
</div>
<angularNotification>
<div> Account has been succesfuly deleted.</div>
</angularNotification>
`,
directives: [jqxGridComponent, jqxButtonComponent, jqxNotificationComponent],
providers: [Modal]
})
export class GridComponent implements AfterViewChecked, DoCheck {
AccountName: string = ”;
RowIndex: number = 0;
TotalRows: number = 0;
MessageNotification: string = ”;
@ViewChild(jqxGridComponent) myGrid: jqxGridComponent;
@ViewChild(jqxButtonComponent) deleteButton: jqxButtonComponent;
@ViewChild(jqxNotificationComponent) msgNotification: jqxNotificationComponent;
settings: jqwidgets.GridOptions;
deleteButtonSettings: jqwidgets.ButtonOptions;
msgNotificationSettings: jqwidgets.NotificationOptions;
flag: Boolean = false;url = “../vendor/data/accounts.json”;
source =
{
datatype: “json”,
datafields: [
{name: ‘AcctName’, type: ‘string’},
{name: ‘AcctCategory’, type: ‘string’},
{name: ‘AcctType’, type: ‘string’},
{name: ‘AcctNumber’, type: ‘string’},
{name: ‘AcctOpenDate’, type: ‘date’},
{name: ‘AcctDescription’, type: ‘string’},
{name: ‘AcctBalance’, type: ‘int’},
{name: ‘AcctStatus’, type: ‘bool’}
],
url: this.url
};dataAdapter = new $.jqx.dataAdapter(this.source, {
downloadComplete: function (data, status, xhr) {
},
loadComplete: function (data) {
},
loadError: function (xhr, status, error) {
}
});constructor(private logService: LogService, public modal: Modal) {
this.settings = {
width: ‘100%’,
source: this.dataAdapter,
pageable: false,
autoheight: true,
sortable: true,
altrows: false,
theme: ‘energyblue’,
selectionmode: ‘none’,
enabletooltips: true,
editable: false,
columns: [
{
text: ‘Name’,
datafield: ‘AcctName’,
width: ‘20%’
},
{
text: ‘Description’,
datafield: ‘AcctDescription’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘20%’
},
{
text: ‘Category’,
datafield: ‘AcctCategory’,
cellsalign: ‘left’,
align: ‘left’,
width: ‘10%’
},
{
text: ‘Type’,
datafield: ‘AcctType’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘10%’
},
{
text: ‘Number’,
datafield: ‘AcctNumber’,
align: ‘left’,
cellsalign: ‘left’,
width: ‘10%’
},
{
text: ‘Open Date’,
datafield: ‘AcctOpenDate’,
align: ‘left’,
cellsalign: ‘left’,
cellsformat: ‘MM/dd/yyyy’,
width: ‘10%’
},
{
text: ‘Balance’,
datafield: ‘AcctBalance’,
align: ‘center’,
cellsalign: ‘right’,
cellsformat: ‘d2’,
width: ‘10%’
},
{
text: ‘Status Active ?’,
datafield: ‘AcctStatus’,
align: ‘center’,
cellsalign: ‘center’,
columntype: ‘checkbox’,
width: ‘10%’
},
],
columngroups: [
{text: ‘Product Details’, align: ‘center’, name: ‘ProductDetails’}
]
};this.deleteButtonSettings = {
width: 100,
height: 25,
theme: ‘energyblue’,
value: ‘Delete’,
disabled: false,
textImageRelation: “imageBeforeText”,
textPosition: “left”,
imgSrc: “../vendor/jqwidgets/styles/images/close.png”
};this.msgNotificationSettings = {
width: 350, position: “bottom-right”, opacity: 0.9,
autoOpen: false, animationOpenDelay: 800,
autoClose: true, autoCloseDelay: 3000,
template: “success”
};
}ngDoCheck() {
this.logService.pushedData.subscribe(
data => {
this.AccountName = data.SelectedAccount;
this.RowIndex = data.SelectedRowIndex;
this.TotalRows = data.TotalRows;
}
);
}setRow(): void {
this.myGrid.selectrow(this.RowIndex);}
public ngAfterViewChecked(): void {
if (this.flag === false) {
var self = this;
self.Initialize();
}
this.myGrid.clearselection();
this.myGrid.selectrow(this.RowIndex);
this.flag = true;
}Initialize(): void {
this.myGrid.createWidget(this.settings);
this.deleteButton.createWidget(this.deleteButtonSettings);
this.msgNotification.createWidget(this.msgNotificationSettings);}
onDelete(): void {
var selectedrowindex = this.myGrid.getselectedrowindex();
//var rowscount = this.myGrid.getdatainformation.rowscount;
var id = this.myGrid.getrowid(selectedrowindex);var data = this.myGrid.getrowdata(selectedrowindex);
//alert(data.AcctName + ” ” + data.AcctBalance);this.modal.confirm()
.size(‘lg’)
.isBlocking(true)
.showClose(true)
.keyboard(27)
.titleHtml(‘<h4>Delete Account?</h4>’)
.body(‘Select the “<strong class=”alert-success”>Yes” button to delete or the “<strong class=”alert-danger”>No” button to cancel.’)
.okBtn(‘Yes’)
.okBtnClass(‘btn btn-success’)
.cancelBtn(‘No’)
.cancelBtnClass(‘btn btn-danger’)
.open()
.catch(err => alert(“ERROR”)) // catch error not related to the result (modal open…)
.then(dialog => dialog.result) // dialog has more properties,lets just return the promise for a result.
.then(result => {this.myGrid.deleterow(id);
this.MessageNotification = ‘Account has been delete.’;
this.msgNotification.open();
}
) // if were here ok was clicked.
.catch(err => {
}) // if were here it was cancelled (click or non block click)
;
}OnRowclick(event): void {
console.log(‘Row click’);
var datainformation = this.myGrid.getdatainformation();
var rowscount = datainformation.rowscount;
alert(rowscount);var args = event.args;
// // row’s bound index.
var rowBoundIndex = args.rowindex;
this.RowIndex = args.rowindex;
this.myGrid.clearselection();
this.myGrid.selectrow(rowBoundIndex);
}OnRowselect(event): void {
console.log(‘Row Select’);
}
}Hi Gary,
1. We are updating our components to RC6 and soon you will have the updated examples and bugfixes.
2. Just set !important to it.Best Regards,
IvojQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.