Kendo React Grid: Double click and right click menu

12 posts, 0 answers
  1. Joe
    Joe avatar
    8 posts
    Member since:
    May 2015

    Posted 26 Oct 2018 Link to this post

    Hi

    I have a use case with a straightforward Grid where my users would like to have actions bound to a double click and a popup-menu on right click.

    I only found the onClick handler which of course works, but my users would prefer a double click. The reason they name is that they commonly select and copy data from the grid, which interferes with the onClick behaviour.

    Is there some description how to achieve double click and right click behaviour on the Grid?

    Thanks!

  2. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 29 Oct 2018 Link to this post

    Hello, Joe,

    In this case, I can suggest using a rowRender and attaching the additional event handlers on these events. The event will also have access to the data for the clicked row:

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-rowrender

    This is an example of how it can be achieved:

    https://stackblitz.com/edit/react-7mz85d?file=app/renderers.js

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Binyam
    Binyam avatar
    2 posts
    Member since:
    Jan 2017

    Posted 06 Mar 2019 in reply to Stefan Link to this post

    Is it possible to access props passed from another component?
  4. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 06 Mar 2019 Link to this post

    Hello, Binyam,

    Yes, this is possible by passing the desired prop to the function call.

    I modified the example to showcase this:

    https://stackblitz.com/edit/react-7mz85d-mux2ks?file=app%2Fmain.js

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Binyam
    Binyam avatar
    2 posts
    Member since:
    Jan 2017

    Posted 06 Mar 2019 in reply to Stefan Link to this post

    Thank you
  6. Heythem
    Heythem avatar
    8 posts
    Member since:
    Aug 2018

    Posted 25 Oct 2019 Link to this post

    Hello , 

    I  am facing some issue when i tried to add an event listener fro dbclick event in the databound method , is there a way to call a method i defined on db clicking a row from the grid (also this should be only fired depending on the row type ) 

    Best Regards
  7. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 29 Oct 2019 Link to this post

    Hello, Heythem,

    I`m clarifying that this is related to the Kendo UI Grid wrapper for React.

    I`m posting the resolution of the internal ticket here for better visibility:

    "I only had to add ".off " to the event listener so it would be executed once.

    I would share this in case someone needs it in the future:"

     var grid = $($(".k-grid")[1]).data("kendoGrid");
      grid.element.off('dblclick').on('dblclick','tbody tr[data-uid]',function (e) {
    
    /// put your function cals here
    });

     

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  8. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 18 Feb 2020 Link to this post

    But how do I get the cell (or field) of the row on which I right clicked.

    I seems that onContextMenu just gives me the row

     

    Thank you

  9. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 18 Feb 2020 Link to this post

    Hello, Len,

    As this thread has questions for the Kendo UI wrapper for React and the KendoReact Grid, please clarify which is the used product.

    Also, a sample or a code snippet from the current configuration can prove helpful.

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 18 Feb 2020 in reply to Stefan Link to this post

    Kendo-react-grid

     

    import '@progress/kendo-theme-default/dist/all.css';
    import {process} from '@progress/kendo-data-query';
    import {Grid, GridColumn, GridToolbar} from '@progress/kendo-react-grid';
    import {DropDownList} from '@progress/kendo-react-dropdowns';
    import {Window} from '@progress/kendo-react-dialogs';
    import {ExcelExport} from '@progress/kendo-react-excel-export';
    import {GridPDFExport} from '@progress/kendo-react-pdf';
    import {Dialog, DialogActionsBar} from '@progress/kendo-react-dialogs';
    import {Popup} from '@progress/kendo-react-popup';
    import {Menu, MenuItem} from '@progress/kendo-react-layout';

     

    rowRender = (trElement, dataItem) => {
    const trProps = {
    ...trElement.props,
    onContextMenu: (e) => {
    e.preventDefault();
    this.handleContextMenuOpen(e, dataItem.dataItem);
    }
    };
    return React.cloneElement(trElement, {...trProps}, trElement.props.children);
    }

    handleContextMenuOpen = (e, dataItem) => {
    this.fiels = e.field;
    this.dataItem = dataItem;
    this.dataItemIndex = this.state.tasks.findIndex(p => (p.rowid === this.dataItem.rowid));
    this.offset = {left: e.clientX, top: e.clientY};
    this.setState({
    open: true
    });
    }


     

     

  11. Len
    Len avatar
    11 posts
    Member since:
    Feb 2020

    Posted 18 Feb 2020 in reply to Len Link to this post

    My code basically comes from one of the Grid and Popup demos

    I just can't remember which ones

    Thanx for assisting

     

    Len

  12. Stefan
    Admin
    Stefan avatar
    3012 posts

    Posted 19 Feb 2020 Link to this post

    Hello, Len,

    Thank you for the clarification.

    I can assume that this is the example in question:
    https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/context-menu/

    In the example, we use the rowRender to attach the event, but the cellRender can be used to attach the event on the specific cell:

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-cellrender

    In that cell, there is access to the field of the cell, so this can be used to know which cell of the row was right-clicked.

     

    Regards,
    Stefan
    Progress Telerik

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top