Need to add a querycellinfoevent to the child grid

Question

Hi Team,I am facing an issue with Hierarchical Binding in Vue Grid component, where I have to add Title (tool-tip) using queryCellInfoEvent to the ChildGrid.please help me to add an querycellinfo event for the child grid in the ejs-grid I am using this approach to build childGrid

Regards,Cyril Ovely.

Rajapandiyan Settu · Answer

Hi Cyril,
Thanks for contacting Syncfusion support.

In EJ2 Grid, the childGrid is rendered in a typescript way, so we suggest you define the queryCellInfo even to the childGrid below.queryCellInfo: https://ej2.syncfusion.com/vue/documentation/api/grid/#querycellinfo

[App.vue]
  
  export default {
    data() {
      return {
        childGrid: {
          dataSource:
  gridData,
          queryString:
  "EmployeeID",
          columns: [
            {
             
  field: "OrderID",
             
  headerText: "Order ID",
             
  textAlign: "Right",
             
  width: 120,
            },
            {
  field: "CustomerID", headerText: "Customer ID", width:
  150 },
            {
  field: "ShipCity", headerText: "Ship City", width: 150 },
            {
  field: "ShipName", headerText: "Ship Name", width: 150 },
          ],
          queryCellInfo:
  this.queryCellInfo_child.bind(this),  //
  bind the queryCellInfo event to childGrid
        },
      };
    },
    methods: {
      queryCellInfo_child: function (args) {
        //
  do your operation here
        if (args.column.field ===
  "CustomerID" || args.column.field === "ShipCity") {
         
  args.cell.setAttribute("title", args.cell.innerText);
        }
      },
    },
  };

Sample: https://codesandbox.io/s/vue-template-forked-kf5gzb?file=/src/App.vue

Please get back to us if you need further assistance.Regards,Rajapandiyan S
If this post is helpful, please consider Accepting it as the solution so that
other members can locate it more quickly.