[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1584
  • Last Modified:

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
0
Michael Roodt
Asked:
Michael Roodt
1 Solution
 
khan_webguruCommented:
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

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now