JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Data broken after grouping
- This topic has 3 replies, 2 voices, and was last updated 10 months, 2 weeks ago by admin.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
January 31, 2024 at 9:46 pm #109767Joko PitoyoParticipant
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 10 months, 2 weeks ago by Joko Pitoyo.
- This topic was modified 10 months, 2 weeks ago by Joko Pitoyo.
February 1, 2024 at 6:44 am #109770Joko PitoyoParticipantalso, DataAdapter not reactive when vehicles update, Grid not automatically update
February 1, 2024 at 7:19 am #109771Joko PitoyoParticipantDataAdapter refresh() not available in react
February 1, 2024 at 8:01 am #109773adminKeymasterHi 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 StoevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.