Bryntum Support Forums

const syncData = ({ store, action, records, isExpand, isCollapse }) => {
    //console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records);
    if (!isExpand && !isCollapse) {
      switch (action) {

    case 'update':
      // device field update (except parent)  
      if (!records[0].meta.modified.hasOwnProperty('parentId')) {
        const key = Object.keys(records[0].meta.modified);
        const value = records[0].data[key];
        transact([tx.devices[records[0].data.id].update({ [key]: value })]);
      }
      break;

    case 'add':
      // device parent update
      if (records[0].meta.modified.hasOwnProperty('parentId')) {
        transact([tx.devices[records[0].data.id].update({ parentId: records[0].data.parentId })]);
      }
      //TODO: manage copy-paste case for proper id generation
      break;
  }
}
  }

/**
 * Application configuration
 */
import React from "react";
import DemoButton from "./components/DemoButton";
import DemoEditor from "./components/DemoEditor";
import { StringHelper } from "@bryntum/grid";

const syncData = ({ store, action, records, isExpand, isCollapse }) => {
//   console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records);
  if (!isExpand && !isCollapse) {
    switch (action) {
      case "update":
        // device field update (except parent)
        if (!records[0].meta.modified.hasOwnProperty("parentId")) {
          const key = Object.keys(records[0].meta.modified);
          const value = records[0].data[key];
          // transact([tx.devices[records[0].data.id].update({ [key]: value })]);
        }
        break;

  case "add":
    // device parent update
    if (records[0].meta.modified.hasOwnProperty("parentId")) {
      // transact([tx.devices[records[0].data.id].update({ parentId: records[0].data.parentId })]);
    }
    //TODO: manage copy-paste case for proper id generation
    break;
  case "move":
  // handle Move event
    console.log('move event')
}
  }
};

const useGridConfig = (handleCellButtonClick) => {
  return {
    // Initial grouping, with custom group renderer
    groupFeature: {
      field: "division",
      groupRenderer(data) {
        if (data.column === data.grid.columns.first) {
          return StringHelper.xss`${data.groupColumn.text}: ${data.groupRowFor}`;
        }
        return "";
      },
    },
    features: {
      rowReorder: {
        showGrip: true,
      },
    },
    onDataChange: (eventData) => {
      syncData(eventData);
    },

columns: [
  {
    field: "team",
    text: 'Team<div class="small-text">(inline JSX)</div>',
    htmlEncodeHeaderText: false,
    flex: 1,
    // Using simple inline JSX
    renderer: ({ value }) => <b>{StringHelper.encodeHtml(value)}</b>,
  },
  { field: "city", text: "City", flex: 1 },
  {
    field: "original",
    text: 'Original<div class="small-text">(React editor)</div>',
    htmlEncodeHeaderText: false,
    align: "center",
    width: 120,
    renderer: ({ value }) => (value ? "Yes" : "No"),
    editor: (ref, instance) => <DemoEditor instance={instance} ref={ref} />,
  },
  {
    field: "division",
    text: "Division",
    flex: 1,
    hidden: true,
  },
  { field: "conference", text: "Conference", flex: 1 },
  {
    field: "team",
    text: 'Cheer<div class="small-text">(React component)</div>',
    htmlEncodeHeaderText: false,
    width: 200,
    editor: false,
    // Using custom React component
    renderer: ({ record }) => (
      <DemoButton
        text={`Go ${StringHelper.encodeHtml(record.team)}!`}
        onClick={() => handleCellButtonClick(record)}
      />
    ),
  },
],

// Store will be created automatically, `syncDataOnLoad` is `true` by default (set in the wrapper)
data: [
  {
    id: 1,
    team: "Capitals",
    city: "Washington",
    division: "Metropolitan",
    conference: "Eastern",
    original: false,
  },
  {
    id: 2,
    team: "Penguins",
    city: "Pittsburgh",
    division: "Metropolitan",
    conference: "Eastern",
    original: false,
  },
  {
    id: 3,
    team: "Rangers",
    city: "New York",
    division: "Metropolitan",
    conference: "Eastern",
    original: false,
  },
  {
    id: 4,
    team: "Lightning",
    city: "Tampa Bay",
    division: "Atlantic",
    conference: "Eastern",
    original: false,
  },
  {
    id: 5,
    team: "Maple Leafs",
    city: "Toronto",
    division: "Atlantic",
    conference: "Eastern",
    original: true,
  },
  {
    id: 6,
    team: "Red Wings",
    city: "Detroit",
    division: "Atlantic",
    conference: "Eastern",
    original: true,
  },
  {
    id: 7,
    team: "Ducks",
    city: "Anaheim",
    division: "Pacific",
    conference: "Western",
    original: false,
  },
  {
    id: 8,
    team: "Sharks",
    city: "San Jose",
    division: "Pacific",
    conference: "Western",
    original: false,
  },
  {
    id: 9,
    team: "Golden Knights",
    city: "Las Vegas",
    division: "Pacific",
    conference: "Western",
    original: false,
  },
  {
    id: 10,
    team: "Predators",
    city: "Nashville",
    division: "Central",
    conference: "Western",
    original: false,
  },
  {
    id: 11,
    team: "Jets",
    city: "Winnipeg",
    division: "Central",
    conference: "Western",
    original: false,
  },
  {
    id: 12,
    team: "Avalanche",
    city: "Colorado",
    division: "Central",
    conference: "Western",
    original: false,
  },
],
  };
};

const rowHeightConfig = {
  label: "Row Height:",
  labelWidth: 90,
  flex: "0 0 178px",
  min: 40,
  max: 100,
  step: 1,
};

export { useGridConfig, rowHeightConfig };