Hyperlink instead of button for popup View button in grid row

[Baldvin]

I want to create a column in the grid with hyperlink to "View" a popup for details of a record. I can easily create this as a button with

columns.Command(command =>
    {
        command.Custom("View").Click("showDetails");
    }

and then

    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        var wnd = $("#Details").data("kendoWindow");
        wnd.content(detailsTemplate(dataItem));
        wnd.center().open();

However, what I'd like to do is something like 

columns.Template(@<text></text>).ClientTemplate(@"<a onclick=""showDetails(#= ID#)"" href=""javascript:void(0)"">View</a>");

Obviously this does not work as the parameter for showDetails(...) is not the id. I'm not able to figure out how to do this manually. Nor am I able to see if my proposed way of doing this is appropriate or perhaps there is a much better way to achieve this?

I have successfully done this for Edit and Delete like this:

columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-button-icontext k-grid-edit"" href=""\#"">Edit</a>").Width(30);
columns.Template(@<text></text>).ClientTemplate(@"<a class=""k-button-icontext k-grid-delete"" href=""\#"">Delete</a>").Width(50);

but these are obviously a bit different beasts than the popup view function I want to implement.

I fail to find a solution for this in other forum posts. My apologies if this has been covered already.

Best regards,
Baldvin

[Dimiter Madjarov]

Hi Baldvin,


I am not sure that I understand what is the actual issue in the current case. The event arguments for the showDetails function are the original arguments from the mouse click event. If you need them in the second approach you could add a class to the links and bind to their click event too. If that is not the case, could you please elaborate a bit more and specify what is the desired behavior?

Regards,
Dimiter Madjarov
Telerik

[Baldvin]

Please allow me to elaborate.

First, on the details of your reply:

"The event arguments for the showDetails function are the original arguments from the mouse click event"

Knowing this could put me on the right track. Though I'm not clever enough to figure out how to pass these from the hyperlink right now. What would a call to showDetails look like from the hyperlink in order for the mouse click event argument to be passed properly?

"...you could add a class to the links and bind to their click event too"

And this is another hint I could use to figure out how to pass the appropriate parameter to the showDetails function. Though I must admit I am not sure at the moment how to achieve this. I will look for possible solutions in the forums and on the web.

Secondly, I will try to reword my problem to better express what I am trying to do, in case it might shed some light on a possible solution:

The "View" button (a button that, when clicked, opens up a popup window with more details about a row) that can be created with (for example):
    command.Custom("View").Click("showDetails");
takes up too much space and does not look the way I need it to look in the grid. I want a "button" that is just a hyperlink but when you click it, it has the same effect as clicking the view button created from the above custom command has.

To create this link for edit and delete, putting a normal link with classes k-grid-edit and k-grid-delete is enough. To do the same for a "view"-details button requires some other method. This is what I am trying to figure out how to do.

I hope the above explanations do not add to the confusion and give a better idea about what I am trying to accomplish.

- BH

[Dimiter Madjarov]

Hello Baldvin,


Thank you for the additional details. To achieve this you could use the approach that I mentioned in my previous post i.e. add a class to the links and handle their click event.
E.g.

columns.Template(@<text></text>).ClientTemplate(@"<a href=""\#"" class='myCommand'>View</a>");

//grid is the ID of the Grid widget
$("#grid").on("click", ".myCommand", function (e) {
    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));

    //custom logic
});

I hope this information helps. Have a great day!

Regards,
Dimiter Madjarov
Telerik