Refresh content of a sibling cell in a row

Refresh content of a sibling cell in a row

Posted by: rbutler on 6 February 2019, 9:25 am EST

• 

  rbutler

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 February 2019, 9:25 am EST

  Hi,
  
  I am using Vue2.js
  
  I have a cell that when the checkbox is checked, the row is selected. There is another cell on the same row that is blank but that now needs to render a button.

  I have thought of two ways to accomplish this.

  1. I have a change event for the checkbox that tries to call refresh for the grid. This causes my checkbox to go back to an unselected state.
  2. Make the button cell reactive so I can use a v-show directive but I have found no way to bind the content of a flexgrid cell to the Vue.

  Can you please show me an example of the best way to approach this problem? I do not want to update the entire grid especially since the checkbox column is not in edit mode.

  Thanks,
  
  Rich

• 

  rbutler

  • Post Options:
  • Link
    Copy

  Posted 6 February 2019, 12:09 pm EST

  Let me add, I am trying to accomplish this in script, see the code below (which comes from my item formatter function) for how my code is structure:

  code for the select:

              
  formatWorklistItemsCell: function (grid, args) {
                  if (grid.columns.length === 0)
                      return;
                  let colName = grid.columns[args.col].name;
                  switch (colName) {
                      case this.Col_Select:
                          args.cell.innerHTML = '<input type="checkbox"/>';
                          let cb = args.cell.firstChild;
                          let row = args.panel.rows[args.row];
                          if (args.panel.cellType === wijmo.grid.CellType.ColumnHeader) {
                              args.cell.classList.add("wlctl");
                              cb.checked = grid.selectedRows.length > 0;
                              cb.indeterminate = grid.selectedRows.length > 0 && grid.selectedRows.length < grid.rows.length;
                              cb.addEventListener("change", e => {
                                  // grid.refresh(args); // didn't work
                                  // calls another function here to do some other work
                              });
                          }
                          else if (args.panel.cellType === wijmo.grid.CellType.Cell) {
                              grid.columns[args.col].cssClass = "wlctl wlsel";
                              if (row.isSelected) {
                                  cb.checked = true;
                                  grid.updateRowSelection(null, row, args.panel.cellType, row.isSelected); // ensure in selected list
                              }
                              cb.addEventListener("change", e => {
                                  //grid.refresh(args); // didn't work
                                  // calls another function here to do some other work
                              });
                          }
                          break;
  
  

  here is the case statement for the button cell, in the same method:

  
                      case this.Col_ImgButton:
                          if (args.panel.cellType === wijmo.grid.CellType.Cell) {
                              let row = args.panel.rows[args.row];
                              if (row.isSelected) {
                                  args.cell.innerHTML = '<span><i style="color: var(--text-call-to-action); font-weight: normal;"  class="icon--xs icon-expand-all"></i></span>';
                                  let det = args.cell.firstChild;
                                  det.addEventListener("click", () => {
                                      this.loadDetails();
                                  });
                              }
                              grid.columns[args.col].cssClass = "wlctl wldetails";
                          }
                          break;
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 6 February 2019, 11:22 pm EST

  Hi,

  From the code snippet provided, it seems that you were calling refresh method before updating the selected state of thr row which was causing the checkboxes to lose their selected state.
  
  Also please use the invalidate method instead of refresh method.
  
  You may refer to the following code snippet and sample:

  grid.formatItem.addHandler((grid, args) => {
          if (args.panel.cellType != wjcGrid.CellType.Cell) {
            return;
          }
          let panel = args.panel,
            row = panel.rows[args.row],
            col = panel.columns[args.col],
            cell = args.cell;
  
          if (col.binding == "cbCol") {
            cell.innerHTML = '<input type="checkbox"/>';
            let cb = cell.firstChild;
            cb.checked = row.isSelected;
            cb.addEventListener("change", e => {
              row.isSelected = e.target.checked;
              grid.invalidate();
            });
          } else if (col.binding == "buttonCol" && row.isSelected) {
            cell.innerHTML = "<button>Click me</button>";
            let btn = cell.firstChild;
            btn.addEventListener("click", () => {
              console.log("btn clicked");
            });
          }
        });
  

  https://codesandbox.io/s/w1112rv6l

  ~Sharad

• 

  rbutler

  • Post Options:
  • Link
    Copy

  Posted 7 February 2019, 9:24 am EST

  Thank you, this was very helpful.