Select a row, go to detail view for selected item?

[Software]

Sorry if this is explained elsewhere - I've been searching and can't find a simple example of how to do this.

I have just started using KendoUI, specifically a grid.  I would like to be able to click a row in the grid, and have that event send the user to a detail view for the item selected, passing along the ID of the selected item.  It seems like a pretty basic thing, but I can't find an example of this anywhere.  Here's the code I've got right now, which just pops an alert:

@(Html.Kendo().Grid(Model)

    .Name("tblGrid")

    .Columns(columns =>

    {

        columns.Bound(w => w.Id).Hidden();

        columns.Bound(w => w.IncidentType).Width(160);

        columns.Bound(w => w.Location).Width(180);

        columns.Bound(w => w.IncidentDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

        columns.Bound(w => w.PostDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

    })

    .DataSource(dataSource => dataSource

        .Server()

        .Model(model => model.Id(w => w.Id))

        .PageSize(15)

        .Create("Editing_Create", "Grid")

    )

    .Events(events => events.Change("rowClick"))

    .Groupable()

    .Pageable()

    .Sortable()

    .Selectable()   

    .Filterable()       

)

 

<script type="text/javascript">

    function rowClick(e) {

        alert("click happened, what now?");

    }

</script>

Thanks!

Eddie

[Software]

I've made some progress, but could still use some help getting the data key for the selected row to the javascript method that sends the user to the detail view.  Here's where I'm at with the javascript:

function rowClick(e) {

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

    var propId = $("#tblGrid").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "'] td:eq(0)").text();

     

    location.href = '@Url.Action("Details", "Home", new { id = propId })';

}

When I click a row I get this javascript error on the first line of rowClick method:

Unable to get value of the property '-1': object is null or undefined

So what is the trick to getting a reference to the grid?  I've tried all of the methods explained in this post, but none work for me.  If I just put the 3rd line in the method and hard code the ID it works, but of course it's not going to the selected record. 

One more question - I'd like to change the cursor when hovered over a row and I read to do it with the DataBound event.  I tried adding that, according to this demo, but it does nothing when the grid binds to the data.  Never even goes into the javascript method. 

Thanks for your help!!
Eddie

[Rosen]

Hello Eddie,

As you may know both the dataItem method as well as the dataBound event will work only when the Grid widget is populated via AJAX binding. Thus, the behavior you are experiencing is cause by the fact that you are using server-side binding. In this mode the data is not available client-side.

You may consider similar to the following implementation of the change event: 

function gridChange() {
     var propId = this.select().closest("tr").find("td:eq(0)").text();

     location.href = kendo.format('@(Server.UrlDecode(Url.Action("Details", "Home", new { id = "{0}" })))',propId);
}

Regarding the hover event. In your scenario you may use the document ready event to hook the hover as the grid will be already created when the page loads.

$(document).ready(function() {
    $("#Grid tbody tr").hover(
       function() {
         $(this).toggleClass("k-state-hover");
       }
     );
});

All the best,
Rosen
the Telerik team