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,
In order to obtain the selected row when multiple selection is disabled you have to use the selectedRow method:
$("#grid").igGridSelection("selectedRow");
If you enable multiple selection then the correct method to use will be selectedRows.
In the former case you'll get an object which will contain the row element selected, its ID if you have a primary key defined and its index. You can then use it to call getCellValue. As it is a public method you don't need to get the grid instance to use it. Instead you could do:
$("#grid").igGrid("getCellValue", <row id / row index>, <col key>);
Please, refer to the API documentation for more information regarding these functions. It's important to note that getCellValue will always consider the first parameter to be a row ID if you define a primary key for the grid (and index otherwise).
I hope this helps! Please, let me know if you have any other questions or concerns!
Best regards,
Stamen Stoychev
Well, I tried this and it didn't work either.
var row = $("#rsGrid").igGridSelection("selectedRow"); // works??
var idx = row.index; // idx = a function
var idx = row.index(); // sets to '8' no matter which row is selected
var ID = $("#rsGrid").igGrid("getCellValue", idx, "releaseSetId"); // Gets the ID of row 8, which wasn't selected.
$("#rsGrid").igGridSelection("clearSelection"); // This still doesn't work.
Why is this not working?
Thanks for any help.
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!
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?
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.
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.
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
I am not sure what the issue with 1) is. I created a small sample and each filter call was applying only the filter expressions specified. I am attaching it for your reference. To clear a filter you should use the same function but with an empty array for the filter expressions. You can find a sample of this in the attached file as well.
The second point looks like a bug and I have asked our engineering staff to examine it further. To ensure that it will receive attention, I have logged it in our internal tracking system with a Development ID of 178259. A support case is created on your behalf with number CAS-142098-K6H8L7 , so that you can be notified when the bug is fixed.
You can find your active cases under Account - Support Activity in our website. Select your ticket and go to Development Issues tab to view the status of related bugs.
As a temporary workaround you could use the filterDialogMaxHeight option instead. Set it to about 100px lower than what you'd want your optimal dialog height to be and it should provide you with both the required size and the buttons appearing without the need to resize once.
We are aware that an option for users to specify dropdowns instead of plain editors as input for filtering would be very helpful. I would still recommend you to log it as a product idea at http://ideas.infragistics.com though as it will help pushing it higher on the priority list for future releases.
Finally, regarding the struts form, it will be helpful if you could provide me with some markup to look at. Technically a struts form will still render a <form> element but will add various additional properties to it, as well as specific styling. It's very likely that some of these properties cause the issue you are having.
I also found out why my GRID (when attached to a <table> and NOT a <div>) was rendered outside of the fieldset, but you didn't see it. It happens when the fieldset and grid are within a <s:form>. If there is no s:form, the fieldset nicely surrounds the GRID. If there is a <s:form>, it shows up outside the fieldset box.
It works fine with a regular 'form', but not a struts form (s:form)
I'd like to use the standard <table> element so I can access grid methods normally, but then I can't use the fieldset. Any hints or ideas?
OK, I looked into filtering and it looks pretty good. However there is still some things that are hindering me.
1) When I have a button call
$("#rsGrid").igGridFiltering("filter", [ { fieldName: "phase", cond: "equals", expr: "value", logic: "AND" }], true);
it works fine, but when I click another button which filters PHASE on a different value, BOTH filters are still enforced, so my grid becomes empty. I've been looking for a programmatic way to 'CLEAR' all filters before applying the new one, but haven't found anything. How can I achieve this?
2) Since its available, in addition to my buttons, I'd like to allow the 'Advanced Filter dialog for users. However when it pops up on the screen, if it is less than 430px, the SEARCH/CANCEL buttons do not show on the dialog. 430px is already too large - the user doesn't need room for 8 or so filters. Even if I set the
filterDialogMaxFilterCount to 3, the dialog still has to be huge for the buttons to show up. In all cases, as soon as I resize the dialog with the mouse, the buttons immediately snap into place, easily fitting on a nice 300px dialog box. How can I fix this?
3) As a 'would be nice to have' for filtering - the filter should be able to be configured to offer a drop down list of the values of that column, instead of 'startsWith', 'endsWith' etc that require the user to type. If the create filter list could contain JUST the values in the column, then no typing would be needed, just mouse clicks.
Thanks
Sure, all you'll have to do is hide Filtering's UI. To do this you should define the feature with filterSummaryAlwaysVisible: false. After the grid is rendered you'll also have to hide the filter row:
$("#grid").igGrid("headersTable").find(".ui-iggrid-filterrow").hide();
We are planning to add an option for this in future versions.
I hope this helps!
I have only 1 minute to reply but wanted to ask - I saw the 'Filtering' feature, but it seemed geared only towards the USER choosing what to filter. I simply want a button to filter it for them - no other clicking/typing on their part.
Can I use the FILTERING feature internally/programmatically with the user NOT seeing it and NOT having to do anything else?
Thanks and I'll look at the other answers shortly.