Select Kendo Grid row when clicking the column hyperlink

Navigation
0

I have a problem with the Kendo 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.

At this point it is ready, but when I click on the hyperlink and I do not select the grid line, it simply does not get the coordinate, because when I click, I'll send the latitude and longitude of the position.

In testing I saw that it would be necessary to select the grid at the moment of clicking the link. But how do I do this?

The grid assembly code follows: 

$("#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&ccedil;&atildeo no Mapa', '495', '650', VeiculoSelecionado + '|' + Latitude + '|' + Longitude);
}
    
asked by anonymous 06.08.2015 / 19:03

1 answer

0

It's not really correct to use change in this case. The change is more for when the user clicks and selects the line. In this case, since the event is about the particular column, it is not right to use the whole row selection on it. It's even a matter of user experience.

I would prefer to register an event after the grid has been created, even on the outside: 

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

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

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

Now what happens in the event is that dataItem() also accepts a tr element of the grid, where it can access the uid of the line and find the object in dataSource . Because the click event is in a itself, using closest() it finds tr / p>

Here's a demo .

    
07.08.2015 / 15:50
.htaccess redirect when indexOf Send sensor data to a bank