Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
75
Adding image in the webdatagrid column
posted

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.

Parents
  • 20255
    Verified Answer
    Offline posted

    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.

    Useful links:
    The columns of the WebDataGrid™
    Column Templates

    Example.zip
Reply
  • 215
    Offline posted in reply to Zdravko Kolev

    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.

    Designer View

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

    Result in Chrome

    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!

Children
No Data