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. Image for the cookie policy date
close icon

inlineformtemplate - grid - image upload

Hi


1-   inlineformtemplate - it's possible upload image  when Add  records to grid(code behind) ,without using - ashx

2 -  inlineformtemplate - saveFiles.ashx upload image not working 

Thanks
Pratheep
  

Attachment: Inline_Editing_e8b2d31f.rar

7 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 17, 2015 02:56 PM UTC

Hi Pratheep,

Before proceeding with your query, we request you to provide the following information which will be helpful to analyze the issue and provide you the solution as soon as possible.

Would you like to upload and send the file along with the Grid records while sending the post for saving the Grid content in the Server-side?

Regards,
Seeni Sakthi Kumar S.


PR Pratheep November 17, 2015 03:18 PM UTC

Hi

Thanks for guide, 

I need to upload customer  image ( contact person - image) with customer records ( customer records only showing in grid - no need to show customer image in grid but upload in server ) 

Thanks 

Pratheep



Attachment: imageupload_8f86b6af.rar


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 18, 2015 02:13 PM UTC

Hi Pratheep,

We have used a  form element to save the image/file along with the Grid records. ejDataMangers should works with the json objects and not with other type of objects. So we send a ajax post of a form element to achieve this requirement. Please refer to the below code example.

<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);

                    }

                });

            }

        }


    </script>

[codeBehind]

        [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();


        }


Regards,
Seeni Sakthi Kumar S.


PR Pratheep November 18, 2015 06:36 PM UTC

Hi

Thanks for guide, 

browser unable to browse (select)  the image  and  upload image to target folder (click save or edit button not fire)

please find the test project   

        [WebMethod]
        public void PerformInsert(EmployeeInsertModel employee)
        {
     
            uploadimage(employee.Photo);

        }



        private void uploadimage(HttpPostedFileBase photo)
        {

            string targetFolder = HttpContext.Current.Server.MapPath("uploadfiles");

            if (!Directory.Exists(targetFolder))
            {
                Directory.CreateDirectory(targetFolder);
            }
            if (photo != null && photo.ContentLength > 0)
            {
                var fileName = Path.GetFileName(photo.FileName);
                photo.SaveAs(Path.Combine(targetFolder, fileName));
            }

           
        }

  
        public class EmployeeInsertModel
        {

            public int EmployeeID { get; set; }
            public HttpPostedFileBase Photo { get; set; }
        }
        [WebMethod]
        public void PerformUpdate(EmployeeInsertModel employee)
        {

            uploadimage(employee.Photo);

        }


Thanks

Pratheep

Attachment: upload_141d5937.rar


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 19, 2015 10:00 AM UTC

Hi Pratheep,

We have created a custom sample request for your requirement and created a new support incident under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

Regards,
Seeni Sakthi Kumar S.


PR Pratheep November 19, 2015 01:57 PM UTC

Hi

ok, Thank you

Pratheep


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team November 20, 2015 04:02 AM UTC

Hi Pratheep,

We will update you further updates of custom Sample in your new incident.

Regards,
Seeni Sakthi Kumar S.

Loader.
Live Chat Icon For mobile
Up arrow icon