Jan 15, 2021, 2:11 AM
After upload file and posting values from formpanel to gridpanel, store save but cannot insert to database by SQLDatasource
Hi support,
I tried to search the examples and also the questions from this forum but no exact solution so i raised my problem below.
I need upload a file to server and then save the file related info to database including the uploaded filename by formpanel(F3) and then list to gridpanel(G3) using store and SQLDatasource, the upload process is successful but the data insert to grid and but cannot save to database, even i did the store.save() and then store.reload(), but still not work.
Also, another problem i faced is how to use another formpanel (F1) field value (in the same ASPX) to pass to a window field when i click the document upload button to open the window (can be client side)? Currently i only used another gridpanel (G1) selected value to pass to this document upload window formpanel (F1).
Since my page is too long so i break down into pieces, below is the simplified code that I run, not sure if it is applicable to illustrate my issue.
Codebehind code
SQLDataSource code
GridPanel Code (G3)
The Javascript for handling upload file and also add the formpanel record to grid
I tried to search the examples and also the questions from this forum but no exact solution so i raised my problem below.
I need upload a file to server and then save the file related info to database including the uploaded filename by formpanel(F3) and then list to gridpanel(G3) using store and SQLDatasource, the upload process is successful but the data insert to grid and but cannot save to database, even i did the store.save() and then store.reload(), but still not work.
Also, another problem i faced is how to use another formpanel (F1) field value (in the same ASPX) to pass to a window field when i click the document upload button to open the window (can be client side)? Currently i only used another gridpanel (G1) selected value to pass to this document upload window formpanel (F1).
Since my page is too long so i break down into pieces, below is the simplified code that I run, not sure if it is applicable to illustrate my issue.
Codebehind code
protected void Store3_BeforeRecordInserted(object sender, BeforeRecordInsertedEventArgs e)
{
object waybillnumber = e.NewValues["S_WayBill_Number"];
if (waybillnumber == null || waybillnumber.ToString() == "")
{
e.Cancel = true;
this.cancel = true;
this.message = "The Waybill Number could not be blank";
}
}
protected void Store3_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
{
if (insertedValue.HasValue)
{
e.Keys.Add("S_Doc_ID", insertedValue.Value);
insertedValue = null;
}
}
protected void SqlDataSource3_Inserted(object sender, SqlDataSourceStatusEventArgs e)
{
if (e.AffectedRows > 0 && e.Command.Parameters["@newId"].Value != null)
{
insertedValue = (int)e.Command.Parameters["@newId"].Value;
}
else
{
insertedValue = null;
}
}
protected void Store3_AfterDirectEvent(object sender, AfterDirectEventArgs e)
{
if (e.Response.Success)
{
// set to .Success to false if we want to return a failure
e.Response.Success = !cancel;
e.Response.Message = message;
}
}
protected void Store3_BeforeDirectEvent(object sender, BeforeDirectEventArgs e)
{
string emulError = e.Parameters["EmulateError"];
if (emulError == "1")
{
throw new Exception("Emulating error");
}
}SQLDataSource code
<asp:SqlDataSource
ID="SqlDataSource3"
runat="server"
ConnectionString="<%$ ConnectionStrings:eZConnect_DBConnectionString %>"
SelectCommand="
SELECT
[S_Doc_ID],
[S_WayBill_Number]
,[S_Document_Filename]
,[S_Document_Description]
,[S_Document_Upload_DT]
,[S_Document_Upload_By]
FROM [eZConnect].[dbo].[Inbound_Shipment_Document]
WHERE (S_WayBill_Number = @S_WayBill_Number) order by S_Document_Upload_DT desc "
InsertCommand="INSERT INTO [Inbound_Shipment_Document] ([S_WayBill_Number]
,[S_Document_Filename]
,[S_Document_Description]
,[S_Document_Upload_DT]
,[S_Document_Upload_By]
) VALUES (
@S_WayBill_Number
,@S_Document_Filename
,@S_Document_Description
,getdate(),'system'); SELECT @newId = @@Identity;"
DeleteCommand="DELETE [Inbound_Shipment_Document] where S_Doc_ID=@S_Doc_ID"
OnInserted="SqlDataSource3_Inserted"
>
<SelectParameters>
<asp:Parameter DefaultValue="ABCD-1234" Name="S_WayBill_Number" DbType="String" />
</SelectParameters>
<InsertParameters>
<asp:Parameter Name="S_WayBill_Number" Type="String" />
<asp:Parameter Name="S_Document_Filename" Type="String" />
<asp:Parameter Name="S_Document_Description" Type="String" />
<asp:Parameter Direction="Output" Name="newId" Type="Int32" />
</InsertParameters>
<DeleteParameters>
<asp:Parameter Name="S_Doc_ID" Type="Int32" />
</DeleteParameters>
</asp:SqlDataSource>GridPanel Code (G3)
<ext:GridPanel
ID="GridPanel3"
ShowWarningOnFailure="true"
runat="server"
Border="false"
AutoScroll="True"
>
<Store>
<ext:Store
ID="Store3" runat="server" DataSourceID="SqlDataSource3"
ShowWarningOnFailure="true"
OnAfterDirectEvent="Store3_AfterDirectEvent"
OnBeforeDirectEvent="Store3_BeforeDirectEvent"
OnBeforeRecordInserted="Store3_BeforeRecordInserted"
OnAfterRecordInserted="Store3_AfterRecordInserted"
OnReadData="Store3_Refresh"
>
<Model>
<ext:Model runat="server" IDProperty="S_Doc_ID" name="ShipmentDocument">
<Fields>
<ext:ModelField Name="S_Doc_ID" />
<ext:ModelField Name="S_WayBill_Number" />
<ext:ModelField Name="S_Document_Filename" />
<ext:ModelField Name="S_Document_Description" />
<ext:ModelField Name="S_Document_Upload_DT"/>
<ext:ModelField Name="S_Document_Upload_By" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter
Name="S_WayBill_Number"
Value="#{GridPanel1}.getSelectionModel().hasSelection() ? #{GridPanel1}.getSelectionModel().getSelection()[0].data.S_WayBill_Number : -1"
Mode="Raw"
/>
</Parameters>
<Listeners>
<Exception Handler="Ext.Msg.alert('Document - Load failed', operation.getError());" />
</Listeners>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="S_Doc_ID" Text="Doc ID" Width="100" />
<ext:Column runat="server" DataIndex="S_WayBill_Number" Text="WayBill Number" Width="200" />
<ext:Column runat="server" DataIndex="S_Document_Description" Text="Document Description" Width="200" />
<ext:HyperlinkColumn runat="server" Flex="1" DataIndex="S_Document_Filename" DataIndexHref="S_Document_Filename" Text="Document Filename" Width="200" HrefPattern="/upload/{href}" />
<ext:Column runat="server" DataIndex="S_Document_Upload_DT" Text="Uploaded DateTime" Width="200" Type="DateTime" Format="yyyy-MM-dd HH:mm:ss"/>
<ext:Column runat="server" DataIndex="S_Document_Upload_By" Text="Uploaded By" Width="110" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<Select Handler="#{FormPanel3}.getForm().loadRecord(record); #{btnDeleteUpload}.enable();" />
<Deselect Handler="if (!#{GridPanel3}.hasSelection()) {#{btnDeleteRecord}.disable();}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
<Listeners>
<Expand Handler="#{Store3}.reload();" />
</Listeners>
</ext:Panel> <ext:Window
ID="UploadWindow"
runat="server"
Title="Upload Documents"
Hidden="true"
Layout="Fit"
Height="400"
Width="400"
PageX="250"
PageY="250"
Icon="Layout"
Maximize="true"
>
<Items>
<ext:FormPanel
ID="FormPanel3"
runat="server"
Width="500"
Frame="true"
MonitorValid="true"
Title="File Upload Form"
PaddingSummary="10px 10px 0 10px"
LabelWidth="50">
<Defaults>
<ext:Parameter Name="anchor" Value="95%" Mode="Value" />
<ext:Parameter Name="allowBlank" Value="false" Mode="Raw" />
<ext:Parameter Name="msgTarget" Value="side" Mode="Value" />
</Defaults>
<Items>
<ext:TextField ID="Up_S_WayBill_Number" runat="server" Name="S_WayBill_Number" FieldLabel="Way Bill Number"/>
<ext:TextField ID="DocumentDescription" runat="server" Name="S_Document_Description" FieldLabel="Document Description" />
<ext:FileUploadField
ID="FileUploadField1"
runat="server"
ButtonText="Browse Files"
Icon="Add"
ButtonOnly="true"
AllowBlank="false"
DataIndex="S_Document_Filename"
>
<Listeners>
<render Handler="SetMultipleUpload( this, #{UpdateLabel}) ;" />
<Change Handler="if(!UpdateUploadInfo(this.button.fileInputEl.dom, #{UpdateLabel})) {this.reset();
SetMultipleUpload( this, #{UpdateLabel})}"/>
</Listeners>
</ext:FileUploadField>
<ext:Label ID="UpdateLabel" runat="server"></ext:Label>
</Items>
<Listeners>
<ValidityChange Handler="#{SaveButton}.setDisabled(!valid);" />
</Listeners>
<Buttons>
<ext:Button ID="SaveButton" runat="server" Text="Save" Disabled="true">
<DirectEvents>
<Click
OnEvent="UploadClick"
Before="if (!#{FormPanel3}.getForm().isValid()) { return false; }
Ext.Msg.wait('Uploading your document...', 'Uploading');"
Failure="Ext.Msg.show({
title : 'Error',
msg : 'Error during uploading',
minWidth: 200,
modal : true,
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});"
Success="addUpRecord(#{FormPanel3}, #{GridPanel3});#{UploadWindow}.close();#{Store3}.save();"
>
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" Text="Reset">
<Listeners>
<Click Handler="#{FormPanel3}.getForm().reset(); SetMultipleUpload( #{FileUploadField1}, #{UpdateLabel});#{UpdateLabel}.setText(''); #{DocumentDescription}.setText('')" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
<Listeners>
<Hide Handler="#{FormPanel3}.getForm().reset(); SetMultipleUpload( #{FileUploadField1}, #{UpdateLabel});#{UpdateLabel}.setText('');" />
</Listeners>
</ext:Window>The Javascript for handling upload file and also add the formpanel record to grid
var addUpRecord = function (form, grid) {
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form value(s) is/are invalid",
title: "Error in Upload"
});
return false;
}
grid.store.insert(0, new ShipmentDocument(form.getForm().getFieldValues()));
grid.store.commitChanges();
};
var UpdateUploadInfo = function (el, label) {
debugger;
var ret = true;
if (Ext.isIE) {
return;
}
var size = 0;
var names = '';
for (var num1 = 0; num1 < el.files.length; num1++) {
var file = el.files[num1];
names += file.name + '\r\n';
//alert(file.name+" "+file.type+" "+file.size);
size += file.size;
}
var txt = '';
var fileSize = Ext.util.Format.fileSize(size);
if (size > 31457280) {
txt = String.format('You are trying to upload {0}. Max. allowed upload size is 30 MB', fileSize);
ret = false;
} else {
txt = String.format('{0} file(s) of total size {1}', el.files.length, fileSize);
}
label.setText(txt);
return ret;
}
var SetMultipleUpload = function (fileupload, label) {
fileupload.button.fileInputEl.set({ multiple: true });
if (Ext.isIE) {
label.setText('IE does not support multiple file upload, to use this feature use Firefox or Chrome');
}
}
