Need to add a querycellinfoevent to the child grid

[Cyril Ovely]

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]

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.