Geek Answers Handbook

Telerik-grid onRowSelect how to get identifier?

Hi, I am new to asp.net mvc and telerik. How can I get the o.Id value when I click on a string?

<%= 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 the generated html file. Thank you and sorry for my bad english

+4
source share
4 answers

So, I have a better way to get id:

  • bind the onRowSelect function to your grid.

  • write the following code in onRowSelect

     var dataItem = jQuery('#MyGridId').data('tGrid').dataItem(e.row); alert(dataItem['Id']);

    dataItem is a map that has all the properties of the grid, so you get everything you want.

Thank you all

+12
source

From the demo version of telerik .

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"))

He will display

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

And then you get the following:

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

Notes:

  • I know this is ugly.
  • I do not know why telerik forces you to call the .DataKeys(...) method if there is no documentary way to get the value for the specified key.
  • If you use a grouping or some other function, it becomes more complex, since the hidden position of the column changes depending on the layout of the grouping.
+10
source

I found a slightly more elegant way to do this, which borrows the mututilva answer.

Start by entering the hidden column and 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 line:

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

A source

+1
source

Change the onRowSelect function to this:

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

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

Take a look at the Telerik help site for details on how to retrieve data using the client side API: http://www.telerik.com/help

0
source

More articles:


All Articles