jQuery Sortable only push items downwards - jquery-ui

I am working on a responsive grid for a formbuilder with jqueryUI's sortable. Now the problem is as following:
When I exchange the checkbox with the heading beneath the heading pushes up and falls out of the grid. What I want is that the grid only pushes down.
Does anyone know a way to achieve this?
Thanks in advance

Related

Drag & Sort using Kendo UI

I want to implement similar functionality to the jQuery UI Draggable & Sortable, but using Kendo UI.
This should allow me to drag from a list of options and place them within a sortable list.
Here is the jQuery UI functionality: http://jqueryui.com/draggable/#sortable
I want 2 panels, one with items that can be dragged and the other containing the dragged items. The closest thing I could find on Kendo UI is: http://demos.telerik.com/kendo-ui/sortable/linkedlists, but the items in the first list (on the left) are sortable and this moves the item from the first list.
I have looked at all of the Kendo UI samples on Teleriks website, but I cannot see any examples of how to do this.
Update:
I am now part way there. I have 2 sortable lists and I have added code to stop the 'draggable' items from sortable. However, when I drag an item to the 'sortable' list, it disappears from the 'draggable' list.
Here's the code I'm using to stop the items being sortable:
start: function() {
$("#draggable li").each(function() {
$(this).removeClass("sortable");
});
Here is the fiddle: http://jsfiddle.net/kgjertsen/r4xmLevq/
Anyone able to tell me how to stop the items from disappearing?
After a lot of investigation, it turns out that you cannot link draggable with sortable, as you can with jQuery. You need to drop the item into the container, then sort it from its default place, which is at the bottom.
Telerik justify this with a statement saying that they cannot implement this behaviour as the controls cannot know about each other, as this is bad practice.
Personally, I think this is terrible and the functionality would be a great addition to the Kendo UI library.

Customize the tooltip of Struts2 jquery grid column

I am usimg struts 2 jquery grid. On mouse over it shows a tooltip of the data in that particular column. But instead of that I want the entire row to display the same tooltip of the basic details ie. The details of all the columns of that particular row. Can anyone help mi how to go about it??
Thanks in advance.

navigate between two listview with slide motion in jQuery mobile

is it possible to navigate between two listview or even two view which has its own listview inside with slide motion in jQuery mobile, now as i implement the first sample when i click on a listview it does not have any motion, it just refresh and the other view come to browser. my purpose is to navigate between two view as like as native ios application which second view slide into first view from right to left.
is this possible with jQuery mobile?
thanks
solution without changing pages
if you don't want to change your page, a possible solution would be to wrap each listview in a swipable <div />.
There are some plugins out there like:
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
http://www.idangero.us/sliders/
solution with changing pages
If you're looking for standard page-transitions, take a look #
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
data-transition="slide" like #Omar said would fit your requirements.
try this
<li data-transition="slide"></li>

Is it possible to display another grid using a custom button similar to subgrid in jqgrid

I have subgrid in my grid and it works fine. Now, I am looking for something similar, but I would like to display the subgrid as a pop up grid using a custom button instead of displaying the subgrid inside the main grid, something similar to Add or Edit modal forms but display a grid instead of the modal form. Is it possible to do something like that? Please provide any examples if that is possible. Any help is greatly appreciated! Thanks.
Glad if this could help!
Please refer: http://www.trirand.com/blog/jqgrid/jqgrid.html
From the left navigation pane, Choose Advanced -> Master Detail.
There the sub grid is loaded just below the main grid for each row click on the main grid.
You can program the sub grid loaded on a modal flyout OR anyway you want.
Happy coding :)

Visualization Chart or table hidden when dragging or sorting Jquery Portlet

I have Google visualization Charts and tables inside each Jquery Portlet with sorting option. When i drag a Portlet from aposition to other position, the visualization charts or table inside portlet will hide.
I search on google, got http://forums.openflashchart.com/viewtopic.php?f=3&t=824. In that, someone said this problem is solved, but i am not able find the solution. Please help me solve this problem.
In Google visualization Chart options add 'forceIFrame': false. Now It works fine without hiding chart when dragging portlet.

Resources