I am afraid, that sending the file(s) along the Drid item data in the same request to the server would not be possible in this case. The reason for that is the fact that the files are submitted with a FormData
request, while the Grid submits a regular XHR request
Having that said, here is what I would suggest you in this scenario:
- Use an upload widget in AsyncMode with its AutoUpload()
option set to false
. In this way the files would not be automatically uploaded upon user selection.
- Prevent the default behaviour of the edit form to submit the edited / created Grid item on the Edit button click. Instead, call the Upload() method
of the Upload widget to sent the files to the server.
- Save the files to a temporary location on Azure and as database entries. Return to the client the IDs of the uploaded files as a JSON response (it is important to be a JSON, so the widget knows that the upload process was successful).
- Implement an event handler for the Upload success event
. In that event retrieve the uploaded files IDs and store them in a hidden field on the edit form. Do not forget to trigger change on the hidden input:
- Submit the Grid item to the Create / Update controller by calling the Grid.saveRow()
method. The hidden field name
should correspond to a property in the Grid Item model class. In this way the IDs of the files sent to the server will be available in the Grid model.
- On the server, after the new Grid item has been created in the database table, retrieve its ID. Then you can set it as a foreign key for the items in the files database table, which have IDs corresponding to those sent in the hidden field. At this point you should be able to also save the files to their proper final location on Azure.
Get quickly onboarded and successful
with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.