Log in to start a topic

Wijmo 5 ItemFormatter Angular 2

Posted by: shauryadeep_c on 14 September 2017, 12:04 pm EST

  • shauryadeep_c

    • Post Options:
    • Link
      Copy

    Posted 14 September 2017, 12:04 pm EST

    Hi,

    I am currently testing Wijmo 5 Trial for using in a product of ours.

    The Item Formatter class is not being invoked when I have marked a certain attribute checked. Implementing similar to http://jsfiddle.net/mkgupta911/cjbv8yyt/

      setSelected(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs){
    for (var index in flex.selectedRows){
        flex.selectedRows[index].cssClass = "row_selected";
    }
     
  }

  formatItem(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) {
        // add/ handle check box in columnheader
        if (e.panel.cellType == wjcGrid.CellType.Cell) {
            var row = flex.rows[e.row];
            if (row.dataItem.selected) {
              console.log("herwe123");
              e.cell.classList.add("row_selected");
            }
            else{
              e.cell.classList.remove("row_selected");
            }
        }
    }

    Whenenver following line runs(since its in a if condition)

    flex.selectedRows[index].cssClass = "row_selected";

    In template wj-flex-grid component has the event attached as 

    (formatItem)="formatItem(flex,$event)"

    Only then the itemformatter method is invoked which due to which the rows do not get unhighlited when checkbox is deselected.

    My use case is the row should be highlighted if the checkbox is checked. I cannot add conditional classes since there is no row templating available in wijmo.

    Please advise an approach for this.

  • manish-gupta1

    Posted 14 September 2017, 12:04 pm EST

    Hi,

    Thanks for evaluating Wijmo.

    Please use the following code snippet for using itemFormatter in the project:

    //HTML
<wj-flex-grid [itemsSource]="data" [itemFormatter]="itemFormatter"></wj-flex-grid>
//TS
class AppCmp{
    itemFormatter=(panel,r,c,cell)=>{
        var rows=panel.rows[r];
        if(rows.dataItem.active){
           cell.style.backgroundColor='blue';
        } 
    }
}

    If you would like to change backgroundColor of row using CSS class, set the calproperty of Row class using following code snippet for the same:

    formatItem(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) {
        // add/ handle check box in columnheader
        if (e.panel.cellType == wjcGrid.CellType.Cell) {
            var row = flex.rows[e.row];
            if (row.dataItem.selected) {
              console.log("herwe123");
              row.cssClass="row_selected";
            }
            else{
              row.cssClass="";
            }
        }
    }

    Thanks,

    Manish Kumar Gupta

  • shauryadeep_c

    Posted 14 September 2017, 12:04 pm EST

    Hi Manish,

    Thanks for the reply but this does not solve my problem. The ItemFormatter here is invoked only on initialization and not on item selection.

    When I select an item using the checkbox this code runs.

    setSelected(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) {
    for (var index in flex.selectedRows){
        flex.selectedRows[index].cssClass = "row_selected";
    }

  }

    If the below line is in the code flow, then too the code itemformatter is invoked. But since it checks for selected rows, the code flow does not invoke the method. Possibly because no css class is being changed since it only operates on selected rows.

    flex.selectedRows[index].cssClass = “row_selected”;

    Please suggest something.

  • manish-gupta1

    Posted 14 September 2017, 12:04 pm EST

    Hi Shauryadeep,

    As we understand, you would like to change the background for selectedRows. If you are using default selection of rows, you do not need to use formatItem/itemFormatter for the same. You just need to change the style for selectedRows.

    For your reference, please see the fiddle that implements the same.

    If you are changing selection through some event/ method, you can modify cssClass for the selectedRows in the same method/event.

    If the issue still causes, please modify the sample depicting your issue so that we can debug and assist you accordingly.

    Thanks,

    Manish Kumar Gupta

  • shauryadeep_c

    Posted 14 September 2017, 12:04 pm EST

    Hi,

    I am trying to implement something like this, where the style is set in the itemformatter method.The issue is itemformatter is not being invoked.

    My Template

    wj-flex-grid #flex headersVisibility=1 [itemFormatter]="itemFormatter" [itemsSource]="dataCollection" [allowSorting]="allowSorting" [selectionMode]="selectionMode"
            [allowDragging]="allowDragging">
            <wj-flex-grid-column *ngFor="let column of columnDefCollection" [header]="column.header" [binding]="column.binding" [width]="115"
                [isReadOnly]="!column.editable">
                <template wjFlexGridCellTemplate [cellType]="'Cell'" *ngIf="column.isCustomCellTemplate" let-item="item">
                    <!--<wj-list-box #listBox style="height:150px;width:110px;" [itemsSource]="listBoxItemsSource">
                    </wj-list-box>-->
                    <p><input type="checkbox" [(ngModel)]="item.active" /></p>
                </template>
            </wj-flex-grid-column>
        </wj-flex-grid>
        <input type="button" (click)="GetSelectedRows()" value="Get Selected Rows" />

    TS File

    
import { Component, OnInit, ViewChild, ViewEncapsulation } from "@angular/core";
import { WjGridModule, WjFlexGrid } from "wijmo/wijmo.angular2.grid";
import { WjListBox } from "wijmo/wijmo.angular2.input";

import * as wjcCore from "wijmo/wijmo";
import * as wjcGrid from "wijmo/wijmo.grid";
import * as wjcInput from 'wijmo/wijmo.input';

import { GridDataService } from "./gridData.service";
import { Constants } from "../constants";

@Component({
  selector: 'grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss'],
  providers: [GridDataService],
  encapsulation: ViewEncapsulation.None
})
export class GridComponent implements OnInit {
  @ViewChild('flex') flex: WjFlexGrid;
  @ViewChild('listBox') listBox: WjListBox;

  private dataCollection: any;
  private columnDefCollection: any;
  private errorMessage: string;
  private countries: Array<any>;
  private selection: Array<any>;
  private dataEndpoint: string = Constants.GRID_DATA_ENDPOINT;

  //Grid options:
  allowSorting: boolean = true;
  selectionMode: string = "RowRange"; //None, Cell, CellRange, Row, RowRange, ListBox
  allowDragging: string = "Both"; //None, Rows, Columns, Both

  constructor(private gridDataService: GridDataService) {

  }

  ngOnInit() {
    this.setData(this.dataEndpoint);
    this.setColumnDef(this.dataEndpoint);
  }

  setData(endpoint): void {
    this.gridDataService.getData(endpoint).subscribe(
      rowData => {
        console.log(rowData)
        this.dataCollection = rowData.itemInfoList;
      },
      error => {
        this.errorMessage = <any>error
        console.log(this.errorMessage);
      }
    );
  }

  setColumnDef(endpoint): void {
    // {
    //       nodeid: 1206,
    //       indexed: true,
    //       displayname: "ID",
    //       path: "id",
    //       editable: true,
    //       attrType: "String"
    //     }
    var columns = []
    let checkboxColumn = {
      "header": "",
      "dataType": wjcCore.DataType.Boolean,
      "binding": "",
      "editable": false,
      "pinned": "left",
      "isCustomCellTemplate": true
    }
    columns.push(checkboxColumn);
    this.gridDataService.getData(endpoint).subscribe(
      columnDef => {

        var columnDefination = columnDef.attrInfoList;
        for (var index in columnDefination) {
          var column = {}
          column["header"] = columnDefination[index].displayname;
          column["binding"] = columnDefination[index].nodeid;
          column["editable"] = columnDefination[index].editable;
          columns.push(column);
        }

        console.log(columns);
        this.columnDefCollection = columns;
      },
      error => {
        console.log(error);
        console.log("here");
        this.errorMessage = <any>error
      }
    );
  }

  GetSelectedRows() {
    this.selection = [];
    // for (var i = 0; i < 100000; i++) {
    //     if (this.dataCollection[i%this.dataCollection.length].selected == true) {
    //         this.selection.push(i);
    //     }
    // }
    console.log(this.selection.length);
  }

  setSelected(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) {
    for (var index in flex.selectedRows){
        flex.selectedRows[index].cssClass = "row_selected";
    }

  }

  itemFormatter=(panel,r,c,cell)=>{
      console.log("Here in Item Formatter")
        var rows=panel.rows[r];
        if(rows.dataItem.active){
           cell.style.backgroundColor='blue';
        } 
    }

  formatItem(flex: wjcGrid.FlexGrid, e: wjcGrid.FormatItemEventArgs) {
    // add/ handle check box in columnheader
    // if (e.panel.cellType == wjcGrid.CellType.Cell) {
    //     var row = flex.rows[e.row];
    //     if (row.dataItem.selected) {
    //       e.cell.classList.add("row_selected");
    //     }
    //     else{
    //       e.cell.classList.remove("row_selected");
    //     }
    // }
  }
}

    So, if something is selected from the data source when it is laoded, it is marked as blue background. But after when i manually select, it does not work.

  • manish-gupta1

    Posted 14 September 2017, 12:04 pm EST

    Hello,

    As we understand based on code snippet provided for your project, you are adding checkboxes in the project using wjFlexGridCellTemplate. Rows are highlighted through itemFormatter in the FlexGrid if the checkbox is checked.

    Now, if you manually check the checkbox, row does not get highlighted since itemFormatter does not get triggered.

    This is because, when a checkbox is added in FlexGrid through wjFlexGridCellTemplate, change in checkbox state does not trigger any event of FlexGrid. So you need to refresh FlexGrid/ itemsSource(if collectionView)

    Please refer to the following code snippet that implements the same:

    <wj-flex-grid #flex [headersVisibility]="1" [itemsSource]="data" [itemFormatter]="itemFormatter" >
    <wj-flex-grid-column [binding]="'country'"></wj-flex-grid-column>
    <wj-flex-grid-column >
        <template wjFlexGridCellTemplate [cellType]="'Cell'" let-item="item">
            <input type="checkbox" [(ngModel)]="item.active" (change)="chckBoxChange($event)" />
        </template>
    </wj-flex-grid-column>
</wj-flex-grid>

export class AppComponent {
    @ViewChild('flex') flex: wjGrid.FlexGrid;
    @ViewChild('listBox') listBox: wjInput.ListBox;
    public data: wjCore.CollectionView;
    constructor( @Inject(DataSvc) _dataSVC: DataSvc) {
        this.data = new wjCore.CollectionView(_dataSVC.getData(10));
    }

    itemFormatter = (panel, r, c, cell) => {
        if (panel.cellType == wjGrid.CellType.Cell) {
            var rows = panel.rows[r];
            if (rows.dataItem.active) {
                cell.style.backgroundColor = 'blue';
            }
        }
    }

   
    chckBoxChange(e: any) {
        console.log('rr');
        this.flex.refresh();
    }
}

    Thanks,

    Manish Kumar Gupta

  • mshni.king

    Posted 28 August 2019, 5:21 am EST

    hello,

    thank you Manish, it worked for me (this code:

    //HTML

    <wj-flex-grid [itemsSource]=“data” [itemFormatter]=“itemFormatter”>

    //TS

    class AppCmp{

    itemFormatter=(panel,r,c,cell)=>{

    var rows=panel.rows[r];

    if(rows.dataItem.active){

    cell.style.backgroundColor=‘blue’;

    }

    }

    }

    )

    and i used another piece of code like below to take visited rows:

    itemFormatter = (panel, r, c, cell) => {
    var rows = panel.rows[r];
    var isReadItem = panel.rows[r].collectionView.items[c];
    console.log(panel.rows[r].collectionView.items[c].IsRead);//i mean this part
}

    and it returns false and true for all items but i also have an error like below:

    RaSysTask.html:19 ERROR TypeError: Cannot read property ‘IsRead’ of undefined

    what should i do?

  • mshni.king

    Posted 31 August 2019, 5:32 am EST

    Helloooooooooooooooo

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.