Exacting a hidden value from hidden column for a single row using Typescript

Hi ,

I have a grid with multiple columns and one of the column has a so called row-id. which contains the id of the row in the database. I want to capture this hidden value from the grid and on checkbox click capture this value to send to the web service so the required action.

How do i get this done. I am able to get the column hidden as

{ key: “id”, headerText: “ItemID”, dataType: “string”, hidden: true },
{ key: “m”, headerText: “Error”, dataType: “string”, hidden: true }

but if i run the application the hidden value doesnt stream the value to the DOM.

Please let me know how i can active the above described action.

Hello Shashank,

Yes indeed when a column is set to hidden, the way you have shown, the actual column is not present in the DOM.
So from what I understand you need to get if the "ID" column is hidden or not. You can do that with the "getVisibleIndexByKey" method of the igGrid.

Calling for example $("#grid").igGrid("getVisibleIndexByKey", "id") in your case will return -1.
This means that the column is currently hidden. If it is not hidden it will return the index of the column which always is greater or equal to 0.

Let me know if this helps what you are trying to achieve and let me know if you have any more questions.

Regards,
Svetoslav Krastev,
Infragistics

I think you misunderstood what i was asking. Let me illustrate with my code.

private displayQueueGrid(data) {

this.id= 'queuegrid'
this.gridOptions = {
autoCommit:true,
dataSource: data,
dataSourceType:"json",
width:"1000px",
height:"400px",
autoGenerateColumns:false,
columns:[
{ key: "t", headerText: "Title", width:"250px", dataType:"string" },
{ key: "s", headerText: "Status", width:"100px", dataType:"string" },
{ key: "y", headerText: "Type", width:"100px", dataType:"string" },
{ key: "d", headerText: "Submitted Date", width:"250px", dataType:"string" },
{ key: "e", headerText: "Expires In", width: "80px", dataType: "string" },
{ key: "id", headerText: "ItemID", dataType: "string", hidden: true },
{ key: "m", headerText: "Error", dataType: "string", hidden: true }
],

features: [{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false,
checkBoxStateChanging: function (evt, ui) {
//we use this variable as a flag whether the selection is coming from a checkbox
this.isFiredFromCheckbox = true;
alert('checkBoxStateChanged fired' + this.isFiredFromCheckbox );
},
checkBoxStateChanged: function (evt, ui) {
console.log(evt, ui);
alert('checkBoxStateChanged fired' + evt + ui);

}
},
{
name: "Selection",
mode: 'row',
multipleSelection: true,
persist: true,
activation: true,
rowSelectionChanging: function (evt, ui) {
if (this.isFiredFromCheckbox) {
alert('Event fired from checkbox');
console.log('this is the rowselect'+ evt, ui);
this.isFiredFromCheckbox = false;
}
else {
return false;
}
}
},
]
};
this.showGrid = true;
}

This is the iggrid funtion i have in place. As you see i have hidden 2 columns, namely id and m keys.

So when the grid is rendered and a use clicks on one of the checkboxes which i have enabled in the grid i need to capture the id and error message even though it is hidden.

similarly when a users clicks on the checkbox on multiple rows i want to get a list of all the id's and error.

I am using Angular 2 with typescript with ignite UI to do this.It would be helpful if you can answer the question on typescript.

Please let me know if this was clear.

Hello,

Specify primaryKey: "id" of that grid and use findRecordByKey API method to get all fields of the selected row.

In rowSelectionChanging use ui.owner.element.igGrid("findRecordByKey", ui.row.id)

I tried to a select all for the check box and all i get its a single item from the grid. Would great if you could send me a sample so that i can follow this.

result.:

ui.owner.element.igGrid("findRecordByKey", ui.row.id);
Objectd: "11/28/16 12:14 PM EST"e: "0 days"id: "7462"ig_pk: 3332532973m: "An unexpected error has occurred. Your error reference number is F39BE60E:E1-C7462."s: "Completed"t: "2 spins"y: "Report"__proto__: Object

the object returned after the check box click is o

1. Object

1. owner:t.(anonymous function).(anonymous function)
2. row:Object
3. selectedRows:Array[0]
4. __proto__:Object

Hello,

The behavior though header check box is a bit different, because there is no specific row which is selected.

And since all of the rows are selected you could bind to rowSelectionChanged and extract them from ui.selectedRows

Here's a fiddle to demonstrate this.

The example you are sending me back is returning an object that has been selected. If you look at my previous post i want to extract a value from a column that is hidden. To make it clear im attaching the example :

columns: [
{ key: "t", headerText: "Title", width: "250px", dataType: "string" },
{ key: "s", headerText: "Status", width: "100px", dataType: "string" },
{ key: "y", headerText: "Type", width: "100px", dataType: "string" },
{ key: "d", headerText: "Submitted Date", width: "250px", dataType: "string" },
{ key: "e", headerText: "Expires In", width: "80px", dataType: "string" },
{ primaryKey: "id", key: "id", headerText: "ItemID", dataType: "string", hidden: true },     <=   Hidden value need to extraced.
{ key: "m", headerText: "Error", dataType: "string", hidden: true }
],

with ui.selectedRows i do not get that value. and if i do a ui.selectedRows.id it gives me the iggrid id not the id within the grid. I have set my id as a primary key and even though it doesnt set that as a primary key.

Please let me know.

I was about to figure this out. But i have another question attached to this.

private displayQueueGrid(): void {
console.log("inside the grid");
console.log("before the grid" + this.inputData)
this.id = 'queuegrid'
this.gridOptions = {
autoCommit: false,
dataSource: this.inputData,
primaryKey: 'id',
dataSourceType: "json",
width: "1000px",
height: "400px",
autoGenerateColumns: false,
columns: [
{ key: "t", headerText: "Title", width: "250px", dataType: "string" },
{ key: "s", headerText: "Status", width: "100px", dataType: "string" },
{ key: "y", headerText: "Type", width: "100px", dataType: "string" },
{ key: "d", headerText: "Submitted Date", width: "250px", dataType: "string" },
{ key: "e", headerText: "Expires In", width: "80px", dataType: "string" },
{ key: "id", headerText: "ItemID", dataType: "number", hidden: true },
{ key: "m", headerText: "Error", dataType: "string", hidden: true }
],

features: [{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false},

{
name: "Selection",
mode: 'row',
multipleSelection: true,
persist: true,
activation: true,
rowSelectionChanged: function (e, ui) {
//let rowcount = ui.selectedRows.length;
let itemtodelete = [];
for (let i in ui.selectedRows) {
itemtodelete.push(ui.selectedRows[i].id); ///this is how i extracted the value in a array inside the loop.
}
return itemtodelete;   /////value i need out of this function so that i can use this value outside of the iggrid
}
},
]

};
this.showGrid = true;
return this.itemtodelete;
}

My question i have this function activated in a component but it looks like i cannot access this value of array outside of the iggrid. So to suffice what i am trying to do,

I have a grid with checkboxes and has a hiddenvalue as id set to primary key. When i am in that loop i am able to capture all the id's that have been checked. I want to send this value to another component. Please let me know how i can achieve this.

Shashank

Hello Shashank,

We are currently looking into your question and we will get back to you soon with more information or questions for you.

Please feel free to continue sending updates to this case at any time.

Hello Shashank,

What is this component you mentioned? Are you using Angular2?

The communication between components is a task for the components themselves. Take a look at the following thread if you are using Angular2.

http://stackoverflow.com/questions/34088209/how-to-pass-object-from-one-component-to-another-in-angular-2

If you are still facing issues with this, please attach a sample to demonstrate what you are experiencing.