How do I get the data from the row selector?

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

 

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

57. $(function () {
58.         $("#getThemAllBtn").click(function () {
59.             var rows = $('#grid1').igGridSelection('selectedRows');
60.             var ids = [rows.length];
61.             
62.  
63.             for (var i = 0; i < rows.length; i++) {
64.                 var indx = rows[i].index;
65.  
66.                 $('#grid1').data('igGrid').dataSource.dataView()[indx];
67.  
68.                 //this will return you object like:
69.                 //Object { ProductId=4, Name="Jeans", Number=34, more…}
70.                 ids[i] = rows[i].id;
71.             }
72.  
73.             $("#selectedRowsPKs").val(ids);
74.         });
75.     });

 Looking forward to hearing from you.

Thank you for the information. I believe that is exactly what I was looking for.

I am glad to hear that.

Thank you for using our products!

Zdravko,

I know this is a very late reply but do you guys happen to have a working MVC4 example that I can download that would show the functionality that I am asking about?

Hello Ryan,

No it is not at all, I am attaching you a sample that I hope will be nearest to the functionality that you desire.

Please note how I fill array (selectedRowsDSobjects) with row objects on button click and later can be passed to the controller.

Attachments:

1. GridMultipleSelection.zip

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.

no feedback on this ??