Obtaining the cell value of a hidden igGrid column

Question

I have an Infragistics grid with the following columns:-

        @(Html.Infragistics().Grid(Model.Rows.AsQueryable())
        .ID("vmClientBankAccounts")
        .Width("100%")
        .Caption("Bank Account List")
        .PrimaryKey("AccountNo")
        .AutoGenerateColumns(false)
        .RowTemplate("<td>${Id}</td><td><a class='accountKey'>${AccountNo}</a></td><td>${Name}</td><td>${AccountType}</td><td>${Status}</td><td>${BranchName}</td><td>${BranchIBT}</td>")
        .Columns(columns =>
            {
                columns.For(x => x.Id).DataType("string").Hidden(true);
                columns.For(x => x.AccountNo).DataType("int").Width("140px");
                columns.For(x => x.Name).DataType("string");
                columns.For(x => x.AccountType).DataType("string").Width("100px");
                columns.For(x => x.Status).DataType("string").Width("110px");
                columns.For(x => x.BranchName).DataType("string").Width("260px");
                columns.For(x => x.BranchIBT).DataType("string").Width("110px");
            })
        .Features(features =>
            {
                features.Paging().PageSize(10).PrevPageLabelText("Previous").NextPageLabelText("Next");
                features.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
            })
        .DataBind()
        .Render()
    )

I have javascript that runs on click of the selected row in the grid as follows:-

<script type="text/javascript">
$(document).ready(function () {

    $('#vmClientBankAccounts td .accountKey').click(function (e) {

        $.ajax({
            type: 'GET',
            url: '/Client/ClientBankAccount',
            data: { bankAccountNo: $(e.target).text() },
            success: function (result) { $('#clientContainer').html(result); }
        });
    });

 });

I need to obtain the cell value of my first column named 'Id' which is a hidden column.

Using the following igGrid methods I am able to get any of the displayed values, but have no idea how to obtain the hidden columns value.

        var rowIndex = $("#vmClientBankAccounts").igGrid("selectedRow").IdCellValue;
        var IdCellValue = $($("#vmClientBankAccounts").igGrid("cellAt", 0, rowIndex)).text();

I would appreciate any assistance in this regard and thank you in advance.

Answer 1

In the igGrid no html is rendered for hidden columns therefore accessing the value can be done through the datasource directly - either by the row index or row Id if available.

For instance, to find the Id value of the selected row in this case, something like the following may be used:

var rowIndex = $("#vmClientBankAccounts").igGrid("selectedRows")[0].index;
var dataSource = $("#vmClientBankAccounts").igGrid("option", "dataSource");
var hiddenIdValue = dataSource[rowIndex].Id;

Answer 2

As Petar responded above, this achieves exactly what is required. I made one change to his suggestion by referencing .Records in the last line as follows, as it was returning a null reference without it.

var rowIndex = $("#vmClientBankAccounts").igGrid("selectedRow").index;
var dataSource = $("#vmClientBankAccounts").igGrid("option", "dataSource");
var hiddenIdValue = dataSource.Records[rowIndex].Id;