how can i use both row-render and rowclick in vue grid component

1 Answer 46 Views
Grid
swan
Top achievements
Rank 1
swan asked on 17 Jan 2024, 04:33 AM
https://codesandbox.io/p/sandbox/blissful-tdd-5g4x7w?file=%2Fsrc%2Fmain.vue%3A21%2C13

when i use row-render, rowclick event is not working ...

1 Answer, 1 is accepted

Sort by
1
Konstantin Dikov
Telerik team
answered on 18 Jan 2024, 12:23 PM

Hi Swan,

The example that you have shared does not contain any code, so I am assuming it was not saved correctly. Nevertheless, when rowRender is used for the Kendo UI for Vue Grid, you need to ensure that you are passing the event listeners, class names and styles from the default TR element. Here is an example demonstrating how to add the default props to the custom TR element:

    rowFunction: function (h, trElement, defaultSlots, props) {
      const available = !props.dataItem.Discontinued;
      const green = {
        backgroundColor: 'rgb(55, 180, 0,0.32)',
      };
      const red = {
        backgroundColor: 'rgb(243, 23, 0, 0.32)',
      };
      const trProps = {
        ...trElement.props,
        style: available ? green : red,
      };

      return h('tr', trProps, defaultSlots);
    },

The trEleement.props will contain the event listeners used by the Grid for the selection, rowClick, etc. events.

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources

Tags
Grid
Asked by
swan
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or