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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Angular 2 jqxbutton #87256

    Gary
    Participant

    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’);

    }
    }

    Angular 2 jqxbutton #87302

    Ivo Zhulev
    Participant

    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,
    Ivo

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.