Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #109767
    Joko Pitoyo
    Participant

    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 3 months, 3 weeks ago by Joko Pitoyo.
    • This topic was modified 3 months, 3 weeks ago by Joko Pitoyo.
    #109770
    Joko Pitoyo
    Participant

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

    #109771
    Joko Pitoyo
    Participant

    DataAdapter refresh() not available in react

    #109773
    admin
    Keymaster

    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/

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.