This is a migrated thread and some comments may be shown as answers.

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

4 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Patrick Barranis
Top achievements
Rank 1
Patrick Barranis asked on 10 Mar 2011, 08:51 PM
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!

4 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 11 Mar 2011, 08:46 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Patrick Barranis
Top achievements
Rank 1
answered on 11 Mar 2011, 02:13 PM
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
0
Atanas Korchev
Telerik team
answered on 14 Mar 2011, 07:47 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Keno
Top achievements
Rank 1
answered on 04 Sep 2011, 08:21 PM
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
Tags
Grid
Asked by
Patrick Barranis
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Patrick Barranis
Top achievements
Rank 1
Keno
Top achievements
Rank 1
Share this question
or