Select Kendo Grid row when clicking on the columns hyperlink

Question

I have a problem at Kendo’s grid. What happens is that I have a grid with several columns, among them, I have one with the last position sent by the tracker. This column has the data in hyperlink format and when clicked on it, will open a new screen showing the position on the map.

Up to this point is ready, but when I click on the hyperlink and I DO NOT select the grid line, it simply does not pick the coordinate, because when I click I send the latitude and longitude of the position.

In tests I saw that it would be necessary to select the grid at the time of the click on the link. But how do I do this?

Follow the grid mount code:

$("#grdUltimasPosicoes").kendoGrid({
        columns: [
            {
                field: "Ignicao",
                title: "Ign.",
                template: "<input class='check_row' type='checkbox' #= Ignicao === true ? checked='checked' : ''  # disabled='disabled'/>",
                width: "70px"
            },
            {
                field: "Posicao",
                title: "Posi&ccedil;&atildeo",
                width: "300px",
                template: "<a href='javascript:Maps()'>#=Posicao#</a>",
                attributes: {style: "background-color: #= Cor #"}
            },
            {field: "DataEvento", title: "Data/Hora", format: "{0: dd/MM/yyyy HH:mm}", width: "135px"},
            {field: "DataGPS", title: "Data GPS", format: "{0: dd/MM/yyyy HH:mm}", width: "135px"},
            {field: "Rpm", title: "RPM", width: "80px"},
            {field: "Velocidade", title: "Vel.", width: "70px"},
            {field: "PotenGPS", title: "N&ordm; GPS", width: "95px"},
            {field: "PotenGPRS", title: "N&ordm; GPRS", width: "100px"}
        ],
        change: function (e) {
            if (this.select != null) {
                latlng = this.dataItem(this.select());
                Latitude = latlng.Latitude;
                Longitude = latlng.Longitude;
            }
        },
        groupable: false,
        sortable: true,
        editable: false,
        filterable: true,
        scrollable: true,
        pageable: false,
        selectable: "row",
        height: 250,
        dataSource: posicoes
    });

And this is the function called to open the new screen with the map:

function Maps() {
    acessaTela('HelpDesk', 'MapaPosicao', 'Novo', '1', 'Posiç&atildeo no Mapa', '495', '650', VeiculoSelecionado + '|' + Latitude + '|' + Longitude);
}

Answer 1

It’s actually not right to use the change in that case. The change It’s more like when the user clicks and selects the line. In this case, as the event relates to the specific column, it is not right to use the entire row selection on it. It even becomes a matter of user experience.

I prefer to register an event after creating the grid, on the outside even:

$(grid.element).on("click", ".link", function() {
    var tr = $(this).closest("tr");
    var dataItem = grid.dataItem(tr);
});

Where .link would be the class of his a in the template:

template: "<a href='javascript:void(0)' class='link'>#=Posicao#</a>",

Now, what happens at the event is that the dataItem() also accepts an element tr of the grid, where it can access the uid of the line and find the object in the dataSource. How the click event is on a itself, using the closest() he finds the tr respective.

Here a demo.