Change cellmaker range as boolean

Posted by: bemes9226 on 4 February 2021, 7:23 am EST

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 4 February 2021, 7:23 am EST

  Hi team
  
  i need to change cellmaker range as boolean
  
  const ratingTemplate = CellMaker.makeRating({
  
  boolean: [true, false]
  
  });
  
  its not working.
  
  https://stackblitz.com/edit/js-d2pgsp?file=index.js

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2021, 2:38 am EST

  Hi,

  The range property only works with numbers. If you need to display bool values as stars, you will need to use calculatedFields of CollectionView. Please refer to the sample link below for reference:

  https://stackblitz.com/edit/js-grtjmz

  Note that calculatedFields are added in 5.20203.748 version so you will need to update to at least this version for this to work.

  Regards,
  
  Ashwin

• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Posted 5 February 2021, 8:20 am EST - Updated 3 October 2022, 2:34 pm EST

  1)when i binded data favicon not able changed based on the binding data,it is always in inactive mode for all entire column,
  
  2)is it possible to integrate angular properties.i have tried to implement bur favorite icon is not able getting effected.when i click active(favicon() move to cursor point out of the cell immediatly inactive field goes away.

    const ratingTemplate = CellMaker.makeRating({
      range: [0, 1]
    });
  
  const reportLink = CellMaker.makeLink({
  });
  
  this.columns = [
      {
        header: "Favorite",
        binding: "Favorite",
        cellTemplate: ratingTemplate,
        align: "center"
      },
      {
        header: "Subscription",
        columns: [
          { header: "PDF", binding: "pdf" },
          { header: "Excel", binding: "excel" },
          { header: "HTML", binding: "html" }
        ]
      },
      { header: "Type", binding: "Email", width: 250 },
      { header: "Report Name", binding: "Name", cellTemplate: reportLink, width: 500 }
    ];
    
    
    
     console.log(this.data)
  setTimeout(() => {
      this.data = new wjcCore.CollectionView(this.reportsDataReports, {
          calculatedFields: {
              Favorite: $ => +$.favorite
          }
        });
  }, 500);
  

  }

  // cellEditEndingHandler(s:wjcGrid.FlexGrid,e:wjcCore.EventArgs) {        
  //     var w = s.selection;
  //     var cell = s.getCellData(w.row, w.col, false);
  //     console.log("cellEditEnding");
  // }
  

  getF(s:wjcGrid.FlexGrid,e){
  
  debugger;
  
  let col = s.columns[e.col].binding;
  
  // update the original value
  
  // when the ratin start is clickced
  
  if (col === “Favorite”) {
  
  const item = s.rows[e.row].dataItem;
  
  item.favorite = !item.favorite;

    }
  

  }

  <wj-flex-grid #flexGrid [ngClass]=“{‘animated’: animated}”
  
  headersVisibility=“Column”
  
  showSelectedHeaders=“All”
  
  [alternatingRowStep]=“0”
  
  [showMarquee]=“true”
  
  [autoGenerateColumns]=“false”
  
  (cellEditEnding)=“getF(flexGrid,$event)”
  
  [columnGroups]=“columns”
  
  [itemsSource]=“data”>
  
  

  

  730×350 3.79 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 February 2021, 5:36 am EST

  Hi,

  You also need to refresh the CollectionView after updating the value of Favorite accordingly:

  getF(s:wjcGrid.FlexGrid,e){
  
  debugger;
  
  let col = s.columns[e.col].binding;
  
  // update the original value
  
  // when the ratin start is clickced
  
  if (col === “Favorite”) {
  
  const item = s.rows[e.row].dataItem;
  
  item.favorite = !item.favorite;
  
  s.collectionView.refresh();
  
  }
  
  }

  Regarding 2nd query, sorry, but adding angular properties will not be possible.

  ~regards