Jul 18, 2016, 1:28 PM
[CLOSED] grid row reordering with remote store?
Hello,
I'm interested to add row ordering with drag & drop o a grid like it is done in this example
https://examples3.ext.net/#/DragDrop...ws_Reordering/
The problem I have is that my grid has paging and remote Store which feeds from a database. This is my actual gridpanel definition
I reckon that I will need a directevent on the drop of the row, so the server can perfom the necessary database changes, but be consistent the data in the client shoud also be changed. Am I right? The other problem I have is how o reorder a row from page 2 to page 1.
Is there a example of a scenario like this?
I'm interested to add row ordering with drag & drop o a grid like it is done in this example
https://examples3.ext.net/#/DragDrop...ws_Reordering/
The problem I have is that my grid has paging and remote Store which feeds from a database. This is my actual gridpanel definition
<ext:GridPanel
ID="GridSections"
runat="server"
Title="Sections"
Flex="2"
MarginSpec="0 15 0 0"
Width="600"
Height="350">
<TopBar>
<ext:Toolbar runat="server" Flat="true">
<Items>
<ext:Button runat="server" Icon="Add">
<DirectEvents>
<Click OnEvent="addTemplateSection">
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
<ToolTips>
<ext:ToolTip runat="server" Html="Click to add a section" />
</ToolTips>
</ext:Button>
<ext:ToolbarSpacer runat="server" />
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="false" PageSize="15">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="sectionname" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="Datagrid.aspx?storeID=TemplateItems">
<Reader>
<ext:JsonReader RootProperty="items" TotalProperty="totalCount" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<DirectEvents>
<Load OnEvent="store_AfterLoad">
<EventMask ShowMask="true" />
</Load>
</DirectEvents>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:CommandColumn runat="server" Width="40">
<Commands>
<ext:GridCommand Icon="Script" CommandName="EditTemplateSection" />
</Commands>
<DirectEvents>
<Command OnEvent="Command_Click">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="NodeID" Value="record.data.id" Mode="Raw" />
<ext:Parameter Name="Command" Value="command" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:CommandColumn>
<ext:Column runat="server" Sortable="false" Text="Name" DataIndex="sectionname" Flex="1" />
<ext:CommandColumn runat="server" Width="40">
<Commands>
<ext:GridCommand Icon="Delete" CommandName="DeleteTemplateSection" />
</Commands>
<DirectEvents>
<Command OnEvent="Command_Click">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="NodeID" Value="record.data.id" Mode="Raw" />
<ext:Parameter Name="Command" Value="command" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" >
<DirectEvents>
<Select OnEvent="templateSectionRowSelect">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="NodeID" Value="record.getId()" Mode="Raw" />
<ext:Parameter Name="NodeName" Value="record.data.sectionname" Mode="Raw" />
</ExtraParams>
</Select >
</DirectEvents>
</ext:RowSelectionModel >
</SelectionModel>
</ext:GridPanel>
Can provide me some guidelines on how to perform row reorder in a situation like that.I reckon that I will need a directevent on the drop of the row, so the server can perfom the necessary database changes, but be consistent the data in the client shoud also be changed. Am I right? The other problem I have is how o reorder a row from page 2 to page 1.
Is there a example of a scenario like this?
Last edited by fabricio.murta; Jul 21, 2016 at 5:14 AM.