We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True"> <ClientSideEvents ActionComplete="complete" ActionBegin="begin" /> <Columns> <ej:Column Field="EmployeeID" TextAlign="Right" /> </Columns> <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="inlineformtemplate" InlineFormTemplateID="#CustomerForm"></EditSettings> <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> </ej:Grid> <script type="text/template" id="CustomerForm"> <b>Order Details</b> <table cellspacing="10"> <tr> <td style="text-align: right;">Employee ID </td> <td style="text-align: left"> <input id="EmployeeID" name="EmployeeID" value="{{:EmployeeID}}" class="e-field e-ejinputtext valid" /> </td> </tr> <tr> <td style="text-align: right">Picture </td> <td style="text-align: left"> <div id="UploadInput"></div> <p id="par"></p> </td> </tr> </table>
</script> <script> function begin(args) { if (args.requestType == "save") { args.cancel = true; //Updating the file as one of the column data args.data["Photo"] = window.uploadData.files; window.uploadData["editData"] = new FormData(); //Converting the grid data to form data to send files to controller for (var d in args.data) uploadData.editData.append(d, args.data[d]); //Updating the form before sending the ajax post. proxy = this; $.ajax({ url: window.uploadData.url, type: 'POST', data: window.uploadData.editData, success: function () { proxy.refreshContent(); } }); //Canceling the request args.cancel = true;
} } function complete(args) { if (args.requestType == "beginedit" || args.requestType == "add") {
window.uploadData = {};//A Global var to track and hold file uploading info window.uploadData.url = args.requestType == "add" ? "/Default.aspx/PerformInsert" : "/Default.aspx/PerformUpdate"; //Render upload control $("#UploadInput").ejUploadbox({ asyncUpload: false, multipleFilesSelection: false, buttonText: { browse: "Select Photo" }, fileSelect: function (args) { //Get the file from fileSelect event uploadData["files"] = args[0].rawFile; //inially copying the file to global variable and same can be retrieved in the save action. var filename = args[0].name; $("#par").html(filename); } }); } }
[WebMethod] public void PerformInsert(EmployeeInsertModel employee) {
NorthwindDataContext db = new NorthwindDataContext();
db.EmployeePhotos.InsertOnSubmit(new EmployeePhoto() { EmployeeID = employee.EmployeeID, Photo = employee.Photo != null ? GetByteStream(employee.Photo) : null }); db.SubmitChanges();
} //Convert the posted file to byte[] public byte[] GetByteStream(HttpPostedFileBase file) {
byte[] bt = new byte[file.InputStream.Length]; MemoryStream ms = new MemoryStream(); ms.Read(bt, 0, (int)file.InputStream.Length); return bt; } public class EmployeeInsertModel {
public int EmployeeID { get; set; } public HttpPostedFileBase Photo { get; set; } } [WebMethod] public void PerformUpdate(EmployeeInsertModel employee) {
NorthwindDataContext db = new NorthwindDataContext();
EmployeePhoto emp = (EmployeePhoto)db.EmployeePhotos.Single(s => s.EmployeeID == employee.EmployeeID);
emp.EmployeeID = employee.EmployeeID; emp.Photo = employee.Photo != null ? GetByteStream(employee.Photo) : null;
db.SubmitChanges();
|
