Data broken after grouping

[Joko Pitoyo]

Setting datagrid

  const behavior = {
    columnResizeMode: "growAndShrink", //growAndShrink
    allowColumnReorder: true,
  };

  const appearance = {
    alternationCount: 2,
    showRowHeader: true,
    // showRowHeaderSelectIcon: true,
    // showRowHeaderFocusIcon: true,
  };
  const grouping = {
    enabled: true,
    renderMode: "basic",
    groupBar: {
      visible: true,
    },
  };
  const paging = {
    enabled: true,
  };

  const pager = {
    visible: true,
  };

  const sorting = {
    enabled: true,
  };

  const editing = {
    enabled: false,
  };
  const filtering = {
    enabled: true,
    filterRow: {
      visible: true,
    },
  };
  const selection = {
    enabled: true,
    allowCellSelection: false,
    allowRowHeaderSelection: true,
    allowColumnHeaderSelection: true,
    mode: "one",
  };
  const fields = [
    { name: 'id', dataType: 'int' },
    { name: 'real_name', dataType: 'string' },
    { name: 'login', dataType: 'string' },
    { name: 'password', dataType: 'string' },
    { name: 'email', dataType: 'string' },
    { name: 'address', dataType: 'string' },
    { name: 'company', dataType: 'string' },
    { name: 'company_address', dataType: 'string' },
    { name: 'id_telegram', dataType: 'string' },
    { name: 'phone', dataType: 'string' },
    { name: 'phone_office', dataType: 'string' },
    { name: 'city', dataType: 'string' },
    { name: 'state', dataType: 'int' },
    { name: 'expired_date', dataType: 'string' },
    { name: 'catuser', dataType: 'string' },
    { name: 'gps_visibility', dataType: 'int' },
    { name: 'descr', dataType: 'string' },
    { name: 'level_id', dataType: 'int' },
    { name: 'level_name', map: "user_level.level", dataType: 'string' },
    { name: 'reseller_name', map: "reseller.real_name", dataType: 'string' },
    { name: 'reseller_id', dataType: 'int' },
    { name: 'allow_add_gps', dataType: 'boolean' },
    { name: 'allow_add_user', dataType: 'boolean' },
    { name: 'allow_link_gps', dataType: 'boolean' },
    { name: 'allow_share_link', dataType: 'boolean' },
    { name: 'allow_cut_engine', dataType: 'boolean' },
  ];
  const dataAdapter = new Smart.DataAdapter({
    dataSource: users,
    dataFields: fields
  });
  const dataSourceSettings = {
    dataFields: fields
  }

  const columns = [
    {
      label: "Action",
      dataField: "id",
      width: 150,
      template: (formatObject) => {

        if (!formatObject.template) {

          const data = document.createElement('span');
          const btnEdit = document.createElement('smart-button');
          const btnDelete = document.createElement('smart-button');
          btnEdit.className = 'small success';
          btnDelete.className = 'small error';
          btnEdit.innerHTML = '<span class="fa-plus">Edit</span>';
          btnDelete.innerHTML = '<span class="fa-minus">Delete</span>';
          data.style.marginLeft = '7px';

          btnEdit.row = formatObject.row;
          btnDelete.row = formatObject.row;

          btnEdit.addEventListener('click', () => {
            const row = btnEdit.row;
            console.log('row', row.data);
            startTransition(() => {
              setEdit(true);
              setEditUser(row.data);
            });

            // setTimeout(() => {
            //   setEditUser(row);
            // }, 10);
          });

          btnDelete.addEventListener('click', () => {
            const row = btnDelete.row;
            console.log('row', row.data.real_name);
            //row.getCell('Quantity').value -= 5;
          });

          const template = document.createElement('div');
          template.className = 'action-buttons';
          template.appendChild(data);
          template.appendChild(btnDelete);
          template.appendChild(btnEdit);
          formatObject.template = template;
        } else {
          // formatObject.template.firstChild.innerHTML = formatObject.value;
          const buttons = formatObject.template.querySelectorAll('smart-button');
          if (buttons.length > 1) {
            buttons[0].row = formatObject.row;
            buttons[1].row = formatObject.row;
          }
        }
      }
    },
    {
      label: "Nama",
      dataField: "real_name",
      width: 200,
    },
    {
      label: "Login",
      dataField: "login",
      width: 200,
    }, {
      label: "No. Handphone",
      dataField: "phone",
      width: 200,
    },
    {
      label: "User Level",
      dataField: "level_name",
      width: 200,
    },
    {
      label: "User Parent",
      dataField: "reseller_name",
      width: 200,
    },
    {
      label: "Perusahaan",
      dataField: "company",
      width: 200,
    },
    {
      label: "Alamat",
      dataField: "address",
      width: 200,
    },
    {
      label: "Aktif",
      dataField: "state",
      width: 100,
    },
    {
      label: "Keterangan",
      dataField: "descr",
      width: 200,
    }, {
      label: "Password",
      dataField: "password",
      width: 200,
    }
  ];
  const doSave = () => {
    if (editUser.password_new != editUser.password_confirm && editUser.password_new != "") {
      alert("Password tidak sama");
      return;
    }

    //get selected reseller
    const selectedResellerId = parseInt(refReseller.current.value);
    let copy = { ...editUser };
    if (!isNaN(selectedResellerId)) {
      copy.reseller_id = selectedResellerId;
      setEditUser({ ...editUser, reseller_id: selectedResellerId });
    }
    const selectedUserLevelId = parseInt(refUserLevel.current.value);
    if (!isNaN(selectedUserLevelId)) {
      copy.level_id = selectedUserLevelId;
      setEditUser({ ...editUser, level_id: selectedUserLevelId });
    }

    if (copy["$"]) {
      delete copy["$"];
    }
    let asyncTask = null;
    if (editUser.id == 0) {
      console.log('createUser', copy);
      asyncTask = api.createUser(copy);
    } else {
      console.log('updateUser', JSON.stringify(copy));
      asyncTask = api.updateUser(copy);
    }
    asyncTask.then((res) => {
      console.log(res);
      if (res.code == "SUCCESS") {
        setEdit(false);
        loadUsers();
      } else {
        alert(res.msg);
      }
    }).catch(err => {
      alert(err);
    })
  };

call doSave() error

Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property 'data' -> object with constructor 'Object'
--- property 'parent' closes the circle
at JSON.stringify ()
at API.post (api.js:51:28)
at API.updateUser (api.js:150:21)
at doSave (UserManagerV2.jsx:322:23)
at BaseElement.onClick (UserManagerV2.jsx:831:53)

• This topic was modified 2 months, 3 weeks ago by Joko Pitoyo.
• This topic was modified 2 months, 3 weeks ago by Joko Pitoyo.

[Joko Pitoyo]

also, DataAdapter not reactive when vehicles update, Grid not automatically update

[Joko Pitoyo]

DataAdapter refresh() not available in react

[admin]

Hi Joko,

We are unable to reproduce this with the provided details. Unfortunately, we could not run this code as it has parts which we do not have. Could you please, share a sample in stackblitz or codesandbox and step by step instructions which will allow us to test this.

Best Regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts