I want to populate a table with some rows preselected using the igGrid Ignite UI control. Users can then unselect rows they do not want.
The only example I can find that programmatically selects rows relate to the igHierarchicalGrid control which doesn't work for igGrid. I have looked at the igGrid documentation but could only find how to return selected rows but not how to select them.
Is there a way to select the rows in an igGrid programmatically?
Hello,
You should be able to programmatically select igGrid rows by calling ui.igGridSelection’s selectRow() method as illustrated in the below document. Please scroll down to the topic for ‘Select/Unselect a Cell/Row’ on the page.
Selection Overview (igGrid)http://www.igniteui.com/help/iggrid-selection-overview
Here is the API document for selectRow() method.
ui.igGridSelection: selectRow() methodhttp://igniteui.com/help/api/2016.2/ui.iggridselection#methods:selectRow
You can also use selectRowById() if you wish to select a row by row id.
ui.igGridSelection: selectRowById() methodhttp://igniteui.com/help/api/2016.2/ui.iggridselection#methods:selectRowById
I have attached the sample of igGrid that uses selectRow() to make some rows selected at initial load.
Let me know if I may be of further assistance.
Thank you,Mihoko Kamiishi
Hi Mihoko
Thank you very much for the example. I managed to track down why my code didn't work. The selection only works under the following conditions:
<div> Element with or without an id:
Uncaught Error: cannot call methods on igGridSelection prior to initialization; attempted to call method 'selectRow' at Function.error (http://code.jquery.com/jquery-1.11.3.min.js:2:1809) at HTMLDivElement.<anonymous> (http://code.jquery.com/ui/1.11.1/jquery-ui.min.js:6:9130) at Function.each (http://code.jquery.com/jquery-1.11.3.min.js:2:2975) at m.fn.init.each (http://code.jquery.com/jquery-1.11.3.min.js:2:835) at m.fn.init.e.fn.(anonymous function) [as igGridSelection] (http://code.jquery.com/ui/1.11.1/jquery-ui.min.js:6:8872) at PropertiesSelected.componentDidMount (http://localhost:49754/app.js:62136:38) at http://localhost:49754/app.js:15247:26 at measureLifeCyclePerf (http://localhost:49754/app.js:15057:13) at http://localhost:49754/app.js:15246:12 at CallbackQueue.notifyAll (http://localhost:49754/app.js:7690:23)
<table> element but no "id" attribute:Uncaught Error: Syntax error, unrecognized expression: # thead th at Function.ga.error (http://code.jquery.com/jquery-1.11.3.min.js:2:12731) at ga.tokenize (http://code.jquery.com/jquery-1.11.3.min.js:2:18658) at ga.select (http://code.jquery.com/jquery-1.11.3.min.js:2:21386) at Function.ga [as find] (http://code.jquery.com/jquery-1.11.3.min.js:2:7364) at m.fn.init.find (http://code.jquery.com/jquery-1.11.3.min.js:2:23660) at m.fn.init (http://code.jquery.com/jquery-1.11.3.min.js:2:24231) at m (http://code.jquery.com/jquery-1.11.3.min.js:2:393) at e.(anonymous function).(anonymous function)._create (http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.lob.js:438:6450) at e.(anonymous function).(anonymous function)._create (http://code.jquery.com/ui/1.11.1/jquery-ui.min.js:6:7983) at e.(anonymous function).(anonymous function)._createWidget (http://code.jquery.com/ui/1.11.1/jquery-ui.min.js:6:10053)
Kind Regards,
Pieter
Hello Pieter,
Unfortunately, it is a known issue that igGrid API calls do not work if a grid is created against <div> tag.Also, id attribute is mandatory for a igGrid placeholder.
These limitations are officially documented in the following page.
Known Issues and Limitations in 2016 Volume 2 (igGrid)http://www.igniteui.com/help/known-issues-and-limitations-2016-volume-2#grid
Issue: Incorrect grid features API calls’ behavior with <div> elements Description: If a grid is instantiated on a <div> element, the API calls to the grid's features do not work.
Issue: The id attribute is mandatory for the DOM control placeholder Description: The id attribute should be set on the DOM element on which the grid is initialized. Grid use jQuery ID selector internally for faster selection.
Please use <table> with id attribute as a igGrid placeholder in order to utilize igGrid features.
Thank you,Mihoko
Thanks Mihoko.
I have updated all my grids to use <table> tags and ids. The selection is now fixed and rendering also seem to have improved (delete buttons on hover look better etc.) I'm guessing some of the CSS are based off the <table> tag.
I’m glad to hear you have resolved your problem.
If you have any other questions, please do not hesitate to ask.