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.
Unfortunately, activation email could not send to your email. Please try again.

inlineformtemplate - grid - image upload

Thread ID:

Created:

Updated:

Platform:

Replies:

121157 Nov 16,2015 12:25 AM Nov 19,2015 11:02 PM ASP.NET Web Forms 7
loading
Tags: Grid
Pratheep
Asked On November 16, 2015 12:25 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 17, 2015 09:56 AM

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.

Pratheep
Replied On November 17, 2015 10:18 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 18, 2015 09:13 AM

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.

Pratheep
Replied On November 18, 2015 01:36 PM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 19, 2015 05:00 AM

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.

Pratheep
Replied On November 19, 2015 08:57 AM

Hi

ok, Thank you

Pratheep

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On November 19, 2015 11:02 PM

Hi Pratheep,

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

Regards,
Seeni Sakthi Kumar S.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;