[Solved] Need to get the Id of the selected row, don't want delete button

[David]

I’m using the following code to get the Id of the row that is selected in the grid.  In order to get this javascript to work I had to do these two things in order to have the needed HTML rendered. 

Is there a way to get the Id of the selected grid row without having the Delete button as part of the grid?

(1) Change from server-side population to client-side population
(2) Add: columns.Command(commands =>
{
commands.Delete().ButtonType(GridButtonType.Image);
});

Grid
@(Html.Telerik().Grid<GCSAdminPoco.AttributeSkillSelector>()
        .Name("AttributesToAddToUserGrid")
        .Editable(editing => editing.Mode(GridEditMode.PopUp))
        .DataKeys(dataKeys =>
        {
            dataKeys.Add(k => k.ID);
        }
        )
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("SelectAllAttributes", "User")
                .Delete("DeleteAttribute", "User")
            )
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Title("Skill");

            columns.Command(commands =>
            {
                commands.Delete().ButtonType(GridButtonType.Image);

            }).Width(45);

        })
        .ClientEvents(events => events.OnRowSelect("onRowSelectedForAttribute"))
        .Selectable()
        .Scrollable(scrolling => scrolling.Height("155px"))
        .Filterable(filtering => filtering.Enabled(true))
        .Sortable()
        .Pageable(pager => pager.PageSize(10))
    )

JavaScript function

 function getAttributeIdFromSelectedRecord(e) {

        var grid = $(e.row).parents('.t-grid').data('tGrid');
        var data = grid.data[$(grid.$tbody[0].rows).index(e.row)];
        var theId;

        for (x in grid.dataKeys) {
            theId = data[x];
        }

        //return { AttributeId: theId };
        return theId;

    }

    function onRowSelectedForAttribute(e) {

        // Keep track of the selected Attribute Id.
        var field = returnObjectById("hdnSelectedAttributeId");
        field.value = getAttributeIdFromSelectedRecord(e);

    }

[Sam]

Hello,

You can do this by adding a hidden column in your grid, bound to the id field of the object, setting the client side event onRowSelect and then a little bit of JavaScript:

// Grid Config
      .ClientEvents(c => c.OnRowSelect("onRowSelect"))
      .Columns(cols =>
      {
  ........
  ........
          cols.Bound(c => c.IDFieldName).Hidden(true);
      })

// Java Script function onRowSelect(e) {
            var grid = $(this).data("tGrid");
            var dataItem = grid.dataItem(e.row);
            alert(dataItem.IDFieldName);// <-- This is the ID field on your object.
        }

Hope this helps you out!!

Sam

[David]

Thank you.

[Ron]

Can someone explain a little bit more on how to do this?
Grid config?
.??????????

[Jim]

Very simple grid:
    Html.Telerik().Grid(Model)
        .Name("Clients")
        .DataKeys(keys => keys.Add(c => c.Id))
        .Columns(c =>
        {
            c.Bound(o => o.Id);
            c.Bound(o => o.Client).Title("Client");
            c.Bound(o => o.Contact).Title("Contact");
            c.Bound(o => o.Phone).Title("Phone").Sortable(false);
        })
        .Selectable()
        .ClientEvents(events => events.OnRowSelected("ClientSelected"))
        .Sortable(sorting => sorting.OrderBy(sortOrder => sortOrder.Add(o => o.Client)))
        .Render();                

Trying to just get Id:

    function ClientSelected(e) {
        var grid = $(this).data('tGrid');
        var dataItem = grid.dataItem(e.row);
        alert(dataItem.Id);
}

no Alert!

What am I missing?