How can I programmatically select rows in an igGrid

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() method
http://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() method
http://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:

1. The base element needs to be a <table> element.  I was using a <div> which worked for rendering the table with check boxes etc. but not selection.
2. The <table> element must have an id attribute defined even if you don't use it.  I'm guessing the select logic relies on it somehow.  I didn't have one defined as I had a reference to the element through react.

In case somebody else have similar problems, I had the following errors:

<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.  

Hello Pieter,

I’m glad to hear you have resolved your problem.

If you have any other questions, please do not hesitate to ask.

Thank you,
Mihoko Kamiishi