GRIDVIEW, replace text by image in column RSS

• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  GRIDVIEW, replace text by image in column

  Dec 07, 2012 09:41 AM|LINK

  I would like help in setting up my GRIDVIEW to display an image in of the columns instead of a text where deathmarker column contains a specific word (Y)

  below is the asp.net code

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="IDENTIFIER" DataSourceID="NCRSDB"
          GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
          PageSize="20">
  <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
          <Columns>
              <asp:BoundField DataField="IDENTIFIER" HeaderText="Patient Number" ReadOnly="True"
                  SortExpression="IDENTIFIER"/>
              <asp:BoundField DataField="FORENAME" HeaderText="First Name"
                  SortExpression="FORENAME" />
              <asp:BoundField DataField="SURNAME" HeaderText="Surname"
                  SortExpression="SURNAME" />
              <asp:BoundField DataField="DESCRIPTION" HeaderText="Faith"
                  SortExpression="DESCRIPTION" />
              <asp:BoundField DataField="RATING" HeaderText="Rating"
                  SortExpression="RATING" />
              <asp:BoundField DataField="disdate" HeaderText="Latest Discharge"
                  SortExpression="disdate" />
              <asp:BoundField DataField="deathmarker" HeaderText="deathmarker"
                  SortExpression="deathmarker" />
              <asp:BoundField DataField="datedeath" HeaderText="Date of death"
                  SortExpression="datedeath" />
          </Columns>
  
  <PagerStyle CssClass="pgr"></PagerStyle>
      </asp:GridView>

• • Reply
  

  chandrasheka...

  Star

  10258 Points

  1760 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 09:52 AM|LINK

  Hi,

  From your post you want to show an Image if the deathmarker column have  a value "Y". Use the template field column instead of bound field.

  Add image field along with the path and set its visible property based on the deathmarker column value. Some thing like below.

  <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
  <ItemTemplate>
     <asp:Image id="imgField" runat="server" ImageURL="<URL Here>" Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
     <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>' Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' />
  </ItemTemplate>
  </asp:TempalteField>

  YCS
  Please try the answer for the post and finally Don't forget to click “Mark as Answer” on the post that helped you.
  
  • Edited by chandrashekar on Dec 07, 2012 09:52 AM
  • Edited by chandrashekar on Dec 07, 2012 09:52 AM
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 10:40 AM|LINK

  where do i place the TemplateField? i tried it within the gridview and outside it but its not compiling correctly..

  <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master.Master" CodeBehind="PatientList.aspx.vb" Inherits="Chaplaincy.PatientList" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <form id="form1" runat="server">
      <asp:Label ID="Label1" runat="server" Text="Faith Group:" CssClass="newsSummary"></asp:Label>
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
          DataSourceID="FaithGroup" DataTextField="DESCRIPTION"
          DataValueField="DESCRIPTION">
  
      </asp:DropDownList>
  
      <asp:Label ID="Label2" runat="server" Text="Surname:" CssClass="newsSummary"></asp:Label>
  
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
      <asp:SqlDataSource ID="FaithGroup" runat="server"
          ConnectionString="<%$ ConnectionStrings:NCRSDBConnectionString %>" SelectCommand="select 'All' as DESCRIPTION, 0 as rn
  union all
  select DESCRIPTION, 1 as rn
  FROM AR_20120209_ChaplaincyPatientList
  group by DESCRIPTION
  order by rn, DESCRIPTION"></asp:SqlDataSource>
  
      <div style="height: 450px; overflow-y: scroll">
  
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="IDENTIFIER" DataSourceID="NCRSDB"
          GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
          PageSize="20">
  <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
          <Columns>
              <asp:BoundField DataField="IDENTIFIER" HeaderText="Patient Number" ReadOnly="True"
                  SortExpression="IDENTIFIER"/>
              <asp:BoundField DataField="FORENAME" HeaderText="First Name"
                  SortExpression="FORENAME" />
              <asp:BoundField DataField="SURNAME" HeaderText="Surname"
                  SortExpression="SURNAME" />
              <asp:BoundField DataField="DESCRIPTION" HeaderText="Faith"
                  SortExpression="DESCRIPTION" />
              <asp:BoundField DataField="RATING" HeaderText="Rating"
                  SortExpression="RATING" />
              <asp:BoundField DataField="disdate" HeaderText="Latest Discharge"
                  SortExpression="disdate" />
              <asp:BoundField DataField="deathmarker" HeaderText="deathmarker"
                  SortExpression="deathmarker" />
              <asp:BoundField DataField="datedeath" HeaderText="Date of death"
                  SortExpression="datedeath" />
  
              
  
  
  
          </Columns>
  
  <PagerStyle CssClass="pgr"></PagerStyle>
      </asp:GridView>
      
      <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
                  <ItemTemplate>
                      <asp:Image id="imgField" runat="server" ImageURL="~/Images/x.png" Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
                      <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>' Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' />
                  </ItemTemplate>
              </asp:TempalteField>
      </div>
      <asp:SqlDataSource ID="NCRSDB" runat="server"
          ConnectionString="<%$ ConnectionStrings:NCRSDBConnectionString %>"
          SelectCommand="SELECT c.IDENTIFIER, c.FORENAME, c.SURNAME, c.DESCRIPTION, c.RATING, max(disdat_dttm) disdate, m.deathmarker, m.datedeath
  FROM [AR_20120209_ChaplaincyPatientList] c
  	left outer join daily_builds.dbo.Daily_IP_All_Static d on c.identifier = d.unitno collate database_default
  	left outer join [CASTOR\MSSQLSERVER1].PASActivity.dbo.mit m on c.identifier = left(m.pasid, 7) collate database_default
  where (description = @description OR @description IS NULL or @description = 'ALL')
  group by c.IDENTIFIER, c.FORENAME, c.SURNAME, c.DESCRIPTION, c.RATING, m.deathmarker, m.datedeath">
          <SelectParameters>
              <asp:ControlParameter ControlID="DropDownList1" Name="description"
                  PropertyName="SelectedValue" />
          </SelectParameters>
      </asp:SqlDataSource>
      </form>
  </asp:Content>

  
   

• • Reply
  

  chandrasheka...

  Star

  10258 Points

  1760 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 11:11 AM|LINK

  Hi,

  Place inside the grid view columns section. Check below.

  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="IDENTIFIER" DataSourceID="NCRSDB"
          GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
          PageSize="20">
  <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
          <Columns>
              <asp:BoundField DataField="IDENTIFIER" HeaderText="Patient Number" ReadOnly="True"
                  SortExpression="IDENTIFIER"/>
              <asp:BoundField DataField="FORENAME" HeaderText="First Name"
                  SortExpression="FORENAME" />
              <asp:BoundField DataField="SURNAME" HeaderText="Surname"
                  SortExpression="SURNAME" />
              <asp:BoundField DataField="DESCRIPTION" HeaderText="Faith"
                  SortExpression="DESCRIPTION" />
              <asp:BoundField DataField="RATING" HeaderText="Rating"
                  SortExpression="RATING" />
              <asp:BoundField DataField="disdate" HeaderText="Latest Discharge"
                  SortExpression="disdate" />
              <asp:BoundField DataField="deathmarker" HeaderText="deathmarker"
                  SortExpression="deathmarker" />
              <asp:BoundField DataField="datedeath" HeaderText="Date of death"
                  SortExpression="datedeath" />
  <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker"> <ItemTemplate> <asp:Image id="imgField" runat="server" ImageURL="~/Images/x.png" Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' /> <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>' Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' /> </ItemTemplate> </asp:TempalteField>
          </Columns>
  
  <PagerStyle CssClass="pgr"></PagerStyle>
      </asp:GridView>

  
  
  

  YCS
  Please try the answer for the post and finally Don't forget to click “Mark as Answer” on the post that helped you.
  
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 12:04 PM|LINK

  after applying the new code within the gridview i get the following error message... the report perfectly prior to the new code provided

  Parser Error

  Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
  
  Parser Error Message: Type 'System.Web.UI.WebControls.TemplateField' does not have a public property named 'PagerStyle'.
  
  Source Error:
  
  

  Line 59: Line 60: </Columns> Line 61: <PagerStyle CssClass="pgr"></PagerStyle> Line 62: </asp:GridView> Line 63:

   

   

  <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master.Master" CodeBehind="PatientList.aspx.vb" Inherits="Chaplaincy.PatientList" %>
  <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  </asp:Content>
  
  <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      <form id="form1" runat="server">
      <asp:Label ID="Label1" runat="server" Text="Faith Group:" CssClass="newsSummary"></asp:Label>
      <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
          DataSourceID="FaithGroup" DataTextField="DESCRIPTION"
          DataValueField="DESCRIPTION">
  
      </asp:DropDownList>
  
      <asp:Label ID="Label2" runat="server" Text="Surname:" CssClass="newsSummary"></asp:Label>
  
      <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  
      <asp:SqlDataSource ID="FaithGroup" runat="server"
          ConnectionString="<%$ ConnectionStrings:NCRSDBConnectionString %>" SelectCommand="select 'All' as DESCRIPTION, 0 as rn
  union all
  select DESCRIPTION, 1 as rn
  FROM AR_20120209_ChaplaincyPatientList
  group by DESCRIPTION
  order by rn, DESCRIPTION"></asp:SqlDataSource>
  
      <div style="height: 450px; overflow-y: scroll">
  
      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
          DataKeyNames="IDENTIFIER" DataSourceID="NCRSDB"
          GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
          PageSize="20">
  <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
          <Columns>
              <asp:BoundField DataField="IDENTIFIER" HeaderText="Patient Number" ReadOnly="True"
                  SortExpression="IDENTIFIER"/>
              <asp:BoundField DataField="FORENAME" HeaderText="First Name"
                  SortExpression="FORENAME" />
              <asp:BoundField DataField="SURNAME" HeaderText="Surname"
                  SortExpression="SURNAME" />
              <asp:BoundField DataField="DESCRIPTION" HeaderText="Faith"
                  SortExpression="DESCRIPTION" />
              <asp:BoundField DataField="RATING" HeaderText="Rating"
                  SortExpression="RATING" />
              <asp:BoundField DataField="disdate" HeaderText="Latest Discharge"
                  SortExpression="disdate" />
              <asp:BoundField DataField="deathmarker" HeaderText="deathmarker"
                  SortExpression="deathmarker" />
              <asp:BoundField DataField="datedeath" HeaderText="Date of death"
                  SortExpression="datedeath" />
  
  <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
      <ItemTemplate>
          <asp:Image id="imgField" runat="server" ImageURL="~/Images/x.png"
           Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
          <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>'
          Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' />
      </ItemTemplate>
  </asp:TempalteField>
          
          
          </Columns>
          <PagerStyle CssClass="pgr"></PagerStyle>
      </asp:GridView>
      
  <%--    <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
                  <ItemTemplate>
                      <asp:Image id="imgField" runat="server" ImageURL="~/Images/x.png" Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
                      <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>' Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' />
                  </ItemTemplate>
              </asp:TempalteField>--%>
      </div>
      <asp:SqlDataSource ID="NCRSDB" runat="server"
          ConnectionString="<%$ ConnectionStrings:NCRSDBConnectionString %>"
          SelectCommand="SELECT c.IDENTIFIER, c.FORENAME, c.SURNAME, c.DESCRIPTION, c.RATING, max(disdat_dttm) disdate, m.deathmarker, m.datedeath
  FROM [AR_20120209_ChaplaincyPatientList] c
  	left outer join daily_builds.dbo.Daily_IP_All_Static d on c.identifier = d.unitno collate database_default
  	left outer join [CASTOR\MSSQLSERVER1].PASActivity.dbo.mit m on c.identifier = left(m.pasid, 7) collate database_default
  where (description = @description OR @description IS NULL or @description = 'ALL')
  group by c.IDENTIFIER, c.FORENAME, c.SURNAME, c.DESCRIPTION, c.RATING, m.deathmarker, m.datedeath">
          <SelectParameters>
              <asp:ControlParameter ControlID="DropDownList1" Name="description"
                  PropertyName="SelectedValue" />
          </SelectParameters>
      </asp:SqlDataSource>
      </form>
  </asp:Content>

• • Reply
  

  chandrasheka...

  Star

  10258 Points

  1760 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 12:14 PM|LINK

  Hi Sam,

  There is a spelling mistake in the closed tag of Template Field inside the grid view. i.e It spelled as </asp:TempalteField> instead of </asp:TemplateField>. Try change the spelling it works.

  Or replace the template field with the folllowing one.

  <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
                      <ItemTemplate>
                          <asp:Image ID="imgField" runat="server" ImageUrl="~/Images/x.png" Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
                          <asp:Label ID="lblField" runat="server" Text='<%# Eval("deathmarker") %>' Visible='<%# (Eval("deathmarker") == "Y") ? false : true %>' />
                      </ItemTemplate>
  </asp:TemplateField>

  YCS
  Please try the answer for the post and finally Don't forget to click “Mark as Answer” on the post that helped you.
  
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 12:58 PM|LINK

  thanks for spotting the spelling mistake... now i get the following error message

   

  Compilation Error
  Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
  
  Compiler Error Message: BC30201: Expression expected.
  
  Source Error:
  
   
  
  Line 51: <asp:TemplateField HeaderText="deathmarker" SortExpression="deathmarker">
  Line 52:     <ItemTemplate>
  Line 53:         <asp:Image id="imgField" runat="server" ImageURL="~/Images/x.png"
  Line 54:          Visible='<%# (Eval("deathmarker") == "Y") ? true : false %>' />
  Line 55:         <asp:Label id="lblField" runat="server" Text='<%# Eval("deathmarker") %>'

• • Reply
  

  chandrasheka...

  Star

  10258 Points

  1760 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 01:08 PM|LINK

  Hi,

  What does deathmarker column value returns? I have used your markup with sample data and tested its working for me.

  YCS
  Please try the answer for the post and finally Don't forget to click “Mark as Answer” on the post that helped you.
  
• • Reply
  

  sam233

  Member

  36 Points

  218 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 01:10 PM|LINK

  chandrashekar

  Hi,

  What does deathmarker column value returns? I have used your markup with sample data and tested its working for me.

  it returns either a Y, N or NULL

• • Reply
  

  chandrasheka...

  Star

  10258 Points

  1760 Posts

  Re: GRIDVIEW, replace text by image in column

  Dec 07, 2012 01:45 PM|LINK

  Hi,

  I have created a sample with the sample data and the solution is working for me.

  YCS
  Please try the answer for the post and finally Don't forget to click “Mark as Answer” on the post that helped you.