Solved

Remember jquery sortable position

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

766 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