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

Add UploadBox on Grid event, edit mode - batch.

I have edit template in Grid for 1 of the columns - div with id '#upload'

I am using edit mode batch and when I click on the cell, I see the template. For adding UploadBox I am using cellEdit event, which is only the event happen:
cellEdit: function (args) {
 $('#upload').ejUploadbox({
                            saveUrl: "/home/upload",
                            showFileDetails: false,
                            extensionsAllow: ".jpg, .jpeg",
                            fileSelect: function (args) {
 },
, but in this way it doesn't work. If I change mode to inline and event to :
actionComplete: function (args) {
 $('#upload').ejUploadbox({
                            saveUrl: "/home/upload",
                            showFileDetails: false,
                            extensionsAllow: ".jpg, .jpeg",
                            fileSelect: function (args) {
 },
it works fine, but not with edit mode batch and cellEdit event.
Is there way to add UploadBox in edit mode - batch ?

3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 20, 2017 03:59 PM UTC

Hi Customer, 

We have checked your query and if you want to place the upload box into the Grid while on batch editing, you can use column Template support of the Grid. In the column template we have placed the upload box as the template column. In the templateRefresh event of the Grid, you can render the upload box in any of the Grid column. If you want to perform operations such as filtering/Sorting/ Grouping for template column, you need to define the “type” of the particular column data. In Grid, these operations are performed based on the field name, so we suggest you to set the field and type property to perform sorting, filtering and  Grouping operation in Grid.  
  
Please refer to the documentation link:- 



Please refer to the code example:- 

       <script type="text/x-jsrender" id="columnTemplate"> 
             <div id="upload" class="upload"></div> 
        </script>     
      <script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                 
                columns: [ 
                         { field: "EmployeeID", headerText: "UploadBox", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 }, 
                         { field: "EmployeeID", headerText: "Employee ID", isPrimarykey: true, editType: ej.Grid.EditingType.NumericEdit, textAlign: ej.TextAlign.Right, width: 90 }, 
                         { field: "FirstName", headerText: "First Name", width: 90 }, 
                         . . . 
                ], 
                templateRefresh: "template", 
            }); 
        }); 
 
        function template(args) { 
            $(args.cell).find(".upload").ejUploadbox({ saveUrl: "" }); 
 
        } 
    </script> 


Please refer to the sample:- 


Online Demo Link:-  


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 




NO noName September 21, 2017 04:26 PM UTC

Is there way to show button only if cell is clicked ?  cellEdit, doesn't work to bind uploadBox.

When I click on cell and it is active, the button is removed and there is input tag, instead, how to prevent that ?

I am using  template. On click to be same template, but not input tag.



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 23, 2017 04:20 AM UTC

Hi Customer, 

If you want to perform click action on button which was placed on the template column, you shouldn’t mention the field property for that template column. Because Grid operations has been performed based on field property of the Grid. So we suggest you to remove field property of the Grid for template column. 

Please refer to the sample:- 


Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 


Loader.
Up arrow icon