?
Solved

Remember jquery sortable position

Posted on 2011-03-21
2
Medium Priority
?
1,533 Views
Last Modified: 2012-05-11
What is the easiest way to remember the posiition of  the jquery sortable script. I am sorting Gridviews and I would like to remember what position the gridviews were in when the page refreshes.

not sure if it is relevant but I'm using  asp.net (vb) in visual web developer 2010.



<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
    
<script>
    $(function () {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
    });
	</script>



<style type="text/css">
    
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
	#sortable li span { position: absolute; margin-left: -1.3em; }
    body
    {
        font: normal 12px auto "Trebuchet MS", Verdana;    
        background-color: #b6b7bc;
        color: #4f6b72;       
    }
 
    .popUpStyle
    {
        font: normal 20px auto "Trebuchet MS", Verdana;    
        background-color: #ffffff;
        color: #4f6b72; 
        padding:6px;      
        filter: alpha(opacity=80);
        opacity: 0.8;
        width:500px;
        height:500px;
    }
    
    .drag
    {
         background-color: #CCCCCC;
         cursor: pointer;
         border:solid 1px gray ;
    }
    
    	.column { width: 250px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
</style>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
	<script>
	    $(function () {
	        $(".column").sortable({
	            connectWith: ".column"
	        });

	        $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
			.find(".portlet-header")
				.addClass("ui-widget-header ui-corner-all")
				.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find(".portlet-content");

	        $(".portlet-header .ui-icon").click(function () {
	            $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
	            $(this).parents(".portlet:first").find(".portlet-content").toggle();
	        });

	        $(".column").disableSelection();
	    });
	</script>


<div class="demo">

<div class="column">

	<div class="portlet">
		<div class="portlet-header">Stock Adjustment Venda</div>
		<div class="portlet-content">
    <asp:GridView ID="StockAdjustmentGridView" runat="server" CellPadding="4" 
        DataSourceID="StockAdjustmentDataSource" ForeColor="#333333" GridLines="None" 
        AllowSorting="True" Width="800px" style="text-align: center">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField ShowSelectButton="True" />
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView></div>
	</div>
	
	<div class="portlet">
		<div class="portlet-header">News</div>
		<div class="portlet-content"> <asp:GridView ID="GridView1" runat="server" CellPadding="4" 
        DataSourceID="StockAdjustmentDataSource" ForeColor="#333333" GridLines="None" 
        AllowSorting="True" Width="800px" style="text-align: center">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField ShowSelectButton="True" />
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView></div></div>

    	<div class="portlet">
		<div class="portlet-header">Venda Update</div>
		<div class="portlet-content"> <asp:GridView ID="GridView3" runat="server" CellPadding="4" 
        DataSourceID="StockAdjustmentDataSource" ForeColor="#333333" GridLines="None" 
        AllowSorting="True" Width="800px" style="text-align: center">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField ShowSelectButton="True" />
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView></div></div>


    	<div class="portlet">
		<div class="portlet-header">Barcode</div>
		<div class="portlet-content"> <asp:GridView ID="GridView4" runat="server" CellPadding="4" 
        DataSourceID="StockAdjustmentDataSource" ForeColor="#333333" GridLines="None" 
        AllowSorting="True" Width="800px" style="text-align: center">
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
        <Columns>
            <asp:CommandField ShowSelectButton="True" />
        </Columns>
        <EditRowStyle BackColor="#999999" />
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#E9E7E2" />
        <SortedAscendingHeaderStyle BackColor="#506C8C" />
        <SortedDescendingCellStyle BackColor="#FFFDF8" />
        <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView></div></div>
	</div>


</div>









    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
    

 
    

    <asp:ObjectDataSource ID="StockAdjustmentDataSource" runat="server" 
        SelectMethod="ftpCheck" TypeName="Republic.ftpWebService">
        <SelectParameters>
            <asp:Parameter DefaultValue="Stock Adjustment Venda" Name="name" 
                Type="String" />
        </SelectParameters>
    </asp:ObjectDataSource>

 <asp:Button runat="server" ID="btnShowModalPopup" style="display:none"/>

    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
    TargetControlID="btnShowModalPopup"
    PopupControlID="divPopUp" 
    BackgroundCssClass="popUpStyle" 
    PopupDragHandleControlID="panelDragHandle"
    DropShadow="true">
    </asp:ModalPopupExtender>
<br />
 
<div class="popUpStyle" id="divPopUp" style="display:none;">
    <asp:Panel runat="Server" ID="panelDragHandle" CssClass="drag">
        Details
    </asp:Panel>
    <asp:Label runat="server" ID="lblText" Text=""></asp:Label>
    <asp:Label ID="lblCustValue" runat="server"></asp:Label>
    <asp:GridView ID="GridView2" runat="server">
    </asp:GridView>                          
    <asp:Button ID="btnClose" runat="server" Text="Close" />
   <br />
</div>  

</asp:Content>

Open in new window

gridview.jpg
0
Comment
Question by:Michael Roodt
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 10

Accepted Solution

by:
khan_webguru earned 1500 total points
ID: 35180113
Hello Bro,

I faced same problem in the past and fixed this by saving state in DB. As my architecture based on "MVC" so my server side code will be a controller code. One thing more you can store this on client side by using cache or you can use session to save this serialize information. Please find the code below:
Server SIDE means my controller

 
/**
 * Order List Items
 *
 * Used to order by drag and drop.
 *
 * @return     bool
 */
public function order_list()
{
    $order = $this->input->post('list_item');

    if ($order AND $this->list_library->order($order))
    {
        $json['result'] = 'success';
        $json['message'] = $this->lang->line('lang_order_content');
    }
    else
    {
        $json['result'] = 'error';
        $json['message'] = $this->lang->line('lang_order_content_fail');
    }

    exit(json_encode($json));
}

Open in new window


CLIENT SIDE CODE -> doing serialization and passing to server side through AJAX

 
$(".list_wrap").sortable({
    opacity: 0.6,
    cursor: 'move',
    tolerance: 'pointer',
    revert: true,
    placeholder: 'ui-state-highlight',
    handle: 'span',
    items: 'div:not(.disabled)',
    delay: 500,
    distance: 30,
    update: function () {
        var order = $(this).sortable("serialize");
        $.post("http://example.com/pages/order_list", order);
    }
}).disableSelection();

Open in new window



When I was facing this problem I got help from this link please find the link below.

http://www.xmech.net/programming/jquery-ui-sortable-tutorial/

hope this will help you to solve your problem.

Regards,

Asif Ahmed Khan
0
 
LVL 2

Author Closing Comment

by:Michael Roodt
ID: 35294530
Thanks, got it working
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question