How do I get the data from the row selector? | Infragistics Forums

State See Verified Answer
Replies 7 replies
Subscribers 14 subscribers
Views 2111091 views
Users 0 members are here

igGrid

945

How do I get the data from the row selector?

Ryan Coleman posted over 10 years ago

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"
}
]
});
}

Parents

20255

Verified Answer
Offline Zdravko Kolev posted over 10 years ago
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

$(function () {

        $("#getThemAllBtn").click(function () {

            var rows = $('#grid1').igGridSelection('selectedRows');

            var ids = [rows.length];



            for (var i = 0; i < rows.length; i++) {

                var indx = rows[i].index;

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

                //this will return you object like:

                //Object { ProductId=4, Name="Jeans", Number=34, more...}

                ids[i] = rows[i].id;

            }

            $("#selectedRowsPKs").val(ids);

        });

    });

Looking forward to hearing from you.
Cancel
Reply

Reject Answer

Cancel
650

Thibaud Lescuyer posted over 9 years ago in reply to Zdravko Kolev

This approach works for getting the dataset for selected rows however for us this breaks the multiselect feature with checkboxes. The following represents the block of code handling selection for us

{
name: 'Selection',
multipleSelection: true,
activation: true,
persist: true,
rowSelectionChanged: function(evt, ui) {
scope.selectedIds = ui.selectedRows.map(function(val) {
return val.id;
});
var selectedRow = element.igGrid('selectedRow');
var data = element.data('igGrid').dataSource.dataView()[selectedRow.index];
scope.$broadcast('selectionChanged', {selectedIds: scope.selectedIds, dataObj: data});
}
}

As you can probably tell we are using the grid in an angular app. When we do this, we are unable to select multiple rows through checkboxes. However, the CTRL+Click works.
Cancel
Reply

Cancel

Reply

650

Thibaud Lescuyer posted over 9 years ago in reply to Thibaud Lescuyer

no feedback on this ??
Cancel
Reply

Cancel

Children

No Data