Hello,
I am facing issue in the IGGrid Add new feature. I am migrating my Infragistics controlls from 2014 to 2016 and we have highly customized grid that allows user to add row and while adding row we make only few columns editable and remaining are readonly/not editable columns.
If I run my previous code base and add a new row following steps are performed,
The first column which is ID column in the grid (which is also read only) gets populated with the next number in the row sequence.
An event is registered for each editable column in this row. While registering callback function we pass the ID so that when it’s called it will perform updated on only this row.
Few of the other columns are left editable. When user enters certain code in the editable column we fire already registered call back function (in step 2) to fetch description for that code.
This works perfectly fine in my code base which is using Infragistics 2014.
Coming to 2016 version I am facing following issue,
When I click Add row, its adding the row but no ID for the first column is added, and so I am not able to pass this ID while registering the callback function. When I dig into the DOM structure, I find that in newly added row all the column contains “ui-iggrid-editingcell” class irrespective of if the cell is editable or not editable. Below is the structure of new row in 2014 iggrid version
If you see in below screen shot the first TD has value of 3,
<tr data-skip="true" data-new-row="true" style="display: table-row;"> <td class="ui-iggrid-editingcell">3</td> <td class="ui-iggrid-editingcell"> <span class="ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container ui-iggrid-editor" style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 55px; height: 25px;"> <input maxlength="10" tabindex="1107" class="ui-igedit-field" style="width: 51px; height: 23px;"> </span> </td> <td class="ui-iggrid-editingcell"></td> <td class="ui-iggrid-editingcell"> <span class="ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container ui-iggrid-editor" style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 55px; height: 25px;"> <input maxlength="10" tabindex="1107" class="ui-igedit-field" style="width: 51px; height: 23px;"> </span> </td> <td class="ui-iggrid-editingcell"></td> <td class="ui-iggrid-editingcell"> <span class="ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container ui-iggrid-editor" style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 55px; height: 25px;"> <input maxlength="3" tabindex="1107" class="ui-igedit-field" style="width: 51px; height: 23px;"> </span> </td> <td class="ui-iggrid-editingcell"></td> <td class="ui-iggrid-editingcell">*</td> <td class="ui-iggrid-editingcell">Masked from sender</td> <td class="ui-iggrid-editingcell"> <span tabindex="1107" class="ui-igedit-field ui-state-default ui-corner-all ui-iggrid-editor" style="overflow: hidden; text-align: center; outline: 0px; display: block; margin-left: -4px; margin-top: -5px; width: 39px; height: 25px; background: rgb(255, 255, 255);"> <span class="ui-state-default ui-corner-all ui-igcheckbox-small" style="display: inline-block; margin-top: 6px;"> <span class="ui-icon ui-icon-check ui-igcheckbox-small-on ui-igcheckbox-small-off" style="display: block;"></span> </span> </span> </td> <td class="ui-iggrid-editingcell"> <span class="ui-igedit ui-state-default ui-widget ui-corner-all ui-igedit-container ui-iggrid-editor" style="display: inline-block; margin-left: -4px; margin-top: -5px; width: 76px; height: 25px;"> <input maxlength="16" tabindex="1107" class="ui-igedit-field" style="text-align: right; width: 72px; height: 23px;"> </span> </td> </tr>
Coming to 2016 version of iggrid the structure has changes and its adding this class only for the editable columns, and the structure looks like below, I am not sure how to get the value for first TD set immediately after the rowadding starts. Is the missing class making difference?
<tr data-new-row="true" data-role="newrow" style="display: table-row; height: 28px;"> <td aria-readonly="true" aria-describedby="recievergrid_1_RcId" colspan="1" rowspan="1"></td> <td aria-readonly="false" aria-describedby="recievergrid_1_ROPC" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default ui-iggrid-editor ui-state-focus" style="margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 59px; height: 28px;"> <div class="ui-igeditor-input-container ui-corner-all"> <span> <input type="text" class="ui-igedit-input" id="1473489908756EditingInput" tabindex="1108" role="textbox" aria-label="Text Editor" style="height: 100%; text-align: left;"> <input type="hidden" value=""> </span> </div> </div> </td> <td aria-readonly="true" aria-describedby="recievergrid_1_ROPD" colspan="1" rowspan="1"></td> <td aria-readonly="false" aria-describedby="recievergrid_1_PLAc" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default ui-iggrid-editor" style="margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 59px; height: 28px;"> <div class="ui-igeditor-input-container ui-corner-all"> <span> <input type="text" class="ui-igedit-input" id="1473489908783EditingInput" tabindex="1108" role="textbox" aria-label="Text Editor" style="height: 100%; text-align: left;"> <input type="hidden" value=""> </span> </div> </div> </td> <td aria-readonly="true" aria-describedby="recievergrid_1_PLDsc" colspan="1" rowspan="1"></td> <td aria-readonly="false" aria-describedby="recievergrid_1_PrCd" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default ui-iggrid-editor" style="margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 59px; height: 28px;"> <div class="ui-igeditor-input-container ui-corner-all"> <span> <input type="text" class="ui-igedit-input" id="1473489908787EditingInput" tabindex="1108" role="textbox" aria-label="Text Editor" style="height: 100%; text-align: left;"> <input type="hidden" value=""> </span> </div> </div> </td> <td aria-readonly="true" aria-describedby="recievergrid_1_PrDsc" colspan="1" rowspan="1"></td> <td aria-readonly="false" aria-describedby="recievergrid_1_ESCd" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default ui-iggrid-editor" style="margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 59px; height: 28px;"> <div class="ui-igeditor-input-container ui-corner-all"> <span> <input type="text" class="ui-igedit-input" id="1473489908793EditingInput" tabindex="1108" role="textbox" aria-label="Text Editor" style="height: 100%; text-align: left;"> <input type="hidden" value="*"> </span> </div> </div> </td> <td aria-readonly="true" aria-describedby="recievergrid_1_ESDsc" colspan="1" rowspan="1"></td> <td aria-readonly="false" aria-describedby="recievergrid_1_OFlg" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-state-default ui-iggrid-editor" style="outline: 0px; text-align: center; overflow: hidden; margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 43px; height: 28px; background: rgb(255, 255, 255);"> <div class="ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal" role="checkbox" tabindex="1108" aria-checked="false" style="margin-top: 5px;"> <span class="ui-icon ui-icon-check ui-igcheckbox-normal-on ui-igcheckbox-normal-off"></span> <input class="ui-helper-hidden" aria-hidden="true" type="checkbox" value="false"> </div> </div> </td> <td aria-readonly="false" aria-describedby="recievergrid_1_Vl" colspan="1" rowspan="1" class="ui-iggrid-editingcell"> <div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default ui-iggrid-editor" style="margin-left: -5px; margin-top: -5px; position: absolute; z-index: 1; width: 80px; height: 28px;"> <div class="ui-igeditor-input-container ui-corner-all"> <span> <input type="tel" class="ui-igedit-input" id="1473489908807EditingInput" tabindex="1108" role="textbox" aria-label="Numeric Editor" style="height: 100%; text-align: right;"> <input type="hidden" value="0"> </span> </div> </div> </td> </tr>
Thanks,
Parag Dave
Thank you for using Infragistics forums!
Rather than getting the value from the cell, you could handle the generatePrimaryKeyValue event the arguments of which contain the generated PK, as well as allow you to change it to a value of your choice. The auto-generated one is simply the number of rows in the data source + 1 and no check for uniqueness is performed so in most cases it is advised that a custom PK is provided through this event anyway. The only caveat with this solution is that the editors will not be created the very first time this event is fired, so it's best that you save the value and assign it in a handler of an event in which it is safe to access the editors (such as editRowStarted).
I hope this helps! Please, let me know if you have any other questions or concerns!
Best regards,
Stamen Stoychev