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.

Grid - inlineformtemplate - Upload -image

Thread ID:

Created:

Updated:

Platform:

Replies:

120926 Oct 28,2015 05:19 AM Nov 3,2015 02:23 AM ASP.NET Web Forms 8
loading
Tags: Grid
Pratheep
Asked On October 28, 2015 05:19 AM


Its's possible Grid Upload picture in  inlineformtemplate?  ( imagepath  - showing fakepath) 


Design 
<script type="text/template" id="CustomerForm">

     <tr>
               <td style="text-align: right;" valign="top">Picture
                </td>

                <td style="text-align: left" valign="top">
              
                      <input type="file" id="myFile" name="myFile" />
                </td>

            </tr>
</script>


Code behind

  private void adddata(List<CustomersSerializable> data, Dictionary<string, object> KeyVal)
        {

                  if (keyval.Key == "myFile")
                {
                    string imagepath = Convert.ToString(keyval.Value);
                    string destinationFile = Server.MapPath(" ") + "\\crmflies\\contact\\image\\";

                    HttpPostedFile file = Request.Files["myFile"];

                 
                    if (file != null && file.ContentLength > 0)
                    {
                        string fname = Path.GetFileName(file.FileName);
                        file.SaveAs(Server.MapPath(Path.Combine(destinationFile, fname)));
                    }

                    
                }

        }

Thanks
Pratheep

Balaji Marimuthu [Syncfusion]
Replied On October 29, 2015 11:25 AM

Hi Pratheep,

Thanks for contacting Syncfusion support.

Query: Its's possible Grid Upload picture in  inlineformtemplate? 

Yes, it’s possible to upload picture in Grid inlineformtemlate. We have created a sample based on your requirement and refer to the sample & code example as below.
Sample: Sample-uploadbox

<script type="text/template" id="CustomerForm">

        <b>Order Details</b>

        <table cellspacing="10">

           

            . . .


            <tr>

                <td style="text-align: right;" valign="top">Picture

                </td>

                <td style="text-align: left" valign="top">

                    <div id="UploadInput"></div>

                </td>


            </tr>

        </table>
    </script>


In Grid ActionComplete event, we have rendered the uploadbox control and bind the corresponding action. Refer to the code example as below.

<div>

        <ej:Grid ID="OrdersGrid" runat="server"  AllowPaging="True" >

            <ClientSideEvents ActionComplete="complete" />

            <FilterSettings FilterType="Menu" />

            <Columns>

                <ej:Column Field="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID"  Width="100" />

                <ej:Column Field="EmployeeID"  TextAlign="Right"  Width="100" />

            </Columns>

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        </ej:Grid>
    </div>


function complete(args) {

            //render uploadbox control

            if ((args.requestType == "beginedit" || args.requestType == "add")) {

                $('#UploadInput').ejUploadbox({

                    saveUrl: "saveFiles.ashx",

                });

            }
        }


We have uploaded the image file in uploadbox and saved the image in required file path.


public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            context.Response.Write("Hello World");

            string targetFolder = HttpContext.Current.Server.MapPath("") + "\\New folder\\";

            if (!Directory.Exists(targetFolder))

            {

                Directory.CreateDirectory(targetFolder);

            }

            HttpRequest request = context.Request;

            HttpFileCollection uploadedFiles = context.Request.Files;

            if (uploadedFiles != null && uploadedFiles.Count > 0)

            {

                for (int i = 0; i < uploadedFiles.Count; i++)

                {

                    string fileName = uploadedFiles[i].FileName;

                    int indx = fileName.LastIndexOf("\\");

                    if (indx > -1)

                    {

                        fileName = fileName.Substring(indx + 1);

                    }

                    uploadedFiles[i].SaveAs(targetFolder + "\\" + fileName);

                }

              

            }

           


        }


Refer to the Demo in following link.
UploadBox: http://asp.syncfusion.com/demos/web/uploadbox/events.aspx
InlineFormTemplate: http://asp.syncfusion.com/demos/web/grid/inlineformonlocaldata.aspx


If we misunderstood your requirement please share us more information which will be helpful to provide better solution at the earliest.

Regards,
Balaji Marimuthu


Pratheep
Replied On October 29, 2015 03:16 PM

Hi

Thanks for you guide 

Upload control browse the image (not upload - only browse the image file ) and click  inlineformtemplate Save  button  only start the upload the image.

 It's possible? 

Design 

  <script type="text/template" id="template">
         <td style="text-align: right;">Upload
                </td>
                <td style="text-align: left">          
                <ej:UploadBox ID="SyncUpload" runat="server" AsyncUpload="false"></ej:UploadBox>           
                </td>
            </tr>
    </script>

Code behind

 protected void EditAction(string eventType, object record)
        {

            if (eventType == "endAdd")
            {
                 if (keyval.Key == "SyncUpload")
                        {
                            UploadFile();
                        }
             }
         }




        private void UploadFile()
        {

     
            string targetFolder = HttpContext.Current.Server.MapPath(" "+ "\\image\\") ;
            if (!Directory.Exists(targetFolder))
            {
                Directory.CreateDirectory(targetFolder);
            }

            if (SyncUpload.HasFiles)
            {
                for (int i = 0; i < SyncUpload.PostedFiles.Count; i++)
                {

                    string fileName = SyncUpload.PostedFiles[i].FileName;
                    int indx = fileName.LastIndexOf("\\");
                    if (indx > -1)
                    {
                        fileName = fileName.Substring(indx + 1);
                    }

                   SyncUpload.PostedFiles[i].SaveAs(targetFolder + "\\" + fileName);
                    
                }
            }       

        }


Thanks
Pratheep

Attachment: Inline_Editing_e3ed6dcc.rar

Prasanna Kumar Viswanathan [Syncfusion]
Replied On October 30, 2015 11:46 AM

Hi Pratheep,

Please confirm the following details. It will help us to provide the prompt solution

1.       Do you need to show the “Uploadbox”  after browsing the image file.  The default behavior of “uploadbox” is to show the image name in upload box dialog. Please find the screenshot.


            

2.       If we remove the upload box dialog then we cannot able to view the image name. So, do you need to show the image name in the edit form?


3.       Once you click the “Save” button you need to upload the image to destination path?

If this is not meet your requirement so please elaborate the requirement, it will be helpful to provide the better solution.

Regards,
Prasanna Kumar N.S.V


Pratheep
Replied On October 30, 2015 12:36 PM

Hi

Thanks for guide.

All 3  steps fine.   ( 3rd step   inlineformtemplate  Save  button  upload the image to destination path) 

Thanks
Pratheep



Prasanna Kumar Viswanathan [Syncfusion]
Replied On November 2, 2015 06:17 AM

Hi Pratheep,

Your requirement has been achieved by the actionBegin event of ejGrid.  This event triggers for every grid action before its starts. In this event, we check the condition with the requestType and upload the image file using xhrPerformUpload function.

We hide the upload dialog box by disabling the showFileDetails API of ejUploadBox and display the image name using the fileselect event of ejUploadBox. This event fires when the Upload process ends in Error and we can able to get the filename in the arguments, and display the file name.


Please find the following code example, screenshot and sample:

<div>

        <ej:Grid ID="OrdersGrid" runat="server"  AllowPaging="True" >

            <ClientSideEvents ActionComplete="complete" ActionBegin="begin" />

            <FilterSettings FilterType="Menu" />

            <Columns>

                <ej:Column Field="OrderID" IsPrimaryKey="True" TextAlign="Right" Width="90" />

                <ej:Column Field="CustomerID"  Width="100" />

                <ej:Column Field="EmployeeID"  TextAlign="Right"  Width="100" />

            </Columns>

           <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="InlineFormTemplate" InlineFormTemplateID="#CustomerForm"></EditSettings>

        </ej:Grid>
    </div>
----------------------------------------------------------------------------

<script>

        function complete(args) {

            //render uploadbox control

            if ((args.requestType == "beginedit" || args.requestType == "add")) {

                $('#UploadInput').ejUploadbox({

                    saveUrl: "saveFiles.ashx",

                    showFileDetails: false,

                    fileSelect : "select",

                });

            }

        }

        function begin(args) {

            if (args.requestType == "save") {

                var upload = $('#UploadInput').ejUploadbox("instance");

                var wrapper = upload.diaObj.wrapper;

                var fileItem = wrapper.find(".e-ul li.e-upload-file");

                upload._xhrPerformUpload($(fileItem).data("file"));

            }

        }


        function select(args) {

            var filename = args[0].name;

            $("#par").html(filename);

        }


    </script>


Screenshot:



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Sample-uploadbox584136372_(2)-86569105

Refer to the Help documents for the actionBegin and fileSelect events,

actionBegin : http://help.syncfusion.com/js/api/ejgrid#events:actionbegin

fileSelect : http://help.syncfusion.com/js/api/ejuploadbox#events:fileselect

Regards,
Prasanna Kumar N.S.V


Pratheep
Replied On November 2, 2015 09:33 AM

Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the attachment 

Thanks
Pratheep

Attachment: uploadscreen_66988cb8.rar

Pratheep
Replied On November 2, 2015 09:41 AM

       Hi

Thanks for you guide 

browse image fine but when click save image upload not upload

please find the test project  attachment 

Thanks
Pratheep

Attachment: Inline_Editing_be0f305f.rar

Prasanna Kumar Viswanathan [Syncfusion]
Replied On November 3, 2015 02:23 AM

Hi Pratheep,

On analyzing your sample, we found that an improper URL has been mentioned in the SaveFiles.ashx.  So, please mention the proper URL in the SaveFiles.ashx file.


Please find the screenshot and modified sample:



Screenshot of an uploaded image :



Sample: http://www.syncfusion.com/downloads/support/forum/120926/ze/Inline_Editing-2107326925

Regards,
Prasanna Kumar N.S.V

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.

;