Mar 25, 2011, 5:37 PM
Drag-drop Gridpanel
Hi,
I am trying Ext.Net controls.
I am having some problem with drag-drop within gridpanels.Certainly I am missing something but after 2 hours of scratching my head,I am still not able to find my mistake.
I am able to see the records in Gridpanel1 and can drag the record,but after I drop it in Gridpanel2 it disappear,it is still in gridpanel1.
I am really lost.
I am trying Ext.Net controls.
I am having some problem with drag-drop within gridpanels.Certainly I am missing something but after 2 hours of scratching my head,I am still not able to find my mistake.
I am able to see the records in Gridpanel1 and can drag the record,but after I drop it in Gridpanel2 it disappear,it is still in gridpanel1.
I am really lost.
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script type="text/javascript">
// Generic function to add records.
var addRow = function (store, record, ddSource) {
debugger;
// Search for duplicates
var foundItem = store.findExact('ProductName', record.data.ProductName);
// if not found
if (foundItem == -1) {
//Remove Record from the source
ddSource.grid.store.remove(record);
store.add(record);
// Call a sort dynamically
store.sort('ProductName', 'ASC');
}
};
var notifyDrop1 = function (ddSource, e, data) {
// Loop through the selections
debugger;
Ext.each(ddSource.dragData.selections, function (record) {
addRow(Store1, record, ddSource);
});
return true;
};
var notifyDrop2 = function (ddSource, e, data) {
// Loop through the selections
debugger;
Ext.each(ddSource.dragData.selections, function (record) {
addRow(Store2, record, ddSource);
});
return true;
};
</script>
<ext:Store ID="stEmployee" runat="server" AutoSave="true" ShowWarningOnFailure="false"
OnBeforeStoreChanged="HandleChanges" SkipIdForNewRecords="false" RefreshAfterSaving="None">
<Reader>
<ext:JsonReader IDProperty="EmpId">
<Fields>
<ext:RecordField Name="EmpId" />
<ext:RecordField Name="EmpName" AllowBlank="false" />
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<Exception Handler="
Ext.net.Notification.show({
iconCls : 'icon-exclamation',
html : e.message,
title : 'EXCEPTION',
autoScroll : true,
hideDelay : 5000,
width : 300,
height : 200
});" />
</Listeners>
</ext:Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="ProductId" />
<ext:RecordField Name="ProductName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store2" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="ProductId" />
<ext:RecordField Name="ProductName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Hidden ID="UseConfirmation" runat="server" Text="false" />
<ext:FormPanel ID="EmployeeForm" runat="server" Icon="ReportAdd" Frame="true" LabelAlign="Left"
LabelWidth="90" Title="Assign Product" Width="500">
<Items>
<ext:Hidden ID="txtEmployeeId" runat="server" DataIndex="EmployeeId">
</ext:Hidden>
<ext:SelectBox ID="ddlEmployee" runat="server" StoreID="stEmployee" FieldLabel="Employee"
DisplayField="EmpName" ValueField="EmpId" DataIndex="EmpId" EmptyText="Select a Employee..."
MaxWidth="165">
<DirectEvents>
<Select OnEvent="FillProducts">
</Select>
</DirectEvents>
</ext:SelectBox>
</Items>
<Content>
</Content>
<Buttons>
<ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="AryaSoftI1.InsertProduct();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
<table>
<tr>
<td style="width: 10%">
<ext:GridPanel ID="GridPanel1" runat="server" AutoExpandColumn="ProductName" DDGroup="secondGridDDGroup"
StoreID="Store1" EnableDragDrop="true" StripeRows="true" Height="200" Width="200"
Title="Products">
<ColumnModel>
<Columns>
<ext:Column ColumnID="ProductId" Header="Product Id" DataIndex="ProductId" />
<ext:Column ColumnID="ProductName" Header="Product" Width="100" DataIndex="ProductName" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
</ext:GridPanel>
</td>
<td>
<ext:GridPanel ID="GridPanel2" runat="server" AutoExpandColumn="ProductName" DDGroup="firstGridDDGroup"
StoreID="Store2" EnableDragDrop="true" Height="200" StripeRows="true" Width="200"
Title="Assigned Product(s)">
<ColumnModel>
<Columns>
<ext:Column ColumnID="ProductId" Header="Product Id" DataIndex="ProductId" />
<ext:Column ColumnID="ProductName" Header="Product" Width="100" DataIndex="ProductName" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
</ext:GridPanel>
</td>
</tr>
<tr>
<td colspan="2" align="right" style="padding-right: 5px;">
<asp:Button ID="btnAspSave" OnClick="btnAspSave_Click" runat="server" Text="Save" />
<asp:HiddenField ID="hdnDropdowns" runat="server" />
</td>
</tr>
</table>
<ext:DropTarget ID="DropTarget1" runat="server" Target="={GridPanel1.view.scroller.dom}"
Group="firstGridDDGroup">
<NotifyDrop Fn="notifyDrop1" />
</ext:DropTarget>
<ext:DropTarget ID="DropTarget2" runat="server" Target="={GridPanel2.view.scroller.dom}"
Group="secondGridDDGroup">
<NotifyDrop Fn="notifyDrop2" />
</ext:DropTarget>
<script type="text/javascript">
var updateRecord = function (form) {
if (form.record == null) {
return;
}
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls : "icon-exclamation",
html : "Please complete the Form",
title : "Error"
});
return false;
}
form.getForm().updateRecord(form.record);
};
</script>
</asp:Content>