I have successfully added an extra drop zone for Fine Uploader, and that works great.
However I would like to be able to highlight the extra drop zone area in the same way that the default drop zone is highlighted, when a drag and drop operation is started.
I tried adding the qq-upload-drop-area class to my extra drop zone, but of course it colored everything red, whether or not the drag and drop is in progress.
Any pointers as to how to correctly implement this functionality would be appreciated.
You can use the the standalone drag and drop module. Make sure to add a value for the classes.dropActive option that matches the class added to the original drag and drop element when it is active.
$(document).ready(function(){
$('#fineuploader-traditional').fineUploader({
// ...
});
$(document.body).fineUploaderDnd({
classes: {
dropActive: 'qq-upload-drop-area'
}
})
.on('processingDroppedFiles', function(event){
console.log('Processing');
})
.on('processingDroppedFilesComplete', function (event, files, target){
$("#fineuploader-traditional").fineUploader('addFiles', files);
});
});
What I am doing here is instantiating a new fineUploaderDnd instance on the document.body (you may want to change this element to something else). I've given it a dropActive class of 'qq-upload-drop-area' which is the default class for the drop area when using Fine Uploader UI (note that you can put any class in here -- ideally it would match the class applied to to original dropzone when it is active so that both dropzones match). This class represents the style applied to the drop zone while a file or files are dragged over it.
The 'processingDroppedFilesComplete' event allows me to add the received files to an instance of Fine Uploader -- where they will validated and eventually uploaded.
Update
If you want the contents of any drop zone to be invisible until an item enters the drop zone, simply ensure a qq-hide-dropzone attribute is present on the drop zone container.
<div id="extra-dropzone" qq-hide-dropzone></div>
Update 2
Another possible option is to use the dragAndDrop.extraDropzones option which will do a lot automatically.
$(document).ready(function(){
$('#fineuploader-traditional').fineUploader({
// ...
dragAndDrop: {
extraDropzones: [ $("#extra-dropzone") ]
},
});
<div id="extra-dropzone" qq-hide-dropzone>
<h2>Drop files here</h2>
</div>
Related
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
I am trying to work on a prime ng table with both drag/drop and reorder enabled.
I can only have one working at a time, but when I enable both functionalities only reorder works.
Looked at the source and looks like the drop event is consumed at the reorder. I have an working example at
demo
Here if you remove the [pReorderableRow]="index"from "Available" table drag drop works into the "Selected" section.
Is there a way to have both reorder and drag/drop working together.
Thanks
try to bind this events in the table
(onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()"
here's a sample
<tr pDraggable="products" [pReorderableRow]="index" (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
then at the typescript file try adding the function dragStart(product) and dragEnd()
dragStart(data){
//console.log(data);
}
dragEnd(){
this.drop();
}
trigger the drop() method in the dragend() method.
i tested it from the demo link you provide:
[link]https://stackblitz.com/edit/primeng-tablereorder-dragdrop-demo?file=src/app/app.component.html
I started with this tutorial http://dojotoolkit.org/documentation/tutorials/1.6/store_driven_tree/
after setting up my ServerSide Restfull Service everything is working so far. I made a contextmenu for the tree by:
<ul dojoType="dijit.Menu" id="contextMenu" style="display: none;">
<li dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconDelete" onclick="pages.remove(tn.item.id);">delete page</li>
</ul>
<script type="dojo/connect">
var menu = dijit.byId("contextMenu");
menu.bindDomNode(this.domNode);
dojo.connect(menu, "_openMyself", this, function(e){
// get a hold of, and log out, the tree node that was the source of this open event
tn = dijit.getEnclosingWidget(e.target);
// contrived condition: disable all menu items except the "New Page" item
dojo.forEach(menu.getChildren(), function(child){
if(child.label != "Neue Seite")
{
child.set('disabled', typeof tn.item == 'undefined');
}
});
});
</script>
Now I know on wich node the user made the right click for the contextmenu and delete it with "pages.remove(tn.item.id);" from the Database. To notify the tree I´m overriding the remove function:
remove: function(objectId){
this.onDelete({id: objectId});
return dojo.store.JsonRest.prototype.remove.apply(this, arguments);
}
Everything works as expected but if im now doing some other things with the items in the tree like drag n drop an item to the root i was deleting a child before. The tree isn't showing it correctly anymore. I think the remove method of the store only sends the DELETE query to the Server but don't removes the item from the store. How can i get the array of the items in store to check and maybe to delete items?
The dijit.Tree is a presentation of an underlying dojo.data model, and any changes that you want to make to the tree really need to be done to the underlying data store. See the description here: http://dojotoolkit.org/reference-guide/dijit/Tree.html#dijit-tree So, instead of overriding the remove function, you should instead use the dojo.data API to modify the store, and then rerender the tree to reflect the changes. The best source for looking at the various methods available is in the dojo nightly files. Specifically, the dojo.data files are here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojo/data/
var item = tree.fetchItemByIdentity("selectedItem"); //find the item you want to remove
store.deleteItem(item); //delete the item from the data store
store.save(); //save the change made to the store
I'm trying to do some drag and drop between 2 spark List located in different components.
Because my first attempt didn't work, I decide to Google it and read some more about DragAndDrop ... tried all the examples I could find but nothing seams to work for me.
So let's go to the point.
Component A has List1
Component B has List2
Component A - List 1 has dragEnabled="true" and mouseDown="initiateDrag(event)"
private function initiateDrag(e:MouseEvent):void{
var dragInitiator:IUIComponent = e.target as IUIComponent;
var de:DragSource = new DragSource;
de.addData(dragInitiator, 'artist');
DragManager.doDrag(dragInitiator, de, e);
}
By what I read, usind the mouseDown I'm starting a the drag event creating what kind of data I'm going to drag ... this case 'artist'
Component B - List 2 has dropEnabled="true", dragEnter="dragEnterHandler(event)" and dragDrop="dragDropHandler(event)"
private function dragEnterHandler(e:DragEvent):void{
if(e.dragSource.hasFormat('artist')){
DragManager.acceptDragDrop(List(e.currentTarget));
}
}
Now, what I'm expecting was, when I drag the itemRender from Component A List 1 over Component B List 2 is to call the function dragEnterHandler(event), and it does ... but I was also expecting that the DragManager.acceptDragDrop(List(e.currentTarget)) whould change indicator from the "red cross" to the "green plus" and that's not happening ... and because of that, the dragged itemRender (proxi) moves back to its original list in this case it moves back to Component A List 1
I already spent hours and hours debugging and testing other approaches and none seams to work for me.
Is there anyone here familiarize with drag and drop between components that may help me?
Well guys, looks like after 2 days and 4h later I got the solution :)
I was looking to this in a complete wrong way.
When using Drag and Drop with List based components, the 'format' is always 'itemsByIndex' and I was trying to be accepted with 'artist' 'format'.
Problem:
You have more than one List accepting data with a drag-and-drop method.
Different lists has to accept different types of data.
Solution:
Wrap the <s:List/> in <s:Group/> and manually call the dragEnter event and with it you call a function that can accept or reject the dragged data by checking it's 'format'.
Accepting the drag source, the dragDrop event is dispatched and with that you can call a function to do whatever you want in your app ... for example, add the dragged data to the list.
NOTE:
Remember if tou set the dragEnter and dragDrop directly on the component, you will ne be able to check the dragged data 'format' given all list controls uses the 'format' 'itemsByIndex'
Demo:
<fx:Script>
<![CDATA[
private function dragEnterHandler(e:DragEvent):void{
if(e.dragSource.hasFormat('artist')){
var dropTarget:Group = Group(e.currentTarget);
DragManager.acceptDragDrop(dropTarget);
}
}
private function dragDropHandler(e:DragEvent):void{
// Check is the data alreay exists in the list;
// Adds the data to the list dataGroup;
// Do whatever you want ...
}
]]>
</fx:Script>
<s:Group id="myGroup"
dragDrop="dragDropHandler(event)"
dragEnter="dragEnterHandler(event)">
<s:List id="myList"
dataProvider="{myDataProvider}"/>
</s:Group>
Hope this helps other people with the same problem! :)
I need to create dynamic filter that adds/removes rows dynamically.
It contains a drop-down box. Depending upon the drop-down box value selected, I create a dynamic <TD> that may have a text field or drop-down list.
If it's a text field, then I have to add date picker for that text field.
I have done this, except date picker for dynamically generated text field.
If you're creating 100 rows, the text fields' names should be same for all rows.
How to add datepicker for dynamically generated text field?
I had the same issue.
You would need to rebind the DatePicker to the dynamically added row.
The date picker associates a hadDatePicker Class to the dynamic row.
So you would need to remove that and rebind.
Something like this -
jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
dateFormat: 'mm-dd-yy'
});
Regards,
Tina Agrawal
Actually i did use the solution provided by #Tina Agrawal But since now, when i select a date from the calendar, i click again and re-select. If i click on next month, it will go to 1900-01-01.
Well it was so strange...
After two hours of trial and errors and research.
i simply did:
$('.date-pick').live('click', function(){
$('.date-pick').datepicker();
});
Well it works.
I had the same issue and solved it in a different way. Although I am not very sure why is it working as I am very new to jquery. I wrote the following and it iterates the entire set of controls having the class "class_date" and rebinds the datepicker control to it.
$(".class_date").removeClass('hasDatepicker').datepicker();
Tirst add a class attribute as "date" to your input or div.
After dynamically add a text input to have to recall $('.date').datePicker() again to bind datePicker to new inputs or div.
I had a similar problem in that when dynamically adding new rows to my table the Date Picker fields in the new rows (any row added to the DOM dynamically) were all updating my initial rows Date Picker fields.
Removing the hasDatepicker class as suggested above was not enough to solve my issue, probably as I was using .clone() to create my dynamically added rows.
The solution when cloning rows was to remove the cloned input fields, re-create them, add them to my newly cloned table row and THEN re-initiate the Date Picker
For example:
//Remove exisiting cloned input fields
new_row.find("td.date input").remove();
//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);
//Re-initiate datepicker on the input fields
new_row.find("td.date input").datepicker({
dateFormat:"dd-mm-yy",
minDate:StartDate,
maxDate:EndDate
});
Use JQuery Live to access the dynamically created DOM.
http://api.jquery.com/live/
The you can attached the picker.
http://jqueryui.com/demos/datepicker/
one should use ".on" instead of live - see
http://api.jquery.com/on/