Using OnRowSelect To Act Like a Link To a Details View Page

[Patrick Barranis]

Is it possible to make a grid send the user's browser to another page when they click (select) a row?  What I mean is that the user sees a normal, read-only grid of data.  As they click on a row the browser acts like a link has been clicked and goes to the details view page for that record.

In previous projects with older versions of the MVC Grid (before any "select" functionality was added) I've done this completely by hand, including all the nice rollover highlighting and other features that are now part of the Grid.  I was excited to finally play with the new features in the latest version, but I can't find a way to avoid doing a few things by hand.  Here's what I have (working):

@(Html.Telerik().Grid<SystemDataViewModel>()
    .Name("SystemData")
    .Columns(c =>
    {
        c.Bound(s => s.ID).Hidden(true);
        c.Bound(s => s.Value);
        c.Bound(s => s.SortOrder);
        c.Bound(s => s.ParentDatumID);
        c.Bound(s => s.IsActive);
    })
    .PrefixUrlParameters(false)
    .DataBinding(b => b.Ajax().Select("UpdateIndexGrid", "SystemData",
        ((QuickFilterModel)ViewBag.QuickFilterModel).GetRouteValues()))
    .HtmlAttributes(new { Class = "NonAjaxSelectionGrid QuickFilterGrid" })
    .ClientEvents(e => e.OnRowSelected("OnRowSelected"))
    .Reorderable(r => r.Columns(true))
    .Resizable(r => r.Columns(true))
    .Selectable()
    .Sortable()
    .Pageable(p => p.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageInput | GridPagerStyles.Status)))

@(Html.ActionLink("hidden-View", "Details", "SystemData", new { id = "0" }, new { id = "hiddenViewGridLink", style = "display:none;" }))

<script type="text/javascript">
function OnRowSelected(e) {
    var rowID = e.row.cells[0].innerHTML;

    var link = $("#hiddenViewGridLink");
    window.location.href = (link[0].href + rowID);
}
</script>

This works and isn't very long, but I was sort of expecting I wouldn't have to write any Javascript to make this happen (what's above looks short, but it's missing error-checking and other code that will triple the size of the script section).  Also it's missing the CSS that uses the "hand" cursor when the user puts the cursor over the row (that's important so the user knows the row is a clickable "link").

If what I have above is as good as it gets, then please consider this a polite feature suggestion :)

Thanks!

[Atanas Korchev]

Hello Patrick Barranis,

Indeed it is currently required to write code in order to perform the navigation through JavaScript. I can log it as a feature request but first I would like to ask you how you expect it to behave. What settings should be set in order to enable this feature? How should the user specify to which page the grid should navigate? Also the user should specify the values from the current row which need to be present in the route for the detail page.

Regards,
Atanas Korchev
the Telerik team

[Patrick Barranis]

Hi Atanas,

I'm sure I do it differently from other developers, but I always specify my primary key as a single-column machine-generated value - either an int or a GUID.  Also, in every circumstance that I've built this feature I've wanted to do exactly what I did below - send the user to another page where all I need to pass in is an ID column as a route value.  The destination page is always just an action on a controller - again simple and easy.

I have, in the past, written similar code to show a details or edit form in a popup window, but you've already added that feature :)

Thanks,
Patrick

[Atanas Korchev]

Hello Patrick Barranis,

 Thank you for the clarification. I will log this feature for further consideration. I have also updated your Telerik points.

Regards,
Atanas Korchev
the Telerik team

[Keno]

Thanks for this code tip Patrick.

It took me a while to get it working with ASP instead of Razor but here are some things I learned which may help cut a few lines...

Replace...

var link = $("#hiddenViewGridLink");
window.location.href = (link[0].href + rowID);

With...

var rowID = e.row.cells[0].innerHTML;
window.location.href = "/SystemData/Details/" + rowID;

Delete...

@(Html.ActionLink("hidden-View", "Details", "SystemData", new { id = "0" }, new { id = "hiddenViewGridLink", style = "display:none;" }))

Also, if you have metadata on the ID column such as HiddenInput(true) or ScafoldColumn(false), neither scenarios will work.

Thanks again for the code snippet and I do hope Telerik adds the ability to go to details without JavaSript soon as I have several tables :)

Couldn't data binding be modified to accomplish this feature?

Thanks,

Keno