jQuery UI Widgets Forums Angular Angular5 Edit Delete Button not calling Method.

This topic contains 12 replies, has 3 voices, and was last updated by  Martin 2 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author

  • PoojaGumalwar
    Participant

    Hi,
    I am using Angular 5, I am not getting solution to how to update and delete button call method and get data from rows.
    Please provide me solution as soon as possible. I am trying too hard but its not getting properly. And I want to ask one thing more how to make treegrid width set according to Desktop, because by using width to treegrid in IE its not getting proper width according to desktop width and design is not able to see in MAC also.

    ngOnInit() {
    this.getOUList();

    }

    getOUList() {
    this.apiService
    .getOUlist()
    .subscribe(
    /* happy path */ p => {
    this.ouList = p;
    console.log(“OULIST—————–“, this.ouList);

    this.source =
    {

    dataType: ‘json’,
    datafields: [
    { name: ‘ouName’ },
    { name: ‘ouCode’ },
    { name: ‘isDisabled’ },
    { name: ‘expanded’ },
    { name: “reportTo”, map: ‘reportTo>completeName’ },
    { name: ‘parentOUName’ },
    { name: ‘ouId’, type: ‘number’ },
    { name: ‘parentOU’, type: ‘number’, map: ‘parentOU>ouId’ }
    ],
    hierarchy:
    {
    keyDataField: { name: ‘ouId’ },
    parentDataField: { name: ‘parentOU’ }
    },
    id: ‘ouId’,
    localData: this.ouList
    };

    this.dataAdapter = new jqx.dataAdapter(this.source);

    this.columns =
    [
    { text: ‘Name’, dataField: ‘ouName’, width: “258px” },
    { text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
    { text: ‘Is Disable’, dataField: ‘isDisabled’, width: “110px” },
    { text: ‘Parent OU Name’, dataField: ‘parentOUName’, width: “195px” },
    { text: ‘Report To Name’, dataField: ‘reportTo’, width: “195px” },
    {
    text: ‘Action’, width: “70px”, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    // render custom column.
    return “<button data-row='” + row + “‘ style=’font-size: large;’ class=’fa fa-edit custom-fa'(click)=’UpdateButton(oudata)’ ></button> <i margin-left: 15px;’ data-row='” + row + “‘ style=’font-size: large;’ class=’fa fa-trash-o custom-fa’ (click)=’DeleteButton(oudata)’></i>”;
    }
    }

    ];

    },
    /* error path */ e => this.recodrerrorMessage = e,
    /* onCompleted */() => this.isLoading = false);
    this.searchableList = [${Constants.ouCode}, ${Constants.ouName}, ${Constants.isDisabled}, ${Constants.reportTo}, ${Constants.parentOU}];
    this.totalRec = this.ouList.length;
    }

    /*
    * DELETE API Call for OU delete data.
    */
    deleteOUData(oudata) {
    this.apiService
    .deleteOUData(oudata.ouId)
    .subscribe(
    result => {
    if (result) {
    //window.location.href = “/administration/ou-management”;
    this.refresh();
    }
    },
    e => {
    this.errorMessage = e;
    this.erroralert(this.errorMessage)
    },
    () => this.isLoading = false
    );
    }

    /*
    * Refresh current page.
    */
    refresh(): void {
    location.reload();
    }

    /*
    * Delete button for delete data from list.
    */
    DeleteButton(oudata) {
    console.log(“I am call to delete”);
    let that = this;
    that.alertService.confirmThis(${Constants.DELETEOU_CONFIRM}, function () {
    //ACTION: Do this If user says YES
    that.deleteOUData(oudata);
    }, function () {
    //ACTION: Do this if user says NO
    })
    }

    /*
    * Update button for update data from list.
    * route for update form.
    */
    UpdateButton(oudata) {
    console.log(“I am call to update”);
    this.router.navigate([${NavigationConstants.ROUTE_TO_UPDATEOU_URL}${NavigationConstants.BACKSLASH} + oudata.ouId]);
    }


    Martin
    Participant

    Hello PoojaGumalwar,

    I provided you a solution on how to call your methods on button click in your other Topic

    Best Regards,
    Martin

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


    PoojaGumalwar
    Participant

    Hi Martin,
    As you telling me solution I am call one method in NgOnInit,
    ngOnInit() {
    this.getOUList();

    }

    getOUList() {
    this.apiService
    .getOUlist()
    .subscribe(
    /* happy path */ p => {
    this.ouList = p;
    console.log(“OULIST—————–“, this.ouList);

    this.source =
    {

    dataType: ‘json’,
    datafields: [
    { name: ‘ouName’ },
    { name: ‘ouCode’ },
    { name: ‘isDisabled’ },
    { name: ‘expanded’ },
    { name: “reportTo”, map: ‘reportTo>completeName’ },
    { name: ‘parentOUName’ },
    { name: ‘ouId’, type: ‘number’ },
    { name: ‘parentOU’, type: ‘number’, map: ‘parentOU>ouId’ }
    ],
    hierarchy:
    {
    keyDataField: { name: ‘ouId’ },
    parentDataField: { name: ‘parentOU’ }
    },
    id: ‘ouId’,
    localData: this.ouList
    };

    this.dataAdapter = new jqx.dataAdapter(this.source);

    this.columns =
    [
    { text: ‘Name’, dataField: ‘ouName’, width: “258px” },
    { text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
    { text: ‘Is Disable’, dataField: ‘isDisabled’, width: “110px” },
    { text: ‘Parent OU Name’, dataField: ‘parentOUName’, width: “195px” },
    { text: ‘Report To Name’, dataField: ‘reportTo’, width: “195px” },
    {
    text: ‘Action’, width: “70px”, cellsAlign: ‘center’, align: “center”, columnType: ‘none’, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
    // render custom column.
    return “<button data-row=’” + row + “‘ style=’font-size: large;’ class=’fa fa-edit custom-fa'(click)=’UpdateButton(oudata)’ ></button> <i margin-left: 15px;’ data-row=’” + row + “‘ style=’font-size: large;’ class=’fa fa-trash-o custom-fa’ (click)=’DeleteButton(oudata)’></i>”;
    }
    }

    ];

    }, like this where render method is not calling. Please give me proper solution. I am very frustrated by resolving this issue.I am call API for list in this method and set data to column. Till yet its not hard but for calling rendered:()void={} this method not call happend. and there are error crash
    Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.

    • This reply was modified 2 years, 1 month ago by  PoojaGumalwar.

    Martin
    Participant

    Hello PoojaGumalwar,

    You should set ONLY the ouList value in your getOUList method and leave the source, data and columns outside the method.
    Also add async:true in the source’s properties.

    import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
    import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';
    import { isArray } from 'util';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent {
        @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent;
    
        ouList: any[]; 
    
        ngOnInit() {
         this.getOUList();
        }
    
       getOUList() {
        this.apiService
        .getOUlist()
        .subscribe(
        /* happy path */ p => {
         this.ouList = p;
         console.log(“OULIST—————–“, this.ouList);
         });
       }
    
        source: any =
            {
                dataType: 'json',
                datafields: [
                    { name: 'ouId', type: 'number' },
                    { name: 'ouName' },
                    { name: 'ouCode' },
                    // { name: 'reportTo', map: 'reportTo>firstName' },
                    { name: "reportTo", type: "array", map: "reportTo > firstName" },
                    { name: 'parentOU', type: 'number' }
                ],
                hierarchy:
                    {
                        keyDataField: { name: 'ouId' },
                        parentDataField: { name: 'parentOU' }
                    },
                id: 'ouId',
                localData: this.ouList,
                async: true
            };
    
        dataAdapter: any = new jqx.dataAdapter(this.source);
    
        columns: any[] = [
            { text: 'Id', dataField: 'ouId', width: "130px" },
            { text: 'Name', dataField: 'ouName', width: "350px" },
            { text: 'Code', dataField: 'ouCode', width: "130px" },
            {
                text: 'Edit', datafield: 'Edit', columntype: 'button', editable: false, sortable: false,
                cellsrenderer: (row: number): string => { return '<div class="editButton" style=" float: left"></div>' }
            }
        ];
    
        rendered = (): void => {
            let editButtons = jqwidgets.createInstance('.editButton', 'jqxButton', { width: 60, height: 24, value: 'Edit' });
            if (!isArray(editButtons)) {
                let button = editButtons;
                editButtons = [];
                editButtons.push(button);
            }
    
            let flattenCancelButtons = flatten(editButtons);
    
            function flatten(arr: any[]): any[] {
                if (arr.length) {
                    return arr.reduce((flat: any[], toFlatten: any[]): any[] => {
                        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
                    }, []);
                }
            }
    
            for (let i = 0; i < flattenCancelButtons.length; i++) {
                flattenCancelButtons[i].addEventHandler('click', (event: any): void => {
                    this.editClick(event);
                });
            }
        }
    
        rowKey: number;
    
        rowClick(event: any): void {
            this.rowKey = event.args.key;
        };
    
        editClick(event) {
            let row = this.myTreeGrid.getRow(this.rowKey.toString());
            console.log(row);
        }
    }

    Best Regards,
    Martin

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


    PoojaGumalwar
    Participant

    Hi Martin,
    I am use your code again its give on ERROR

    Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct.
    Is there I am doing something wrong. Please suggest me.

    export class OuManagementComponent{
    ngOnInit() {
    this.getOUList();
    }

    getOUList() {
    this.apiService
    .getOUlist()
    .subscribe(
    /* happy path */ p => {
    this.ouList = p;
    console.log( this.ouList);
    });
    }

    source: any =
    {
    dataType: ‘json’,
    datafields: [
    { name: ‘ouId’, type: ‘number’ },
    { name: ‘ouName’ },
    { name: ‘ouCode’ },
    // { name: ‘reportTo’, map: ‘reportTo>firstName’ },
    { name: “reportTo”, type: “array”, map: “reportTo > firstName” },
    { name: ‘parentOU’, type: ‘number’ }
    ],
    hierarchy:
    {
    keyDataField: { name: ‘ouId’ },
    parentDataField: { name: ‘parentOU’ }
    },
    id: ‘ouId’,
    localData: this.ouList,
    async: true
    };

    dataAdapter: any = new jqx.dataAdapter(this.source);

    columns: any[] = [
    { text: ‘Id’, dataField: ‘ouId’, width: “130px” },
    { text: ‘Name’, dataField: ‘ouName’, width: “350px” },
    { text: ‘Code’, dataField: ‘ouCode’, width: “130px” },
    {
    text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, editable: false, sortable: false,
    cellsrenderer: (row: number): string => { return ‘<div class=”editButton” style=” float: left”></div>’ }
    }
    ];

    rendered = (): void => {
    let editButtons = jqwidgets.createInstance(‘.editButton’, ‘jqxButton’, { width: 60, height: 24, value: ‘Edit’ });
    if (!isArray(editButtons)) {
    let button = editButtons;
    editButtons = [];
    editButtons.push(button);
    }

    let flattenCancelButtons = flatten(editButtons);

    function flatten(arr: any[]): any[] {
    if (arr.length) {
    return arr.reduce((flat: any[], toFlatten: any[]): any[] => {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
    }, []);
    }
    }

    for (let i = 0; i < flattenCancelButtons.length; i++) {
    flattenCancelButtons[i].addEventHandler(‘click’, (event: any): void => {
    this.editClick(event);
    });
    }
    }

    rowKey: number;

    rowClick(event: any): void {
    this.rowKey = event.args.key;
    };

    editClick(event) {
    let row = this.myTreeGrid.getRow(this.rowKey.toString());
    console.log(row);
    }
    }

    In HTML:
    <jqxTreeGrid #myTreeGrid
    (onRowClick)=”rowClick($event)”
    [source]=”dataAdapter”
    [pageable]=”false”
    [sortable]=”false”
    [columns]=”columns”
    [rendered]=”rendered”
    >
    </jqxTreeGrid>


    Martin
    Participant

    Hello PoojaGumalwar,

    I’ve updated the code. I hope this would work:

    import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
    import { jqxTreeGridComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxtreegrid';
    import { isArray } from 'util';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent {
        @ViewChild('myTreeGrid') myTreeGrid: jqxTreeGridComponent;
    
        ouList: any[]; 
        dataLoaded: boolean;
    
        ngOnInit() {
         this.getOUList();
        }
    
       getOUList() {
        this.apiService
        .getOUlist()
        .subscribe(
        /* happy path */ p => {
         this.ouList = p;
         console.log(“OULIST—————–“, this.ouList);
         this.source.localData = this.ouList;
         this.dataAdapter = new jqx.dataAdapter(this.source, { autoBind: true });
         this.myTreeGrid.updateBoundData();
         this.dataLoaded = true;
         });     
       }
    
        source: any =
            {
                dataType: 'json',
                datafields: [
                    { name: 'ouId', type: 'number' },
                    { name: 'ouName' },
                    { name: 'ouCode' },
                    // { name: 'reportTo', map: 'reportTo>firstName' },
                    { name: "reportTo", type: "array", map: "reportTo > firstName" },
                    { name: 'parentOU', type: 'number' }
                ],
                hierarchy:
                    {
                        keyDataField: { name: 'ouId' },
                        parentDataField: { name: 'parentOU' }
                    },
                id: 'ouId',
                localData: this.ouList,        
            };
    
        dataAdapter: any = new jqx.dataAdapter(this.source);
    
        columns: any[] = [
            { text: 'Id', dataField: 'ouId', width: "130px" },
            { text: 'Name', dataField: 'ouName', width: "350px" },
            { text: 'Code', dataField: 'ouCode', width: "130px" },
            {
                text: 'Edit', datafield: 'Edit', columntype: 'button', editable: false, sortable: false,
                cellsrenderer: (row: number): string => { return '<div class="editButton" style=" float: left"></div>' }
            }
        ];
    
        rendered = (): void => {
            if (!this.dataLoaded){
                return;
            } 
            let editButtons = jqwidgets.createInstance('.editButton', 'jqxButton', { width: 60, height: 24, value: 'Edit' });
            if (!isArray(editButtons)) {
                let button = editButtons;
                editButtons = [];
                editButtons.push(button);
            }
    
            let flattenCancelButtons = flatten(editButtons);
    
            function flatten(arr: any[]): any[] {
                if (arr.length) {
                    return arr.reduce((flat: any[], toFlatten: any[]): any[] => {
                        return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
                    }, []);
                }
            }
    
            for (let i = 0; i < flattenCancelButtons.length; i++) {
                flattenCancelButtons[i].addEventHandler('click', (event: any): void => {
                    this.editClick(event);
                });
            }
        }
    
        rowKey: number;
    
        rowClick(event: any): void {
            this.rowKey = event.args.key;
        };
    
        editClick(event) {
            let row = this.myTreeGrid.getRow(this.rowKey.toString());
            console.log(row);
        }
    }

    Best Regards,
    Martin

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


    PoojaGumalwar
    Participant

    Hi Martin,
    By giving you solution now I got button to action but treeview is disturb completely. Its not create treeview in table. Please check,

    Thanks and regards,
    Pooja Gumalwar


    Martin
    Participant

    Hello PoojaGumalwar,

    Maybe you should check if your datafields and columns correspond to your data because when I run it with the code that I’ve sent you above and with some sample date, the treeview works fine.

    Best Regards,
    Martin

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


    ilywanzi
    Participant

    Hi, I have tried the exact same code, though the button is successfully rendered, the click event also work, but if I resize the browser, the button will disappear. When I inspect this button, it shows this: <div class="editButton" style=" float: left"></div>

    I have tried to change the columnType to “button”, then it won’t disappear even I resize the browser. But this way cause the button position problem.

    Can I get some idea to fix this issue?

    Thanks


    Martin
    Participant

    Hello ilywanzi,

    You could use the cellsRenderer method to position the button as you need it.
    You could take a look at the following Example.

    Best Regards,
    Martin

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


    ilywanzi
    Participant

    Thanks Martin, I will try this out.


    ilywanzi
    Participant

    Hi, Martin, I try to use the same code as your example, but got this error after the page rendered, then click the button, ERROR Error: Invalid Selector! Please, check whether the used ID or CSS Class name is correct..
    This error is from the render function, let uglyEditButtons = jqwidgets.createInstance('.editButton', 'jqxButton', { theme: 'material', width: 60, height: 24, value: 'Edit' });
    Can I know what’s wrong here? Thanks


    Martin
    Participant

    Hello ilywanzi,

    Have you put the editButton class in the button column’s cellsRenderer?
    This error means the selector doesn’t find such element.

    Best Regards,
    Martin

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

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

You must be logged in to reply to this topic.