Right click on the grid can't select a row

[tonfy]

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?

[tonfy]

If can't achieve this function by the existing configuration, Could you give me some solution?
Thank you, guys!

[Dimiter Madjarov]

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

 

 

[tonfy]

[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

 

 

[/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?

[Dimiter Madjarov]

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

 

 

[tonfy]

Hello Dimiter,

Thank you!
Have a nice day!

[tonfy]

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.

[tonfy]

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.

[Dimiter Madjarov]

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

 

 

[tonfy]

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.

[Dimiter Madjarov]

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

 

 

[tonfy]

Hi Dimiter,
Thank you again.

[Stefan]

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?

[Dimiter Madjarov]

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

 

 

[Stefan]

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

 

[Dimiter Madjarov]

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

 

 

[Konstantin]

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

Don't thank me