Add UploadBox on Grid event, edit mode - batch.

[noName]

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 ?

[Farveen Sulthana Thameeztheen Basha]

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:- 

Help Documentation:-https://help.syncfusion.com/js/grid/columns#column-template 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

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:- 

http://jsplayground.syncfusion.com/2z3fyibh 

Online Demo Link:-  

http://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/columntemplate 

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

Regards, 

Farveen sulthana T 

[noName]

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.

[Farveen Sulthana Thameeztheen Basha]

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:- 

http://jsplayground.syncfusion.com/wr4xd3rq 

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

Regards, 

Farveen sulthana T