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

Need to add a querycellinfoevent to the child grid

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.


1 Reply

RS Rajapandiyan Settu Syncfusion Team October 17, 2022 10:46 PM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon