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

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

2 Answers 389 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Software
Top achievements
Rank 1
Software asked on 10 Jan 2013, 09:46 PM
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

2 Answers, 1 is accepted

Sort by
0
Software
Top achievements
Rank 1
answered on 11 Jan 2013, 10:21 PM
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

0
Accepted
Rosen
Telerik team
answered on 14 Jan 2013, 09:52 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Software
Top achievements
Rank 1
Answers by
Software
Top achievements
Rank 1
Rosen
Telerik team
Share this question
or