Contextmenu for empty area in grid

5 posts, 0 answers
  1. James
    James avatar
    7 posts
    Member since:
    Dec 2017

    Posted 13 Aug 2018 Link to this post

    Hi,

          I am working on contextMenu for grid. Currently, the grid has some data rows and the rest area is empty. ContextMenu on data rows works fine. However, I also need to right-click on the empty area of the grid, then I need to show a contextmenu(for example, "add new" function) and remove selection of the current grid data rows. How could I do it? Thanks for your help.

     

    James

  2. James
    James avatar
    7 posts
    Member since:
    Dec 2017

    Posted 13 Aug 2018 Link to this post

    For more information, I use following code to handle selection on grid data row.

    $("#Grid").on("mousedown", "tr[role='row']", function (e) {
            if (e.which === 3) {
                $("tr").removeClass("k-state-selected");
                $(this).toggleClass("k-state-selected");
            }
        });

  3. James
    James avatar
    7 posts
    Member since:
    Dec 2017

    Posted 13 Aug 2018 Link to this post

    FYI, I use the following code to handle selection on grid data rows.

    $("#userManagementGrid").on("mousedown", "tr[role='row']", function (e) {
            if (e.which === 3) {
                $("tr").removeClass("k-state-selected");
                $(this).toggleClass("k-state-selected");
            }
        });

     

    James

  4. James
    James avatar
    7 posts
    Member since:
    Dec 2017

    Posted 13 Aug 2018 Link to this post

    Hi,

         After trying different methods, here's my solution. If you have better solution, please let me know. Thanks.

    $("#Grid").on("mousedown",  function (e) {
            if (e.which === 3) {
                if ($(e.target).closest('tr').length > 0) {
                    $("tr").removeClass("k-state-selected");
                    $(e.target).closest('tr').toggleClass("k-state-selected");
                }
                else {
                    $("tr").removeClass("k-state-selected");
                }
               
            }
        });

    James

  5. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 15 Aug 2018 Link to this post

    Hi James,

    You can use the Grid APIs to select and deselect rows. To clear the current selection, call clearSelection. And then call grid.select($(e.target).closest('tr')) to select the clicked row if the click was inside the rows list. This is especially recommended if you are using the persist selection feature.

    As for the context menu, did you manage to get is working as needed, too or do you need help with showing it in the empty area? If you need help, please show us the code you have until now for creating and showing the context menu.

    Regards,
    Tsvetina
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top