getting the value of a hidden column – igGrid

In my grid I have multiple rows, each row has a ‘view’ button on it.  I want to be able to click a button in a row and use the value from an underlying hidden column to open a new page and display data associated with that value (its a primary key).  How do I get the value for the hidden column from the row I click the button in ?

heres my grid

@(Html.Infragistics()
.Grid(Model)
.ID(“contractGrid”)
.Width(“100%”)
.Height(“275px”)
.PrimaryKey(“ID”)
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Columns(column =>
{
column.For(x => x.ContractId).HeaderText(“”).Width(“5%”);
column.For(x => x.ContractCommodity).HeaderText(“Commodity”).Width(“15%”);
column.For(x => x.ContractRef).HeaderText(“Ref”).Width(“10%”);
column.For(x => x.ContractDate).HeaderText(“Date”).Width(“15%”).DataType(“date”).Format(“dd/MM/yyyy”);
column.For(x => x.ContractStartDate).HeaderText(“Start”).Width(“15%”).DataType(“date”).Format(“dd/MM/yyyy”);
column.For(x => x.ContractEndDate).HeaderText(“End”).Width(“15%”).DataType(“date”).Format(“dd/MM/yyyy”);
column.For(x => x.ContractBuySell).HeaderText(“Buy/Sell”).Width(“20%”);
column.Unbound(“View”).Width(“5%”).Template(“<input type=’button’ onclick=’viewContract(${ContractId})’ value=’View’ class=’btn btn-primary btn-xs’ />”).HeaderText(“”).Width(“5%”);
})
.Features(features =>
{
//features.Sorting().Type(OpType.Remote);
features.Paging().PageSize(10).Type(OpType.Remote).RecordCountKey(“TotalRecordsCount”);
features.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey(“ContractId”).Hidden(true));
//features.Filtering().Type(OpType.Remote);
})
.ResponseDataKey(“Records”)
.DataSourceUrl(Url.Action(“GridGetData”,”Contract”))
.DataBind()
.Render())

I then have some javascript in the page to acyivate the specified controller action

<script>

function viewContract(ContractId) {
window.location.href = ‘@Url.Action(“Details”, “Contract”)?id=’ + ContractId;

}
</script>

can you give me some example code ?

I modified my grid, like this

column.Unbound("View").Width("5%").Template("<input type='button' onclick='selectedRowsCellsValue()' value='View' class='btn btn-primary btn-xs' />").HeaderText("").Width("5%");

and used an example you sent to someone in the forums, but the code doesnt work (i put th alert in just to see if the value was obtained, but nothing happens)

 function selectedRowsCellsValue() {
        var rowId;
        var rows = $("#contractGrid").igGridSelection("selectedRows");
        $.each(rows, function (ix, el) {
            rowId = el.element.attr("data-id");
            var cellValue = $("#contractGrid").igGrid("getCellValue", rowId, "ContractID");
            alert(cellValue);
        });
    }

Hello Mark,

Thank you for posting to our forum.

I have set ProductID column to hidden.

To get the value of hidden column of the grid on button click I would recommend you to enable
selection
behavior first and then use ‘getCellValue’ method.

getCellValue’ method is used to retrieves a cell value using the row index and the column key. If a primaryKey is defined, rowId is assumed to be the row Key (not index).
If primary key is not defined, then rowId is converted to a number and is used as a row index

Now on button click you could use something similar to
function selectedRowsCellsValue() {
var rowId;
var rows = $(“#grid1”).igGridSelection(“selectedRows”);
$.each(rows, function (ix, el) {
rowId = el.element.attr(“data-id”);
var cellValue = $(“#grid1”).igGrid(“getCellValue”, rowId, “Name”);
console.log(cellValue);
});
}

I have created a sample application for your reference using version 16.2.

Please find the attached sample and let me know if you need further assistance.

igGridSelection_selectedRows

 

 

I still cant get this to work, Ive debugged the javascript and when i click the button, it goes into the code, but doesnt do anything, the alert method is never reached.

heres my grid (I want to access the ID by clicking a button in the grid)

@(Html.Infragistics()
                    .Grid(Model)
                    .ID("contractGrid")
                    .Width("100%")
                    .Height("275px")
                    .PrimaryKey("ID")
                    .AutoGenerateColumns(false)
                    .AutoGenerateLayouts(false)
                    .Columns(column =>
                    {
                        column.For(x => x.ContractId).HeaderText("Id").Width("5%");
                        column.For(x => x.ContractCommodity).HeaderText("Commodity").Width("15%");
                        column.For(x => x.ContractRef).HeaderText("Ref").Width("10%");
                        column.For(x => x.ContractDate).HeaderText("Date").Width("15%").DataType("date").Format("dd/MM/yyyy");
                        column.For(x => x.ContractStartDate).HeaderText("Start").Width("15%").DataType("date").Format("dd/MM/yyyy");
                        column.For(x => x.ContractEndDate).HeaderText("End").Width("15%").DataType("date").Format("dd/MM/yyyy");
                        column.For(x => x.ContractBuySell).HeaderText("Buy/Sell").Width("20%");
                        column.Unbound("View").Width("5%").Template("<input type='button' onclick='selectedRowsCellsValue()' value='View' class='btn btn-primary btn-xs' />").HeaderText("").Width("5%");
                    })
                    .Features(features =>
                    {
                        //features.Sorting().Type(OpType.Remote);
                        features.Paging().PageSize(10).Type(OpType.Remote).RecordCountKey("TotalRecordsCount");
                        features.Hiding().ColumnSettings(settings => settings.ColumnSetting().ColumnKey("ContractId").Hidden(true));
                        features.Selection().Activation(true).MultipleSelection(false);
                        //features.Filtering().Type(OpType.Remote);
                    })
                    .ResponseDataKey("Records")
                    .DataSourceUrl(Url.Action("GridGetData","Contract"))
                    .DataBind()
                    .Render())

and the javascript

function selectedRowsCellsValue() {
        var rowId;
        var rows = $("#contractGrid").igGridSelection("selectedRows");

        $.each(rows, function (ix, el) {
            rowId = el.element.attr("data-id");
            var cellValue = $("#contractGrid").igGrid("getCellValue", rowId, "ID");
            console.log(cellValue);
            alert(cellValue);
        });
    }

as soon as I reach this line

var rows = $("#contractGrid").igGridSelection("selectedRows");

code execution jumps out of the function, no alert is shown so its not doing the grid stuf

the rows variable is always null

I tried this

var grid = $("#contractGrid");  —-   grid has a value

then this

var rows = $("#contractGrid").igGridSelection("selectedRows");  — rows is null

so the function fails

all Im trying to do is allow users to click a button in a row, get the primary id of the underlying data, then launch a new wndow using the primary key to retrieve data, simple, bog standard stuff that is something necessry for practically all web apps, why is this so difficult ??  Im wasting so much of my time just trying to get some pretty basic straightforward functionality.  Can you give me a WORKING example of the required functionality ?

Hello Mark,

Thank you for the update.

After looking into your code, I found that you set the multiple selection behavior to ‘false’ that means you allowing single selection for the end user like this

features.Selection().Activation(true).MultipleSelection(false);

but in the function you are using a method to select multiple rows like this

    var rows = $(“#contractGrid”).igGridSelection(“selectedRows”);

Which is causing the issue.

 To select single row in the grid you should use method ‘selectedRow’ and as you will get a single selected row you don’t need to loop throw each rows to get the cell value ,just get the cell value by passing row id.

Your function would be like this:

function selectedRowsCellsValue(prodID) { 

 var row = $(“#grid1”).igGridSelection(“selectedRow”);

 var cellValue = $(“#grid1”).igGrid(“getCellValue”, row.id, “ProductNumber”);

alert(cellValue);

}

I have created a sample application for your reference. Please find the attachment.

and if you are passing a primary key though button click you can directly access it to get the cell value .In that case you dont need to selction behavior in the grid.

your function would belike this:

 

function selectedRowsCellsValue(ContID) {

var cellValue = $("#grid1").igGrid("getCellValue", ContID,"ProductID");

} 

I noticed one more thing in your sample code is that you set ‘ID’ column as a  primarykey  but in your columns collection there is no such ‘ID’ column that would create an issue.

Please refer my sample application and let me now if you need further assistance.

igGridSelection_selectedRows (1)