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

Right click on the grid can't select a row

15 Answers 1200 Views
Grid
This is a migrated thread and some comments may be shown as answers.
tonfy
Top achievements
Rank 1
tonfy asked on 25 Mar 2014, 02:38 AM
I hope that when I right click the row on the grid, it can select a row.
Like clicking a row.
Can I achieve this function by the existing configuration?

15 Answers, 1 is accepted

Sort by
0
tonfy
Top achievements
Rank 1
answered on 25 Mar 2014, 02:51 AM
If can't achieve this function by the existing configuration, Could you give me some solution?
Thank you, guys!
0
Accepted
Dimiter Madjarov
Telerik team
answered on 25 Mar 2014, 09:00 AM
Hello Tonfy,

There is no built in configuration for this, but it could be achieved by manually capturing the right mouse click. Here is a sample implementation.
E.g.
$("#Grid").on("mousedown", "tr[role='row']", function (e) {
    if (e.which === 3) {
        $(this).addClass("k-state-selected");
    }
});

Let me know if I could assist you further on this topic.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
tonfy
Top achievements
Rank 1
answered on 26 Mar 2014, 01:39 AM
[quote]Dimiter Madjarov said:Hello Tonfy,

There is no built in configuration for this, but it could be achieved by manually capturing the right mouse click. Here is a sample implementation.
E.g.
$("#Grid").on("mousedown", "tr[role='row']", function (e) {
    if (e.which === 3) {
        $(this).addClass("k-state-selected");
    }
});

Let me know if I could assist you further on this topic.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
[/quote]
Hi Dimiter,
Thank you for your help.
#("Grid").on("mousedown", "tr[role='row']", function(e) {
    if(e.which === 3) {
        $("tr").removeClass("k-state-selected");
        $(this).toggleClass("k-state-selected");
    }
});
I improve the code.
And now it seems like the left click.
What is your opinion?

0
Accepted
Dimiter Madjarov
Telerik team
answered on 26 Mar 2014, 08:45 AM
Hello Tonfy,


The code looks correct. You could modify the selector a bit, because the current one will get all table rows on the page.
E.g.
$("#Grid tbody tr").removeClass("k-state-selected");

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
tonfy
Top achievements
Rank 1
answered on 26 Mar 2014, 08:52 AM
Hello Dimiter,

Thank you!
Have a nice day!
0
tonfy
Top achievements
Rank 1
answered on 27 Mar 2014, 05:35 AM
Hi Dimiter,
Should I set the value of attribute "aria-selected"?
See code:
1.$("#Grid").on("mousedown", "tr[role='row']", function(e) {
2.    if(e.which === 3) {
3.        $("#Grid tbody tr").removeClass("k-state-selected");
4.        $("#Grid tbody tr").removeAttr("aria-selected");
5.        $(this).toggleClass("k-state-selected");
6.        $(this).attr("aria-selected""true");
7.    }
8.});
When I left click and then see the html, I see the attribute "aria-selected".
But When I right click, there is no attribute "aria-selected".
So I think that I should set the attribute "aria-selected" in the code.
Do you think so?
I don't know whether necessary.
0
tonfy
Top achievements
Rank 1
answered on 27 Mar 2014, 05:53 AM
Hi Dimiter,
The way do you provide to solve the problem I have encountered.
But it seems not very common.
Suppose I use two ‘Grid’, I want to write the two same code.
Is there any way  can write in one place and then all the "Grid" effectively.
At present only for right click function.
I use Angularjs Grid.
0
Dimiter Madjarov
Telerik team
answered on 27 Mar 2014, 12:12 PM
Hello Tonfy,

The aria attribute is added by the built in Grid selection. It is not required for the functioning of the Grid i.e. the retrieving of selected items. It is used to provide more accessibility.

Regarding the second question, you could use the k-grid class in order to retrieve all Grids on the page and attach the right click handler to them.
E.g.
$(".k-grid").on("mousedown", "tr[role='row']", function (e) {
    if (e.which === 3) {
        $(this).siblings().removeClass("k-state-selected");
        $(this).addClass("k-state-selected");
    }
});

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
tonfy
Top achievements
Rank 1
answered on 28 Mar 2014, 01:42 AM
Hi Dimiter,
What about two 'Grid' respectively in two different pages?
What I mean is expanded into a built-in function.
The 'Grid' which was expanded  can be used anywhere and we don't have to write a similar code any more.
0
Dimiter Madjarov
Telerik team
answered on 28 Mar 2014, 11:47 AM
Hello Tonfy,


The current requirement is not supported. You should include this code explicitly on each page with a Grid, which needs a right click selection.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
tonfy
Top achievements
Rank 1
answered on 31 Mar 2014, 02:12 AM
Hi Dimiter,
Thank you again.
0
Stefan
Top achievements
Rank 1
answered on 15 Dec 2015, 09:03 AM

Hi Dimiter,

Is it possible to use http://demos.telerik.com/kendo-ui/menu/context-menu for providing an option of deleting a specific row in a Kendo Grid when you right click on any cell on that row?

0
Dimiter Madjarov
Telerik team
answered on 15 Dec 2015, 09:39 AM

Hello Stefan,

Yes, the context menu could be utilized for this task. When it's command is clicked, the removeRow method of the Grid API should be invoked for the current row.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Stefan
Top achievements
Rank 1
answered on 17 Dec 2015, 08:41 AM

Hi Dimiter,

Can you please tell what should the target be given? 

I gave the target as the grid class, and on select function i gave grid.removeRow(e.target); 

 

0
Dimiter Madjarov
Telerik team
answered on 17 Dec 2015, 01:42 PM

Hello Stefan,

Except the target, you should also specify the filter configuration of the context menu and set it to the Grid rows e.g. "tr[role='row']". This way the target will be set to the rows in the context menu events.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Konstantin
Top achievements
Rank 1
commented on 11 Oct 2022, 07:34 AM

Instead of
   $(this).siblings().removeClass("k-state-selected");
use the API
   $('#grid').data('kendoGrid').clearSelection();

Don't thank me

Tags
Grid
Asked by
tonfy
Top achievements
Rank 1
Answers by
tonfy
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Stefan
Top achievements
Rank 1
Share this question
or