Support for PrimeReact's(version 7.x) Drag and Drop between 2 different Tree Objects
I already have a Tree component from PrimeReact 7.x that I use. Now I would like to have another UI element(another Tree or list my own implementaion) that I should be able to drag and drop to the existing Tree. Preferrable a drag and drop between 2 Tree components since I have a Tree that has drag and drop working with in itself or any alternate solution.
Codesandbox trial with 2 Tree components failing
TIA
1 answer
-
answered 2022-05-04 11:54
Melloware
Looks like it is an open enhancement request(s).
See: https://github.com/primefaces/primereact/issues/2486
do you know?
how many words do you know
See also questions close to this topic
-
how to change prettier format for react native
my code formatting prettier didn't works well for react native, i don't understand where to config it but it works well with flutter
from this code
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( <View> <Text>Apps</Text> </View> ) }
it's formatted to this
import { View, Text } from 'react-native' import React from 'react' export default function App() { return ( < View > < Text > Apps < /Text> < /View> ) }
-
react-router-dom v6 params only numbers
I want add number regex in may param in react-router-dom v6. it work fin in v5 like it:
<Route path="list/:id(\d+)" element={<MyComponent/>} />
but it not work in v6.
-
How can I fixed my problem"FirebaseError: Firebase: Error (auth/invalid-api-key)."
My environment variable is ok. No comas and name mistakes but they given me error like "FirebaseError: Firebase: Error (auth/invalid-api-key)". How can I fixed it. Please Help me...
This my .env file
REACT_APP_apiKey=AIzaSyBWobnhbdeMdNpXXXXXXXXXXXXXXXXXXXX REACT_APP_authDomain=XXXXX.firebaseapp.com REACT_APP_projectId=XXXX REACT_APP_storageBucket=XXXXX.appspot.com REACT_APP_messagingSenderId=4997390XXXXX REACT_APP_appId=1:4997390XXXXX:web:cc7bc80aa1bdb78fXXXXXX REACT_APP_measurementId=G-M1XDXXXXXX
This my firebase config file
const firebaseConfig = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId, storageBucket: process.env.REACT_APP_storageBucket, messagingSenderId: process.env.REACT_APP_messagingSenderId, appId: process.env.REACT_APP_appId, measurementId: process.env.REACT_APP_measurementId, }; when I debugging firebaseConfig object console.log(firebaseConfig.apiKey); ==========> undefined console.log(firebaseConfig.authDomain); ==========> undefined console.log(firebaseConfig.projectId); ==========> undefined console.log(firebaseConfig.storageBucket); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined console.log(firebaseConfig.appId); ==========> undefined console.log(firebaseConfig.measurementId); ==========> undefined
client side given error this "FirebaseError: Firebase: Error (auth/invalid-api-key)"
-
Pinning a particular element using a drag and drop library in React
I am migrating from react-beautiful-dnd to dnd-kit which does not have customization to pin a particular HTML element and the others we can drag and drop.
Like in this image I can drag the Drag Me Item 2 but it can't go above Pinned Item 1.I want the Pinned Item 1 to remain fixed and it should not rearrange itself according to the other items if I drag them above it. It should always be at the 1st position.
With dnd-kit we have a disabled example like above but we still can drag 2 above 1 despite 1 being disabled.
My codesandbox. I was trying to keep the first card with Clauderic always pinned to the 1st position.
How can I solve this using dnd-kit or any other drag and drop library in React?
-
Javascript - Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
I have this code in my vue component
<template> <div class="container-fluid p-0"> <div class="row m-0"> <div class="col-12 vh-100 p-0" @drop="drop($event)" @dragover.prevent id="camView"> <canvas class="position-absolute top-0 end-0" ref="targetImg" id="targetImg"></canvas> <div class="position-absolute" id="selection" draggable="true" @dragstart="drag($event)"></div> <img src="@/assets/lu.jpeg" class="img-fluid" id="srcImg" ref="srcImg"> </div> </div> </div> </template> <script> export default { name: 'DropView', data() { return { } }, mounted() { }, methods: { drag(e) { console.log(e) e.dataTransfer.setData('text', e.target.id); }, drop(e) { console.log(e) e.preventDefault(); let data = e.dataTransfer.getData('text'); console.log(data) let box = document.getElementById(data) console.log(box) e.target.appendChild(box); } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> .col-12 { #selection { width: 360px; height: 240px; border-style: dashed; border-width: 1px; border-color: white; background-color: transparent; z-index: 1; } #target-img { overflow: hidden; width: 320px; height: 240px; z-index: 1; } #srcImg { height: 100%; display: block; width: 100%; object-fit: cover; } } </style>
I'm trying to use drag and drop to moove a div that is positioned on top of an image. I'm able to start the drag operation but when I release the div into another position I will get this error in console
Vue warn]: Unhandled error during execution of native event handler Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
I've noticed that the div will disappear and is not mooved. Is there any fix?
-
Xamarin Drag and drop how to edit balloon icon and text see image
Using the drag drop sample https://github.com/xamarin/xamarin-forms-samples/tree/main/WorkingWithGestures/DragAndDropGesture I'm not sure its actually a notify balloon not sure of its correct terminology making it hard to search. In the image you can see when drop location is active it displays in the ballon the copy icon and copy as text. I want to change the icon and the text but not sure how. I have tried the following code but it doesn't do anything.
private void OnCorrectDragOver(object sender, DragEventArgs e) { e.Data.Text = "My text data goes here"; e.Data.Image = "plusicon.png"; }
-
treeview grandfather,parent and son names
I have tree view which has grandfather node and inside of this grandfather there is parent and inside this parent there is son node. How I can get the names of this grandfather , parent and son nodes. I already did the code to work when the user double clicks on the son node, but still I am unable to get the names for the grandfather, parent and child nodes. here is my code:
Private Sub TreeView1_NodeMouseDoubleClick(sender As Object, e As TreeNodeMouseClickEventArgs) Handles TreeView1.NodeMouseDoubleClick Dim ClickPoint As Point = New Point(e.X, e.Y) Dim ClickedChildNode As TreeNode = TreeView1.GetNodeAt(ClickPoint) If ClickNode Is Nothing Then Exit Sub End If Dim strGrandFatherName As String Dim strParentName As String Dim strSonName As String strGrandFatherName = ? strParentName = ? strSonName = ?
-
XAML WrapPanel inside TreeView
I have a TreeView displaying items through a Hierarchical Data Template. Now I want to display two properties of an object in the TreeView, as in:Object1 Name Object1 Src Object2 Name Object2 Src Object3 Name Object3 Src
How can I format the output, so that the Src is always aligned on the right side of the TreeViewItem?
-
Display the names of the text files in the folder in the TreeView, and display the contents of these files in the child nodes
You need to get a list of text documents in a folder and display their contents in child nodes. I get a list of files in a folder like this:
Dim targetDirectory As String = "D:\tst\" Dim fileEntries() As String = Directory.GetFiles(targetDirectory, "*.txt").Select(AddressOf Path.GetFileNameWithoutExtension).Select(Function(p) p.Substring(0)).ToArray() For Each fileName As String In fileEntries TreeView1.Nodes.Add(fileName) Next fileName
The output should be:
-txt1 --text1 --text1.1 --text1.2 -txt2 --text2 --text2.1 -txt3 --text3 --text3.1 --text3.2 --text3.3
also tell me how to add images to the main nodes and child nodes by bringing the treeview through imagelist
-
Using working fileupload code inside a form with formki api
I have my form using formik. and I want to use the file upload logic in my form which is shown in the sandbox here.
Quick Description of what's in sandbox:
User uploads a file, and based on the
#
of files, they will see a datatable rows and answer some questions by editing that row using edit button and then saving their response using checkmark button.Right now, when a user hits
Save
button, it prints in the console log the values of what user has selected as an array of object.I don't want to have this additional
Save
button in my form and want to send these values when a user hits theSubmit
button of my form along with other values.I was playing with my sandbox code by putting it at the location in my form where
{uploadDocumentSection}
is mentioned in my code below. However, I'm unable to get the data from the dynamicData variable which is storing the responses from the user.Is it possible to achieve what I'm looking for?
return ( <div> <style jsx>{` text-align: center; padding: 5px; #formEdwDiv { padding: 20px; } `} </style> <div id="formEdwDiv"> <Growl ref={growl}/> <Form className="form-column-3"> <div className="datarequest-form"> <div className="form-field field-full-width"> <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Title <span className="astrick">*</span></label> <CustomTextField name="title" type="text"/> </div> <div className="form-field field-full-width"> <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Description <span className="astrick">*</span></label> <CustomTextAreaField name = "description" type ="text" /> {touched.description && errors.description && <Message severity="error" text={errors.description}/>} </div> </div> {uploadDocumentSection} <div className="btn-group-right"> <Button size="large" variant="contained" color="primary" id="edw-submit" type="submit">Submit</Button> <Button size="large" variant="contained" color="primary" onClick={handleReset} style={{marginLeft: '5px'}} type="button">Reset</Button> <Button size="large" variant="contained" color="primary" onClick={props.onCancel} style={{marginLeft: '5px'}} type="button">Cancel</Button> </div> </Form> </div> </div> ) }; export const RequestEnhancedForm = withFormik( { mapPropsToValues: props => { return { requestId: props.dataRequest && props.dataRequest.requestId || '', title: props.dataRequest && props.dataRequest.title || '', } }, validationSchema:validationSchema, handleSubmit(values, {props, resetForm, setErrors, setSubmitting}) { console.log("submit data request form....") props.handleSubmit(values) setSubmitting(false) }, setFieldValue(field, value, shouldVal) { console.log('In setFieldValue') }, displayName: 'Data Request Form', })(DataRequestForm)
Here is my code from Codesandbox if needed:
const answers = [ { label: "Yes", value: "YES" }, { label: "No", value: "NO" } ]; export const FileUploadDemo = () => { const toast = useRef(null); const fileUploadRef = useRef(null); const [dynamicData, setDynamicData] = useState([]); const getAnswerLabel = (answer) => { switch (answer) { case "YES": return "Yes"; case "NO": return "No"; default: return "NA"; } }; const onRowEditComplete1 = (e) => { console.log("Testing e"); console.log(e); let _dynamicData = [...dynamicData]; let { newData, index } = e; _dynamicData[index] = newData; setDynamicData(_dynamicData); }; const textEditor = (options) => { return ( <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} /> ); }; const answerEditor = (options) => { return ( <Dropdown value={options.value} options={answers} optionLabel="label" optionValue="value" onChange={(e) => options.editorCallback(e.value)} placeholder="Select an answer" itemTemplate={(option) => { return <span className={`product-badge`}>{option.label}</span>; }} /> ); }; const answer1BodyTemplate = (rowData) => { return getAnswerLabel(rowData.answer1); }; const answer2BodyTemplate = (rowData) => { return getAnswerLabel(rowData.answer2); }; const onUpload = (e) => { // toast.current.show({ // severity: "info", // summary: "Success", // detail: "File Uploaded" // }); console.log("File Upload event e"); console.log(e); const newData = e.files.map((file) => ({ filename: file.name, answer1: null, answer2: null, description: "" })); setDynamicData([...dynamicData, ...newData]); }; return ( <div> <Tooltip target=".custom-choose-btn" content="Choose" position="bottom" /> <Tooltip target=".custom-upload-btn" content="Upload" position="bottom" /> <Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" /> <div className="card"> <h5>Advanced</h5> <FileUpload name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" onUpload={onUpload} customUpload uploadHandler={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={ <p className="m-0">Drag and drop files to here to upload.</p> } /> </div> <div className="datatable-editing-demo"> {/* <Toast ref={toast} /> */} <div className="card p-fluid"> <h5>Row Editing</h5> <DataTable value={dynamicData} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete1} responsiveLayout="scroll" > <Column field="filename" header="Filename" editor={(options) => textEditor(options)} style={{ width: "20%" }} ></Column> <Column field="answer1" header="Q1" body={answer1BodyTemplate} editor={(options) => answerEditor(options)} style={{ width: "20%" }} ></Column> <Column field="answer2" header="Q2" body={answer2BodyTemplate} editor={(options) => answerEditor(options)} style={{ width: "20%" }} ></Column> <Column field="description" header="Description" editor={(options) => textEditor(options)} style={{ width: "20%" }} ></Column> <Column rowEditor headerStyle={{ width: "10%", minWidth: "8rem" }} bodyStyle={{ textAlign: "center" }} ></Column> </DataTable> </div> </div> <Button label="Save" onClick={() => console.log(dynamicData)} /> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<FileUploadDemo />, rootElement);
-
Need help by populating a PrimeReact Tree
I'm trying to populate a PrimeReact Tree with data from sqlite3 database, but it doesnt work.
Here is my SQL-Query:
select 'prj:'||p.id as key,p.name as label,( select json_group_array(json_object('key',key,'label',label)) from( select 'tpr:'||tpr.id as key,tpr.name as label from tpr where tpr.prjid=p.id and tpr.active="true" order by tpr.id ) ) as children from prj p,usr_right r where p.id=r.prjid and p.active="true" and r.usrid=$1 order by p.id
I get following JSON-Code:
[ { key: 'prj:1', label: 'Projekt 1', children: '[{"key":"tpr:1","label":"Teilprojekt 1"},{"key":"tpr:2","label":"Teilprojekt 2"}]' }, { key: 'prj:2', label: 'Projekt 3', children: '[]' }, { key: 'prj:3', label: 'Projekt 2', children: '[]' } ]
This is OK but i figured out, that the children are not rendered, because there are quotes around the square brackets at the children path - how can i fix this?