How can i add Edittemplate in childGrid in vue?

[Shivani]

Hello, Team
I want to add an edit template in child grid.

When it add in the child grid, i want to give browse button to select itemnum

Same like below image

Please share example in vue.

[Rajapandiyan Settu]

Hi Shivani, 

 

Thanks for contacting Syncfusion support. 

 

Based on your query, you want to render the search icon in the input element using editTemplate feature. You can achieve your requirement by using following code example. 

 

Cell EditTemplate: https://ej2.syncfusion.com/vue/documentation/grid/edit/#cell-edit-template 

 

Sample: https://codesandbox.io/s/281713-requirements-forked-2dsrd?file=/src/App.vue 

 

 

[App.vue] 

 

 

let elem; 

let datePickerObj; 

let searchiconclick = function (args) { 

  // do your action here 

}; 

 

------ 

 

 

     childGrid: { 

        dataSource: orderDatas, 

        queryString: "EmployeeID", 

        allowPaging: true, 

        toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"], 

        editSettings: { 

          allowEditing: true, 

          allowAdding: true, 

          allowDeleting: true, 

        }, 

        pageSettings: { pageSize: 6, pageCount: 5 }, 

        columns: [ 

          { 

            field: "OrderID", 

            headerText: "Order ID", 

            isPrimaryKey: true, 

            textAlign: "Right", 

            width: 120, 

          }, 

          { field: "ShipCity", headerText: "Ship City", width: 120 }, 

          { field: "Freight", headerText: "Freight", width: 120 }, 

          { 

            field: "ShipName", 

            headerText: "Ship Name", 

            edit: { 

              create: function () { 

                elem = document.createElement("input"); 

                return elem; 

              }, 

              read: () => { 

                return elem.value; 

              }, 

              destroy: () => { 

                elem.remove(); 

              }, 

              write: function (args) { 

                // create the span element 

                var span = document.createElement("span"); 

                // add class to the span element to show search icon 

                span.classList.add("e-icons", "searchicon"); 

                args.element.closest("td").appendChild(span); 

                // set the margin 

                span.style.margin = "-20px"; 

                // add click event 

                span.addEventListener("click", searchiconclick); 

 

                // bind cell value to the input element 

                args.element.value = args.rowData[args.column.field]; 

              }, 

            }, 

            width: 150, 

          }, 

        ], 

      }, 

 

------ 

 

 

<style> 

.searchicon::before { 

  content: "\e993"; // bind the icon to the class 

} 

</style> 

 

 

 

If you want to choose the value based on the enter value, you can achieve this by using dropdown/autocomplete control. Please refer to the below documentation and sample for your reference. 

 

Dropdown with filter: https://ej2.syncfusion.com/documentation/drop-down-list/filtering/ 

Autocomplete: https://ej2.syncfusion.com/documentation/auto-complete/filtering/ 

 

Sample: https://codesandbox.io/s/281713-requirements-forked-t6kfh?file=/src/App.vue 

 

 

[app.vue] 

 

 

              write: function (args) { 

                autoCompleteObj = new AutoComplete({ 

                  //bind the data manager instance to dataSource property 

                  dataSource: orderDatas, 

                  value: args.rowData[args.column.field], 

                  //map the appropriate columns to fields property 

                  fields: { value: "ShipName" }, 

                }); 

                autoCompleteObj.appendTo(args.element); 

              } 

 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S