Solved

Remember jquery sortable position

Posted on 2011-03-21
2
1,500 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 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 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