[Solved] How to know which cell was clicked

[Helene Dumas]

Hello,
Using VS2010 and MVC2.
I have a grid with AJAX binding. The grid has 3 columns: Name(string), Active(boolean) and the last column has a Delete button.  In order to make it simple, we decided to do the editing with a dialogbox.  So on the onRowSelected, I open the Dialogbox and it works really well.
But in the last column, there is a delete button. The delete button appears only on specific rows depending if the record can be deleted or not... I do that with the OnRowDataBound event.  And  again, it works beautifully...
Now here is my problem.  When I click on the button, the OnRowSelected if fired... So before I do the Dialog.open(), I would like to know if the button has been clicked or not. 
Is there a way to know which column has been clicked... or the position of the mouse when the click occured.. or if a button has been clicked...
I thank you in advance for any help.

[Atanas Korchev]

Hello Helene Dumas,

I think the best way to handle this is by modifying the grid source code so clicking the delete button does not raise the selected event. This is demonstrated in this forum thread.

The rowSelected event currently does not provide the clicked cell. You have to wire up a custom event handler in order to extract the clicked cell. Here is how:

<%= Html.Telerik().Grid<T>()
                  .Name("MyGrid")
                  .ClientEvents(events => events.OnLoad("onLoad"))
%>

<script type="text/javascript">
function onLoad() {
      $('#MyGrid tr:has(td) td').live('click', function(e) {
             var clickedCell = this;
      });
}
</script>

In the future we will enhance the onRowSelected event and provide the clicked cell as well.

I hope this helps,
Atanas Korchev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.

[Helene Dumas]

Hello,
The code you sent worked fine... Only one thing... I had to modify a little the code, because the footer is considered a <td> element... so I have to add a condition that the row is not a footer.  Please see below the way I modified the code...
Also, on the onRowDataBound, I put a button on specific row... right now, the event is fired on the click of the cell... eventually, I would like the event to be fired on the click of the button itself... but that's for another day.  Right now, we are very happy with this.

            $('#Categories tr:has(td) td').live('click', function (e) {
                var clickedCell = this;
                if (clickedCell.className != "t-footer") {
                    var grid = $('#Categories').data('tGrid');
                    var rowIndex = $(clickedCell.parentNode).parent().find('tr:not(.t-grouping-row)').index(clickedCell.parentNode);
                    var item = grid.data[rowIndex];
                    if (clickedCell.cellIndex == 2) {
                        supprimerCategorie(item);
                    }
                    else {
                        onRowSelected(item);
                    }
                }
            });

[Timir]

Hello,

Is there a way to find out the active cell (last clicked cell) postion (row,column)?
I am developing a solution where i have to pick values only after the row and column from the selected cell.

-Thanks
Timir