Make image control visible invisible runtime

Question

1.00/5 (1 vote)

See more:

Hello,

I have a image control which get source from the database
as follows

HTML

<img src='<%#getSRC1(Container.DataItem)%>' border="0" width="50px" height="50" ID="kk" />

this is html simple html image control which is in gridview

ASP.NET

<asp:GridView ID="GridViewControls" ItemStyle-VerticalAlign="Top" AutoGenerateColumns="False"

                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>

HTML

<img  src='<%#getSRC1(Container.DataItem)%>' ID="kk" /></a>

i want to hide the image when src= <%#getSRC1(Container.DataItem)%> is null or empty

how to do this plz help

What I have tried:

Hello,

I have a image control which get source from the database
as follows

HTML

<img src='<%#getSRC1(Container.DataItem)%>' border="0" width="50px" height="50" ID="kk" />

this is html simple html image control which is in gridview

ASP.NET

<asp:GridView ID="GridViewControls" ItemStyle-VerticalAlign="Top" AutoGenerateColumns="False"

                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>

HTML

<img  src='<%#getSRC1(Container.DataItem)%>' ID="kk" /></a>

i want to hide the image when src= <%#getSRC1(Container.DataItem)%> is null or empty

how to do this plz help

Posted 22-Apr-16 13:03pm

Kishor-KW

Updated 22-Apr-16 19:52pm

v2

Add a Solution

2 solutions

Solution 1

Amazingly, there are different non-equivalent ways to show and hide elements. Lean/try them all to decide which way you want.

JavaScript

element.style.visibility="hidden" /* hide */
/*...*/
element.style.visibility="collapse" /* collapse */
/*...*/
element.style.visibility="visible" /* show again */

See http://www.w3schools.com/cssref/pr_class_visibility.asp[^].

Another way is using the CSS display style 'none' or 'block':

JavaScript

element.style.display="none" /* hide */
/*...*/
element.style.display="block" /* show again */

One more way, slightly different from the first one:

JavaScript

function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }

This is jQuery way:
.hide() | jQuery API Documentation[^],
.show() | jQuery API Documentation[^].

In addition to this pure client-side stuff, you can have additional method related to postback to the server side. As server side just generates HTML content in HTTP response, you can not only hide or show the HTML element, but… simply skip it depending on some condition.

—SA

Posted 22-Apr-16 13:58pm

Sergey Alexandrovich Kryukov

Comments

Kishor-KW 22-Apr-16 20:29pm

There are many rows in the gridview. every row contain img control requried source which is from database.

and src get value when it is retrived from the database if it is null then hide the image control. in this scenario where should i have to call the javascript.

I did that on pageload function using scripregistration but not works

Sergey Alexandrovich Kryukov 22-Apr-16 20:54pm

And..? I explain you the principles, now it's your turn...
—SA

Kishor-KW 22-Apr-16 21:11pm

Ok I will Try

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Accepted Answer · 2016-04-22T19:52:00

Check this

ASPX

ASP.NET

<asp:gridview runat="server" id="GridViewControls" autogeneratecolumns="False" >
           <columns>
               <asp:templatefield>
                   <itemtemplate>
                       <img src="<%#DataBinder.Eval(Container.DataItem,"ImagePathColumn")%>" style="<%# CheckVisibility(DataBinder.Eval(Container.DataItem,"ImagePathColumn")) %>" border="0" width="50px" height="50" id="kk" />
                   </itemtemplate>
               </asp:templatefield>
           </columns>
       </asp:gridview>

Code Behind

C#

protected void Page_Load(object sender, EventArgs ee)
       {

           DataTable Dt = new DataTable();
           Dt.Columns.Add("ID");
           Dt.Columns.Add("ImagePathColumn");
           Dt.Rows.Add(1, "https://codeproject.global.ssl.fastly.net/App_Themes/CodeProject/Img/logo250x135.gif");
           Dt.Rows.Add(2, null);
           Dt.Rows.Add(3, "https://codeproject.global.ssl.fastly.net/App_Themes/CodeProject/Img/logo250x135.gif");

           GridViewControls.DataSource = Dt;
           GridViewControls.DataBind();


       }

       public string CheckVisibility(object ImagePathColumn)
       {
           string path = Convert.ToString(ImagePathColumn);
           if (string.IsNullOrWhiteSpace(path))
               return "display:none";
           else
               return "display:block";
       }

Modify it, as per your need.