Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Ryan Coleman
945
How do I get the data from the row selector?
posted

Guys,

I am working with an igGrid in jQuery and I am trying to figure out how to get the data from the row that is being selected with the row selector.

Here is my code below for the example table. As I said, I am just trying to figure out how to get the fields from the row that was selected and then use them in another jquery function.

function createCboxSelectorsGrid() {
$("#cbRowSelectors").igGrid({
width: "100%",
autoGenerateColumns: false,
dataSource: northwindEmployees,
responseDataKey: "results",
dataSourceType: "json",
columns: [
{ headerText: "Employee ID", key: "ID", dataType: "number", width: "120px" },
{ headerText: "Name", key: "Name", dataType: "string"},
{ headerText: "Title", key: "Title", dataType: "string" },
{ headerText: "Phone", key: "Phone", dataType: "string" }
],
features: [
{
name: 'Responsive',
enableVerticalRendering: false,
columnSettings: [
{
columnKey: 'ID',
classes: 'ui-hidden-phone'
}
]
},
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false,
{
name: "Selection"
}
]
});
}

  • 20255
    Verified Answer
    Offline posted

    Hello Ryan,

     Thank you for contacting us.

     I can recommend you two ways to access the selected rows data.

     First is to get it through the API with selectedRow/selectedRows method. This merhod will return an array of selected rows where every object has the format {element(tr), index}

    For more info : https://www.igniteui.com/help/api/2014.1/ui.iggridselection#methods:selectedRows

     Second way is when you get the array from above to use the row object index property which will give you the index of the selected row in the current data view. You can retrieve the data object easily with the following code:

    $('#grid1').data('igGrid').dataSource.dataView()[indx];

     Code snippet:

    Code Snippet
    1. $(function () {
    2.         $("#getThemAllBtn").click(function () {
    3.             var rows = $('#grid1').igGridSelection('selectedRows');
    4.             var ids = [rows.length];
    5.             
    6.  
    7.             for (var i = 0; i < rows.length; i++) {
    8.                 var indx = rows[i].index;
    9.  
    10.                 $('#grid1').data('igGrid').dataSource.dataView()[indx];
    11.  
    12.                 //this will return you object like:
    13.                 //Object { ProductId=4, Name="Jeans", Number=34, more...}
    14.                 ids[i] = rows[i].id;
    15.             }
    16.  
    17.             $("#selectedRowsPKs").val(ids);
    18.         });
    19.     });

     Looking forward to hearing from you.