I want to show an image in a child cell based on the value of a bound field in child row. Which is the right event to do this and how can i get the wanted child cell?
It's working, but with a lot of rows it seems to slow down the grid in an extrem way.
Thanks
Hello Kociemba ,
I have been looking into your issue and I can suggest you the following custom approach for setting different images during the expanding of the row. For example you can handle the RowIslandCreated event of the WebHierarchichalDataGrid and set a different css class for the unbound field in it:
void WebHierarchicalDataGrid1_RowIslandCreated(object sender, Infragistics.Web.UI.GridControls.RowIslandEventArgs e)
{
e.RowIsland.Columns.Add(new UnboundField() { Key="Image"});
foreach (ContainerGridRecord r in e.RowIsland.Rows)
if (r.Items[1].Value.ToString() == "1")
r.Items[0].CssClass = "tick";
else
r.Items[1].CssClass = "cross";
}
.tick
background-image: url("../tick.png")! important;
.cross
background-image: url("../cross.png")! important;
Another approach that you may try is to handle the client event RowExpanding as follows:
<ig:WebHierarchicalDataGrid ID="WebHierarchicalDataGrid1" runat="server" Height="350px"
Width="400px">
<ClientEvents RowExpanded ="expanding"/>
</ig:WebHierarchicalDataGrid>
and perform the same functionality in java script:
function expanding(sender, eventArgs) {
// gets all child rows
var rowIsland = eventArgs.get_row().get_rowIslands(1)[0].get_rows();
//gets the first and the second cell of the current row
for (var i = 0; i < rowIsland.get_length(); i++) {
var row = rowIsland.get_row(i);
var cell1 = row.get_cell(0);
var cell2 = row.get_cell(1);
//make some comparasion
if (cell1.get_value() == 1)
//adds a class with custom properties for the cell
cell1.get_element().className = 'tick';
cell1.get_element().className = 'cross';
Please let me know if you have any further questions or concerns with this matter.