Hi. I want to add a DOM element (icon) in the first cell of every row of the igGrid. I have updating feature turned on and on initialization the grid is empty, so I tried to select the <td> and add an dom element on "iggridupdatingeditcellstarted" event but nothing happened, only after the row was added and then I click on the first cell then the element is added. Then when I used "iggridupdatingrowadded" or "iggridupdatingeditcellending" nothing happende. Also cant get anything which i can use to target the new row like data-id or DOM reference on the last two events.So basically I want to have a small Icon in the first cell of every row even when a new row is being created and the user is filling the data in it, and that same icon has to stay there, even after the row editing/adding is finished. Please help!
hi Georgi,
You could assign a template for each column and put the img loading code inside the template.
For example:
columns: [{ headerText: "Product ID", key: "ProductID", width: "280px", dataType: "number",template: "<img src='http://server.com/Icon-small.jpg' />${ProductID}"}]
This template will produce an icon in front of each product id.
You could also further read a topic about using templates in igGrid
http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/Creating%20a%20Basic%20Column%20Template%20in%20the%20igGrid.html
Regards
Lyubo
Ok, thanks a lot, that helped, but another problem arised. I'm toggling the class of the icon on clicking it. And strangely when editing the last column of the row which is a checkbox cell the Icon element becomes again with the default class but does not when editing any other text/dropdown cell. Also when I'm sorting/filtring the class is reset again. How can I tell the grid to remember the changes of the dom elements, or if I store the state of the Icon in a property in the local Data Source array?
That happens because the grid is rebinding/refreshing the data. There is no way how to configure the grid to restore the state of the icon.
However, you may do it on your own by:
1.Attaching onclick event to the icon and saving the state in array
2.Attaching to the grid dataRendered event and restoring the icon state from the array in #1
regards
Hi Lyubo, thank a lot again! I just tried it and it worked.
Sorry but I have another problem and dont know if i have to open a new post:When I have set a Primary Key for the grid, and when i try to edit the primaryKey cell of already added row, then the whole row breaks and the values disappear. I think it's because the data-id of the row is different but can you suggest me some kind of workaround, because if i dont specify primaryKey, the delete row function prompt me that I need it in order to update the grid?
That's a known issue and will be fixed with the next SR which has a shipping date approximately 1 February.
It will be best if you can avoid editing the primary key. For example you may set that column as a read only.
The workaround is to attach to row/cell edit end events and if the primary key was changed, then you should re-render the grid.
This way you will avoid any issues with different different data-id among the html, datasource and etc resources.