Refresh content of a sibling cell in a row

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

  • 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
  • Replied 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;
  • Marked as Answer

    Replied 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
  • Replied 7 February 2019, 9:24 am EST

    Thank you, this was very helpful.
Need extra support?

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

Learn More

Forum Channels