This is a migrated thread and some comments may be shown as answers.

Contextmenu for empty area in grid

4 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 13 Aug 2018, 02:39 PM

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

4 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 13 Aug 2018, 02:42 PM

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");
        }
    });

0
James
Top achievements
Rank 1
answered on 13 Aug 2018, 02:43 PM

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

0
James
Top achievements
Rank 1
answered on 13 Aug 2018, 05:14 PM

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

0
Tsvetina
Telerik team
answered on 15 Aug 2018, 09:47 AM
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.
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or