Remember jquery sortable position

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
LVL 2
Michael RoodtSenior .NET Integrations DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
khan_webguruConnect With a Mentor Commented:
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
 
Michael RoodtSenior .NET Integrations DeveloperAuthor Commented:
Thanks, got it working
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.