I have and igGrid and am trying to find use right way of getting the selected row(s), its index, and values of cells in that row. My GRID has this features :
features: [{ name: "RowSelectors", enableCheckBoxes: false, enableRowNumbering: true },{ name: "Selection", mode: "row", multipleSelection: false //rowSelectionChanged:rowSelection },{ name: "Sorting", firstSortDirection: "ascending", type: "local" }]
I went to this site example : http://www.igniteui.com/grid/grid-api-events and copied this code exactly :
var rows = $("#grid").igGridSelection("selectedRows"); apiViewer.log("The number of selected rows is: " + rows.length); $.each(rows, function (i, val) { apiViewer.log("Row with index " + val.index + " is selected"); });
and it doesnt work at all. I tried many things :
//var idx = document.getElementById("rsGrid")._selectedRow.index; // _selected_row undefined //var idx = $("#rsGrid")._selectedRow.index; // _selected_row undefined
var rows = $("#grid").igGridSelection("selectedRows"); // works?? $.each(rows, function (i, val) { var aa = "Row with index " + val.index + " is selected"; // val.index is undefined var cc = "Row with index " + val.index() + " is selected"; // 'index' is not a function var ID = $("#rsGrid").getCellValue(val.index, "idField"); // fails });
Other things that do NOT work :
var rows = $("#rsGrid").igGridSelection("selectedRows"); if ( rows.length != 1 ) { } // rows.length is ALWAYS 1
$('#rsGrid').igGridSelection('clearSelection'); // does NOT clear the selection
The ONLY thing I could get to work is this :
var grid = $("#rsGrid").data("igGrid"); var idx = grid._selectedRow.index; var ID = grid.getCellValue(grid._selectedRow.index, "idField");
which is not the right way of coding it, as it uses an undocumented attribute and will NOT work for a multiple selection grid.
What am I doing wrong and why doesnt this work??
Thank you.
Hello,
The reason your first calls were returning what they were was that your selector - $("#grid") was returning an element that did not have an igGridSelection widget initialized on. Recent jQuery UI versions would also throw an exception that could point you to the exact issue - "Error: cannot call methods on igGridSelection prior to initialization; attempted to call method 'selectedRow' ". You can observe such errors in the developer tools of the browser of your choice.
As for the issue you are having with getCellText, I wasn't able to reproduce it on my side. If you are using it with column index instead of key, please have in mind that the row selectors column is counted towards it.
The rows expand because you have height set on the table element that holds the data. I would assume you are using fixed/continuous virtualization (if that's the case your filtering will not be correct because the grid will render only a portion of the rows at once). In any case, I'd suggest using the Filtering feature instead. Once added you could achieve the same by calling:
$("#grid").igGridFiltering("filter", [ { fieldName: "phase", cond: "equals", expr: aValue, logic: "AND" }], true);
or
$("#grid_table") ...
if you initialize the grid on a div
Please refer to the API documentation for more information on working with Filtering's API.
Finally, regarding the row object - it doesn't contain any methods. You should be able to expand the entry in the API documentation where it is explained that it has the format of { element: , index: }. You could then use the element returned to do pretty much anything with it using jQuery's API.
Please, let me know if you have any other questions or concerns!
Best regards,Stamen Stoychev
Thank you for your help. I'm new to javascript/Infragitsics/web coding so its been a challenge. I had noticed that the objects returned by the function were different in your example and my code, but didn't know why. In those other links I see I just have to address the grid differently using the 'widget.'
As for the FIELDSET. I put one around your sample grid (in my app) and it does work, so something else is the problem. I'll have to figure that out.
In working with the girds and the methods that now work, I still found some problems :
- using .igGrid("getCellText",...) does NOT work - it returns the value of another column. This fails in your sample as well.
- What I want to do with a button is filter the rows based on a value. The button function has this code :
var rows = $("#rsGrid").igGrid("allRows");
for ( var i=0; i<rows.length; i++ ) {
phase = $("#rsGrid").igGrid("getCellValue", i, "phase");
if ( phase == aValue )
rows[i].style.display = '';
else
rows[i].style.display = 'none';
}
And while this does hide the rows, all the rest of the rows CHANGE SIZE to fill up the grid! So when my filter hides all but one row, that row takes up the entire grid rectangle. How do I fix this??
I also tried using the below, but the same thing happens :
rows[i].hidden = true;
- Where is the documentation for what a 'row' object is and its methods? The API for 'selectedRow' just says a 'row' object with no mention of what I can do with that row object.
Thanks again for your help.
We still wrap the table element inside a div with id = "<table id>_container". It's just that when the grid is initialized on a table element, the feature widgets are also initialized on the same table element. This means you can make igGrid calls and i.e. igGridSelection calls with the same selector. When you initialize on a div, it'll work as the outermost container while the feature widgets are initialized on the table created internally. There aren't other major differences between the two and when you are aware that you need to modify your selector to use the feature widgets you shouldn't have issues using divs.
With this said I tried adding a few grids initialized on a table to a fieldset and they were staying inside. I may need to look at a sample of your project to pinpoint what could be causing this issue. However, if initializing on divs works for your project, I don't see a reason to change it to tables.
Best regards,
Stamen Stoychev
Well, I finally found it! When your sample worked within my app I thought for sure that it was because we're using an older version of infragistics code. But that wasn't it either.
Turns out the problem was that my GRID was contained in a DIV and NOT a TABLE element! I inherited this app and ALL the grids are in DIVs. Once I knew that was the issue, I found :
http://help.infragistics.com/Doc/jQuery/2013.1/CLR4.0?page=Known_Issues_and_Limitations_2013_Volume_1.html
http://es.infragistics.com/community/forums/t/83786.aspx
http://es.infragistics.com/community/blogs/craig_shoemaker/archive/2013/02/04/avoid-this-obscure-error-when-using-the-iggrid-control-by-selecting-the-right-root-element.aspx
Now I expect all the APIs to work, but there is still a 'problem' with using the TABLE element. Currently my grids are within FIELDSET elements. But the grid TABEL element does not seem to work within a FIELDSET - it is always rendered outside of the Fieldset box.
Can you help with this?
I am attaching a sample demonstrating how to use the object selectedRow returns as input for getCellValue, as well as a working clearSelection call. Could you please modify the sample to better match your scenario and possibly reproduce the issue you are having so I can take a look?
I am looking forward to hearing from you!