Upload Button in Custom Toolbar

[Enrochem]

Hi

Is there any example to render file upload control in ASP.Net MVC Grid custom tool bar.

This is to enable bulk upload of records via web page

Regards

[Thavasianand Sankaranarayanan]

Hi Enrochem, 

Thanks for contacting Syncfusion support. 

As per your request we have prepared a ASP.NET MVC Grid sample with upload box in custom toolbar and sample can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/132532/ze/SyncfusionMvcApplication14_(4)-776500563.zip 

Refer the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

            .ToolbarSettings(toolbar => 

                { 

                    toolbar.ShowToolbar(true).CustomToolbarItems(new List<object>() { "Upload", new Syncfusion.JavaScript.Models.CustomToolbarItem() { TemplateID = "#UpLoad" } }); 

                }) 

                .ClientSideEvents(clientevent => clientevent.Create("create")) 

        .Columns(col => 

        { 

             

          ---- 

 

            

        })) 

 

<script id="UpLoad" type="text/x-jsrender"> 

    <div class="uploadcontrol"> 

        <div id="UploadDefault"></div> 

        </div> 

</script> 

 

<script type="text/javascript"> 

    function create(args) { 

      

        $("#UploadDefault").ejUploadbox({ 

           

            saveUrl: "/../Handler1.ashx", 

            autoUpload: true, 

            showFileDetails: false, 

            fileSize: 1048576, //bytes, 

            

        }); 

    } 

</script> 

 

--------------------------------------------- 

[Handler11.ashx] 

 

 

public void ProcessRequest(HttpContext context) 

        { 

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

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

                { 

                    if (uploadedFiles[i].FileName != null && uploadedFiles[i].FileName != "") 

                    { 

                        string fileName = uploadedFiles[i].FileName; 

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

                        if (indx > -1) 

                        { 

                            fileName = fileName.Substring(indx + 1); 

                        } 

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

                    } 

                } 

            } 

        } 

For more information on rendering custom toolbar in Grid, refer the following Knowledge base documentation. 

Kb link: https://www.syncfusion.com/kb/2491/how-to-customize-toolbar-with-button-icon-and-link 

Refer the help documentation. 

Link: https://help.syncfusion.com/js/uploadbox/getting-started 

Link: https://help.syncfusion.com/js/uploadbox/file-size 

Regards, 

Thavasianand S.