Log in to start a topic

Adding buttons/controls to wijmo grid cell through ts code

Posted by: milind.soman01 on 20 August 2019, 7:54 am EST

  • milind.soman01

    • Post Options:
    • Link
      Copy

    Posted 20 August 2019, 7:54 am EST

    Hi

    i have added button to my wijmo grid in html using below code

    <wj-flex-grid-column [header]="'Delete Row'" align="center" [width]="120" [isReadOnly]="true">
                      <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-row="row">
                       <button (onClick)="delRow(grid, row)">Delete Row</button>
                      </ng-template>
                    </wj-flex-grid-column>

    i want to add similar code though my ts file i.e component.ts

  • ashwin.saxena

    Posted 21 August 2019, 12:35 am EST

    Hi Milind,

    You may use the itemFormatter property to add a button to the desired column and handle the click event of the FlexGrid to delete the desired row. Please refer to the sample below:

    https://stackblitz.com/edit/angular-ovunj2

    Regards,

    Ashwin

  • milind.soman01

    Posted 21 August 2019, 5:31 am EST

    Thanks Ashwin.

    I am able to add delete button to grid using itemFormatter.

    I need add click event on the delete button through ts file since my grid is created dynamically.

    Could you please suggest.

    code to create grid is as below

    
 createGrid(host, itemsSource) {
    return new wjGrid.FlexGrid(host, {
      autoGenerateColumns: false,
      columns: [
        { binding: 'Name', header:'Name', isReadOnly: true },
        { binding: 'Age', header:'Age', isReadOnly: true, width: '*' },
        { binding: 'marks', header:'marks',isReadOnly: true, width: '*' }
      
        
        
        new wjGrid.Column({
          header:'Delete'
          
        })
        
      ],
      
      itemFormatter : this._itemFormatter,
      itemsSource: itemsSource
    });
  }

  • milind.soman01

    Posted 21 August 2019, 9:18 am EST

    Hi Ashwin,

    I am able to attach click event to delete button added in grid. using the item formater

    code is as mentioned below

    Now the issue is I am not able to call the methods from by component in that event.

    
 private _itemFormatter(p: wjGrid.GridPanel, r: number, c: number, cell: HTMLElement) {
        if(p.cellType === wjGrid.CellType.Cell && p.columns[c].header === 'Delete') {
      cell.innerHTML = `<button  class="delete-row">Delete Row</button>`
      cell.addEventListener('mousedown',(e)=>{ 
//alert works fine
       alert(JSON.stringify(p.rows[r].dataItem));
// below call to del method throws error 
        this.del(p.rows[r].dataItem);
      });
      
    }
}

    I am not able to call the del method from my component class

    please suggest

    Thanks

    Milind

  • ashwin.saxena

    Posted 22 August 2019, 1:02 am EST

    Hi Milind,

    Please refer to the updated sample below:

    https://stackblitz.com/edit/angular-zzrrus

    Instead of adding an event handler on each cell of the grid, I would recommend you to add the event listener on the hostElement of the FlexGrid and use the hitTest method to get the current row and delete it.

    ~regards

  • milind.soman01

    Posted 22 August 2019, 9:26 am EST

    Thanks Ashwin…

    I have added listener to host element its working

  • milind.soman01

    Posted 22 August 2019, 10:00 am EST

    Hi Ashwin,

    i am trying implement paging and filtering.

    I added below code

    
   <div class="col-md-5">
                    <input number-input type="text" class="form-control" placeholder="0 or empty is for no paging." [(ngModel)]="cvPaging.pageSize" />
                </div>
                <div class="btn-group col-md-7"  >
                    <button type="button" class="btn btn-default"
                            [disabled]="cvPaging.pageIndex <= 0"
                            (click)="cvPaging.moveToFirstPage()">
                        <!-- <span class="glyphicon glyphicon-fast-backward"></span> -->
                    </button>
                    <button type="button" class="btn btn-default"
                    [disabled]="cvPaging.pageIndex <= 0"
                    (click)="cvPaging.moveToPreviousPage()">
                         <span class="glyphicon glyphicon-step-backward"></span> 
                    </button>
                    <!-- <div  class="btn btn-default" disabled style="width:100px"> 
                        {​{'cvPaging.pageIndex' + 1 | number}​}
                        / {​{'cvPaging.pageCount' | number}​}
                     </div>  -->
                    <button type="button" class="btn btn-default"
                    [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
                    (click)="cvPaging.moveToNextPage()">
                        <span class="glyphicon glyphicon-step-forward"></span> 
                    </button>
                    <button type="button" class="btn btn-default"
                    [disabled]="cvPaging.pageIndex >= cvPaging.pageCount - 1"
                    (click)="cvPaging.moveToLastPage()">
                        <span class="glyphicon glyphicon-fast-forward"></span> 
                    </button>
                </div>

    but its not working.UI rendering is failing because of below code

    
     <div  class="btn btn-default" disabled style="width:100px"> 
                        {​{'cvPaging.pageIndex' + 1 | number}​}
                        / {​{'cvPaging.pageCount' | number}​}
                     </div>

    could you please suggest on paging and filtering.

    Thanks

    Milind Soman

  • ashwin.saxena

    Posted 23 August 2019, 3:00 am EST

    Hi,

    I have replied to your new case below:

    https://www.grapecity.com/forums/wijmo/paging-and-filtering-wijmo

    ~regards

  • milind.soman01

    Posted 23 August 2019, 10:38 am EST

    Thanks Ashwin!

  • kurvashiva.kumar

    Posted 16 July 2021, 1:56 am EST

    Hello Mr. Ashwin Saxena !

    I appreciate your quick replies. I am a newbie in the IT industry. I have no idea about wijmo flex grid however I have a task to complete.

    Task Description:

    There is a flex grid which has two columns and many number of rows.

    Each row in the first column contains a radio button element. The radio button is selected only when clicked on the button but the task is to make the radio button selected wherever clicked on the cell. (sorry that can’t reveal any code)

    I have tried using label element which was able to make the text beside the button clickable but there is lot of space beside the text which needs to be made clickable.

    Assume a basic flex grid with two columns and many rows (rows are dynamic) and radio button in the first cloumn.

  • sharad.tomer

    Posted 19 July 2021, 5:37 am EST

    Hi,

    To achieve the required functionality you may handle click event on FlexGrid’s hostElement as follows -

     initGrid(flex: wjcGrid.FlexGrid) {
    flex.hostElement.addEventListener('click', e => {
      let ht = flex.hitTest(e);
      let input = flex.cells
        .getCellElement(ht.row, ht.col)
        .querySelector('input');
      flex.rows[ht.row].dataItem.id = input.value;
    });
  }

    For better understanding, you may refer to the below code sample -

    https://stackblitz.com/edit/angular-vejd9q?file=src%2Fapp%2Fapp.component.ts

    Regards

  • kurvashiva.kumar

    Posted 22 July 2021, 4:13 am EST - Updated 3 October 2022, 1:12 pm EST

    Hello Mr. Sharad Tomer ,

    Thank you for the solution. But there are few problems with the given solution.

    Firstly , ’ name attribute ’ is not included for the radio button element which I made sure to include so that it would work just like a radio button.

    The main issue is that ,once a radio button is selected it’s id getting changed to a string. so when we I select another radio button and if I want to select the previous radio button , I am unable to select it . ( see images for reference )

    i.e. We are able to select the radio buttons only once . if we click a button once we can’t select it again. please give me a better solution ASAP.

    ( please add name attribute for the radio button element )

    Thank you.

    1920×1080 244 KB
    1920×1080 244 KB
    1920×1080 244 KB

  • sharad.tomer

    Posted 25 July 2021, 8:28 am EST

    Thank you for the additional information. The last shared sample didn’t have any functionality related to the radio button, it was just to demonstrate the clicking functionality, To select only a single item, you may bind the radio button with a class property. Please refer to the following sample demonstrating the same:

    https://stackblitz.com/edit/angular-2lb7ub?file=src%2Fapp%2Fapp.component.ts

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.