Add data or hidden column for record ID

[Dennis]

I'm evaluating the kendo UI, and would like to have a grid with a hidden column for the record ID, or better yet, attach some data to each row that would contain an ID, and I was wondering if there is a straightforward way to do this?

Thanks, Dennis

[Rosen]

Hi Dennis,

I'm afraid that hidden column feature is not currently available. However, you may get the data record for a particular row through Grid's dataItem method.

All the best,
Rosen
the Telerik team

[Peter]

I too am bumping up against this and don't see a solution in any posting.  I would like to have the grid's change() set a javascipt variable with the row id of the selected row.  The row id would be the database primary key of the row, which in almost all cases is just an integer.  I see how to get arbitrary columns from the selected row with:

var dataItem = this.dataSource.view()[this.select().index()];

alert(dataItem.name);

but how to get the id column, which the user wouldn't want to see?

FYI, I'm initializing the grid from an HTML table.

Thanks for any advice on this issue!

[Rosen]

Hi Peter,

As one would expect, in order a field's data to be accessible through the DataSource, this data should be added to the DataSource. Therefore, you should verify that the field you are trying to access is rendered as column of the table element used to populated the Grid widget.

All the best,
Rosen
the Telerik team

[Peter]

Hi Rosen,

Thanks for this information.  What I'm not understanding is how to access a field that's not shown in the Grid.  For example, I don't want the database row ID shown to the user as a column, but need to access it.  Does the Grid support this?

Thanks,

Pete

[Rosen]

Hi Peter,

As I have mentioned in a previous message, dataItem method will return the entire data record available in the DataSource, not just the fields shown in the Grid's widget columns. 
Maybe, in case you are continue to experiencing difficulties, you could provide a jsFiddle test page which demonstrates what you are trying to achieve 

Regards,
Rosen
the Telerik team

[wizmagister]

Hello, I've been trying to get the model entity in the "change" event when the Record ID is NOT displayed in the grid. I could'nt find any good solution (that would survive future release of KendoUI). To me, this is basic stuff and it should have been included in Kendo. 

Here's how I did it: (I'm open for better solutions !!)

      onChange: function (arg) {
        // This gets the HTML of the selected row ...
        var Row = this.select();
        // This gives you a GUID string identifing the row in the HTML table
        var UID = Row.data("uid");
        // This custom function return the model entity by comparing the GUID
        var Element = getElementByUID(UID, this.DataSource.view()); }

The function (which i placed in a common JS library file) look something like this: 

getElementByUID = function (uid, dataSource) {

  var Index;
  for (Index = 0; Index < dataSource.length; Index++)
  {
    if (dataSource[Index].uid == uid)
      return dataSource[Index];
  }
};

Thanks,
Marc

[Peter]

Thanks for this technique, I'll give it a try.  I agree about there being no clean solution to this, perhaps I'm missing something, but I don't see how a developer would work with the list grid without this functionality.  I instantiate a small grid from a table and then need to take action when a row is clicked.

[Peter]

I've achieved my desired result by instantiating the grid from local JSON data instead of an HTML table.  Lots of good details in this video http://www.youtube.com/watch?v=FhHMOjN0Bjc

[Rosen]

Hello Marc,

In order to get a record from the DataSource you should use its getByUid method passing the UID or get method passing the record id (if such is defined).

onChange: function () {
  var record = this.dataSource.getByUid(this.select().data("uid"));
}

Greetings,
Rosen
the Telerik team

[wizmagister]

Great, so I tried your solution and it works great (this should definitely be in the Selection grid sample ...). The good thing is UID auto generated and you can get your entity back from the data source:

            change: function (arg) {
              var Entity = this.dataSource.getByUid(this.select().data("uid")); 
              this.SelectedReportTypeID = Entity.ReportTypeID;
            }

How about multi-row selection ? I'm also trying to find all the selected UID in a grid ...

Thanks !

[Rosen]

Hello Marc,

The UID is available in the Q1 2012 Beta and it is automatically added to the records as well as to Grid's row elements.

For multiple selection you will need to loop over the selected rows and get the data record as shown previously. However, note that if the item is shown in the grid current page you can use the Grid's dataItem method as described in my initial message.

Regards,
Rosen
the Telerik team

[wizmagister]

Alright, final post for all the poor souls like me who still need to learn jQuery. Here's how to get the SELECTED entities / entity IDs when that information is not displayed in the kendo grid: 

  var IDs = new Array();
  this.select().each(function (index, element) {
    var Entity = dataSource.getByUid(element.dataset.uid);
    if (Entity) IDs.push(Entity.ID);
  });
 
  return IDs;

Hope this can help somebody ... sure would have helped me !

[Andrew]

Mark,

It sure helped me. Once I found your entry.

Thanks for putting in the follow-up.

Andrew

[wizmagister]

Hello again, the following solution I posted is working fine in Firefox and Chrome but NOT Internet Explorer 9. 

  var IDs = new Array();
  this.select().each(function (index, element) {
    var Entity = dataSource.getByUid(element.dataset.uid);
    if (Entity) IDs.push(Entity.ID);
  });
 
  return IDs;

It seems IE9 don't create a "dataset" array with every "data-" attributs it finds. Instead, use this : 

    var Entity = dataSource.getByUid(element.getAttribute("data-uid"));

I'm hoping this is the final solution. Maybe the next version of Kendo will support getting hidden data natively !