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:
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
//Code behind
I have attached you an example. Hope I`ve been useful to you.
Useful links: The columns of the WebDataGrid™ Column Templates
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!