Michael Roodt
asked on
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.
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>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER