Adding image in the webdatagrid column

Hi All,

I am new to Infragistics. I am using webdatagrid in order to display the data on the aspx form. The fields in the webdatagrid are automatically created from the dataset(stored procedure is the source) assigned to the grid.

Now, I want to insert a new field which will be the last column in the grid and this new field will contain a static image in each row.

Please tell me how to accomplish this.

Hello,

I`m glad that you use our product. I can suggest you two ways to add a static image in each row:

1st way – Use the Designer to configure grid columns (Edit Columns from smart tag). Add as many field(BoundField) as you source provide + 1 for the static image, but the special of this +1 column is that, she will be of type TemplateField. From EditTemplates (Select Grids smart tag) you can see that it was created new Template, and from there you will add an image tag with some source. Look at the markup:

<ig:TemplateDataField Key=”Image” VisibleIndex=”3″>
        <ItemTemplate>
                 <img src=”Images/1.jpg” />
        </ItemTemplate>
        <Header Text=”Image”>
        </Header>
</ig:TemplateDataField>

2nd way – Add UnboundField and from the properties change HtmlEncode value to “false”. In code behind we will add the static image dynamically, by handling the WebDataGrid_InitializeRow event and set the cell of the column to a value which is an image tag. See the markup and the method:

//Markup

<ig:UnboundField HtmlEncode=”False” Key=”UnboundField” VisibleIndex=”4″>
         <Header Text=”UnboundField”>
         </Header>
</ig:UnboundField>

 

//Code behind

protected void WebDataGrid_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
{
        GridRecordItem gric = e.Row.Items[0];
        (gric.Record).Items[4].Value = “<img src=\”Images/2.jpg\” />”;
}

 

I have attached you an example. Hope I`ve been useful to you.

Example

Thanks Zdravko, this was helpful.

Hi,
I'm glad that I have been helpful to you.
Thank you for posting in our forum and feel free to contact me at any time.

Hey there.

I've managed to load images in my WebDataGrid (Infragstics4.Web.v15.2) with your method and bit from a IG example site.

The designer tells me, i added the <img /> the right way to the TemplateDataField.

But when i debug the project (in IE or in Chrome) i get nothing… 

Here is my Code:

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="100%" Width="100%">
<Columns>
<ig:TemplateDataField Key="Image" VisibleIndex="0">
<Header Text="Bild"></Header>
<ItemTemplate>

<%– static image for testing –%>
<img style="height: 70px;width: 50px" src="C:\Users\f.schaetzler\Pictures\Folders-OS-Pictures-Library-Metro-icon.png"/>

<%– getMAImage returns the imagepath–%>
<img style="height:70px;width: 50px" src="<%# getMAImage(DataBinder.Eval(Container, "DataItem.adusername"))%>"/>
</ItemTemplate>
</ig:TemplateDataField>
</Columns>
<ClientEvents Initialize="intializeGrid" />
<Behaviors>
<ig:Activation Enabled="true" />
<ig:Sorting Enabled="true" SortingMode="Single">
</ig:Sorting>
<ig:Selection Enabled="true" RowSelectType="Single" CellClickAction="Row" ColumnSelectType="Single" />
</Behaviors>
</ig:WebDataGrid>
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>

The rest of the colums are auto generated from the databinding loaded from the code behind. 

Thank you for any help!

 Hi Zdravko 

I need to do the same but with the WebHierarchicalDataGrid control

 In the WebHierarchicalDataGrid1_InitializeRowmethid how can I know if the row belongs to the parent band or the daughter band?

Best regards

Alejandro Castrejon

Hello Alejandro,

Apologies for the late reply. You can access the InitializeRow event arguments and get the RowRecord. It will give you a reference to the row object associated with the event, from where you can access the Grid itself and see whether its a Parent or a Child grid

https://es.infragistics.com/help/aspnet/infragistics.web~infragistics.web.ui.gridcontrols.roweventargs_properties