Infragistics, Javascript, Jquery

Infragistics igGrid Get Row Data from Javascript

This isn’t well documented (or at  least I had trouble finding the answer to this), so I figured there may be others (or me again down the road) that could use this information.

Essentially I have a grid loaded from a datasource.  I needed to get at the data of a particular row from outside of any grid event, so I had to retrieve the rows from the grid, find the row that I needed and then reference the data.   All in all, once you know the syntax, it’s not that bad.
This line returns an array of the row data:

var dataRow = $("#igDetails").igGrid("dataSourceObject").Records;

Next we want to retrieve a particular row based on a value in a particular column:

var result = $.grep(dataRow, function (e) { return e.Id === id; });

Result will be an array of rows that match your criteria. In our case I just want the first match (ID will be unique, so should be only one row)

Now to retrieve the data:

var description = result[0].Description;

Pretty simple really, but the retrieving the data from the grid took some looking and piecing parts of the documentation together to get what I needed.

Advertisements

2 thoughts on “Infragistics igGrid Get Row Data from Javascript

  1. Hey Jason, Emil from the IgniteUI team at Infragistics here.

    I’d like to shed some light on our API and propose two options on how to achieve the same result with less and more straightforward code.

    In your post you work directly with the data source. We support this case by using the findRecordByKey method (documented here – http://help.infragistics.com/jQuery/2015.1/ui.iggrid#methods:findRecordByKey).

    // get the record from the data source identified by the id param
    var result = $(“#igDetails”).igGrid(“findRecordByKey”, id);

    // if there is a result, get the Description field
    if (result) {
    description = result.Description;
    }

    Another option is to use the getCellValue method (http://help.infragistics.com/jQuery/2015.1/ui.iggrid#methods:getCellValue). This will get the job done on a single line, but bare in mind that this doesn’t work directly with the data source. Instead, it works against the current values displayed on the grid so if you have an uncommitted transaction it will get the value from there.

    var description = $(“#igDetails”).igGrid(“getCellValue”, id, “Description”);

    Hope that helps!

  2. Thanks Emil, that does look easier, not sure how I overlooked that in the docs. I’ve used your win forms grid for years, but just recently getting into the igniteUI tools….so I still have stuff to learn each day. Thanks again!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s