telerik-grid onRowSelect how to get id?

Question

Hi i am new in asp.net mvc and telerik controls. How can i get o.Id value when i click on row?

 <%= Html.Telerik().Grid(Model)                    
                    .Name("RolesGrid")
                    .DataKeys(keys => keys.Add(o => o.Id))                               
                    .Selectable()                    
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.Name);
                        columns.Bound(o => o.Description);

                    })
                    .Pageable()                       
                    .ClientEvents(events => events                    
                    .OnRowSelect("onRowSelect"))

             %>

in js code:

 function onRowSelect(e)   {
        var ordersGrid = $('#RolesGrid').data('tGrid');  
        var row = e.row;
        var dataItem = ordersGrid.dataItem(row);
        alert(dataItem);
    }

But dataItem is null and there is no id value in generated html file. Thanks and sorry for my bad english

http://www.telerik.com/help/aspnet-ajax/grid-onrowselected.html "get_gridDataItem() is not directly available on the client unless OnRowCreating/OnRowCreated events are hooked up. This is done for optimization purpose. If you need the rowIndex, you can use eventArgs.get_itemIndexHierarchical()" — Paul Zahra, Oct 27 '14 at 15:23

score 12 · Accepted Answer · answered Jun 17 '11 at 07:53

12

So after all i have the best way to get id is:

bind onRowSelect function to your grid
write next code in onRowSelect
```
var dataItem = jQuery('#MyGridId').data('tGrid').dataItem(e.row);     
alert(dataItem['Id']);
```
dataItem is a map witch have all properties of grid model so you get all you want

Thats all, thanks

answered Jun 17 '11 at 07:53

Sanja Melnichuk

3,465
3
25
46

Can you clarify what is the #Gridid and other variables are? – Ammar May 30 '12 at 20:19
1

@Ammar Ahmed MyGridId its your grid identifier (grid name when you declare telerik grid, e argument in OnRowSelect function) – Sanja Melnichuk May 31 '12 at 06:30
In the question, the grid seems to be server side and server side grid don't support dataItem. It's what I read from Telerik tech support... – Samuel Aug 16 '12 at 13:18

mmutilva · Answer 2 · 2011-02-09T15:52:00.120

10

From telerik grid demo.

You have to put the Id in the telerik grid as a hidden column.

// ...
.DataKeys(keys => keys.Add(o => o.Id))                               
.Selectable()
.Columns(columns =>
    {
        columns.Bound(o => o.Id).Hidden();
        columns.Bound(o => o.Name);
        columns.Bound(o => o.Description);
    })
// ...
.ClientEvents(events => events.OnRowSelect("onRowSelect"))

It will render a

<td style="display: none; ...">...</td>

And then you get it like this:

function onRowSelect(e)   {
    var id = e.row.cells[0].innerHTML;
    // ...
}

Notes:

I know, it's ugly.
I don't know why the telerik forces you to call the .DataKeys(...) method if there's no documented way to get the value for the key defined.
If you use grouping or some other feature it gets trickier, as the hidden column position varies depending on the grouping arrangement.

edited Feb 09 '11 at 15:52

answered Feb 09 '11 at 15:20

mmutilva

18,688
22
59
82

Thanks for response ill do it 2 month ago but with similar method )) – Sanja Melnichuk Feb 09 '11 at 16:01
@Sanja: Sorry for the late answer... I was looking for some similar problem I had when I bumped into this question. – mmutilva Feb 09 '11 at 19:38
1

While telerik controls for asp.net are powerful sometimes customizing the more complicated samples can prove difficult. This example was spot on. easy as pie! – Oct 06 '11 at 09:29
1

I left my hidden id at the end and added var id = e.row.cells[e.row.cells.length - 1].innerHTML; to always get the last item. That fixes the issue with grouping – Ammar May 31 '12 at 15:49

score 1 · Answer 3 · answered Jun 24 '15 at 15:48

I found a slightly more elegant way to do this that borrows off of mmutilva's answer.

Start by putting in the hidden column and the change event in the same way:

.DataKeys(keys => keys.Add(o => o.Id))                               
.Selectable()
.Columns(columns =>
    {
        columns.Bound(o => o.Id).Hidden();
        columns.Bound(o => o.Name);
        columns.Bound(o => o.Description);
    })
.ClientEvents(events => events.OnRowSelect("onRowSelect"))

But then in the javascript function, there is a better way to actually select the object and then the hidden row:

    function onRowSelect(e)   {
        var grid = e.sender;
        var currentitem = grid.dataItem(this.select());
        var Id = currentitem.Id;
        //then do whatever with the ID variable
    }

Source

score 0 · Answer 4 · answered Dec 10 '10 at 13:03

0

Change the function onRowSelect to this:

function onRowSelect(sender, args){...}

The sender will be the grid, and from the args you can determine which item was selected.

Look to the Telerik help site for detailed info on how to get the data using the Client Side API: http://www.telerik.com/help

answered Dec 10 '10 at 13:03

ByteCrunchr

51
5

When i try show alert(args); its call undefined value and in help i saw only one parameter for mvc grid OnRowSelect – Sanja Melnichuk Dec 10 '10 at 13:11
Apoligies... I made a big assumption that the grid syntax was the same as the AJAX control. I'm going to punt this one to an MVC expert. I did read a bit about the grid on the Telerik site and it seems like your onRowSelect code is correct. From the code above I don't see where you've bound the grid to any data. – ByteCrunchr Dec 10 '10 at 23:34
Thanks for response ill try to look for bound data. – Sanja Melnichuk Dec 12 '10 at 18:54

telerik-grid onRowSelect how to get id?

4 Answers4