I am trying to allow dragging from a sortable list to a dynatree.
My initial though was to specify something like this:
$('#ews_pgs_clpbrd_items').sortable({
connectToDynatree: true
}).disableSelection();
dynatree does not register the drag and drop events for the sortable items. so I tried
$("#ews_pgs_clpbrd_items").sortable().disableSelection();
$("#ews_pgs_clpbrd_items li").draggable({
connectToDynatree: true,
connectToSortable: "#ews_pgs_clpbrd_items"
});
This allows the items in the sortable list to be dragged to the dynatree but it no longer allows sorting. When I try to sort I get the following error.
Cannot read property 'options' of undefined
This appears to just be a limitation on sortable since http://jsfiddle.net/7TTSG/3/ it happens even without dynatree.
Is there a way to pass the drag and drop option "connectToDynatree: true" in the sortable or a way to make drag and drop not break sortable?
Related
I have an ExtJs GridPanel in which sortable is false in all the columns.
Then if I sort store by
this.store.sort('Column1','ASC');
then the arrow reappers .
Does sortable gets true?
Is this because I am sorting the store or anything else?
If it the reason different than that then what is the solution for removing the arrow?
I would appreciate any help on this.
The arrow is being shown because of the sorter in the store, which identifies a column in the grid which has the dataIndex equal to the property you are sorting, despite the sorting being disable on this column. In this case, you could override the getSortParam function in your column definition, like this:
getSortParam: Ext.emptyFn
And your column will no longer show the arrow in the header.
I have a list of projects. When I click on a column header, the column is sorted and a sort arrow icon appears in the column header. However, the column keeps the sort and the sort arrow icon even after filtering the records (by entering text in the filter textfield and pressing the Filter button). I want the sort and the sort arrow icon to be removed from the column each time I filter the records. I have found some posts about clearing the sort arrow icon when a grid reloads (see links below). But how can I apply this to my situation? Any tips would be much appreciated.
http://www.sencha.com/forum/showthread.php?48437-Help-How-to-remove-sort-field-when-reload-grid
http://www.sencha.com/forum/showthread.php?3098-Clear-grid-s-sort-arrow-icon
In Ext JS 4.x you can just clear the sorters on the grid before you filter.
grid.store.sorters.clear();
grid.store.filter("name", "Lisa");
Here is a working fiddle:
http://jsfiddle.net/Vandeplas/5aKdc/
UPDATE:
if you don't filter/make a change you can force the UI to update by using:
grid.view.refresh();
Example: http://jsfiddle.net/Vandeplas/5aKdc/3/
Use following options at column model (ExtJs 3.4)
menuDisabled:true //there will be no any menu
sortable:false // there will be menu but disabled sorting option
I have a need to sort columns and separately I need to be able to sort fields accross columns and would like to hook into the col sort finished so that I can save the new column position and then also hook into the field sort finished event so that I can save the new field position
There is a jsFiddle showing an example here (doesn't seem to work in IE, but thats a different story!). What this shows is that when a column is dragged no alert is shown and when a field is dragged between columns the field AND column alerts are shown.
I'm using 'receive' to avoid multiple calls, one for the source and one for the target.
Any help would be really appreciated. Thanks
You should use different events to hook into, sortupdate does what you want. Because you are nesting sortables it is also important to prevent event bubbling, this is what causes your double alert. Here's an updated fiddle
By the way, when dragging a field to another column the sortupdate handler is called twice because two columns changed.
jqgrid doc in here contains:
method allow to reorder the grid columns using the mouse. The only necessary setting in this case is to set the sortable option in jqGrid to true.
I have sortable: true but columns cannot reordered by dragging headers by mouse. How to re-order columns by dragging columns headers or other way without using column chooser ?
To implement sortable columns is really easy. You should just follow the documentation. You should just
include jquery-ui.min.js additionally to jquery-ui.css which are always required. The most people have the file already included because of usage jQuery UI Widgets like Datepicker, Autocomplete, Tabs and so on.
add sortable: true option to the grid.
Now you can already (see the demo) drag the column header and drop it on another position.
Ok, so I want an autocomplete dropdown with linkbuttons as selections. So, the user puts the cursor in the "text box" and is greated with a list of options. They can either start typing to narrow down the list, or select one of the options on the list. As soon as they click (or press enter) the dataset this is linked to will be filtered by the selection.
Ok, is this as easy as wrapping an AJAX autocomplete around a dropdown? No? (Please?)
This widget can be made with three items: a text input, button input, and an unordered list to hold the results.
__________ _
|__________||v|__ <-- text and button
| | <-- ul (styled to appear relative to text input)
| |
| |
|______________|
ul shown on:
'keyUp' event of the text input (if value is non-empty)
'click' event of the button input (if currently not visible)
ul hidden on:
'click' event of the button input (if currently visible)
'click' event of list items
When the ul is shown or the 'keyUp' event of the text input is triggered an AJAX call to the server needs to be made to update the list.
On success the results should be placed in the ul. When creating the list items they should have a 'click' event attached to them that sets the text input value and hides the ul (may have to add a link inside the li to attach the event to).
The hardest part is really the CSS. The JavaScript is simple especially with a solid library like prototype that supports multiple browsers.
You will probably want to support some IDs for the items, so you can add some hidden inputs to each list item with the id and next to the text input to store the selected items ID.
You'll have to handle the OnSelectedIndexChanged event of your drop down list to rebind your dataset based on the users selection. If you want the filtering to happen in an asynch postback, wrap the dataset (or datagrid I'm assuming) and your drop down in an UpdatePanel. That is one way to do it anyhow.
I am not entirely sure what you want, but the Ra-Ajax AutoCompleter definitely have support for having "controls" within itself. You can see that in the search box at Stacked in fact (upper right corner) where we're using links. But this could also be LinkButtons if you wish...
Disclaimer; I work with Ra-Ajax...
In my opinion, you shouldn't use AJAX for this at all.
here's why:
(1) On focus: ALL the options that he can select are shown in the dropdown. This means that all possible options are already sent to the client.
(2) If the user types something in, the number of entries in the drop down are filtered down to match. This can easily be done on the client side. Being ajax'y and going back to the server at this point will just slow things down.
phpguru.org has a control which is 'almost exactly' what you need:
http://www.phpguru.org/static/AutoComplete.html#demo
It differs slightly from what you need in that it shows the dropdown on double-click instead of on focus. That should be fairly easy to modify.
I hope this helps.