Solved

Displaying Arrow Images dynamically....

Posted on 2004-04-15
13
453 Views
Last Modified: 2012-06-21
Hi,
 
   I have a Asp.net Page, which contains a UserControl and that UserControl loads some employee names as link buttons from the database, and attaching one eventhandler to all the LinkButtons which will do some stuff according to the selected employee ID and displays some information on that Asp.net Page....

Now the problem is when Iam displaying all the employees names Iam also displaying a blackarrow before each employee name, now when user clicks on one particular employee name I want to display the red arrow, instead of blackarrow only for that particular employee name, rest all must display black arrow... I tried some ways, but I failed to achieve the result... AnyIdeas and if possible sample code would be greatly appreciable....
Please let me know if Iam too vague in explaining...
0
Comment
Question by:steve_mick972
  • 6
  • 5
  • 2
13 Comments
 
LVL 4

Expert Comment

by:caner_elci
ID: 10837871
You can do that in client-side.. using Javascript.. if this is what you want, let me know so I give you an example...
0
 
LVL 37

Expert Comment

by:gregoryyoung
ID: 10838561
is this causing a postback which shows the details ?

If so its very easy on either side (javascript or codebehind)
0
 
LVL 37

Expert Comment

by:gregoryyoung
ID: 10838563
is this causing a postback which shows the details ?

If so its very easy on either side (javascript or codebehind)
0
 
LVL 1

Author Comment

by:steve_mick972
ID: 10842756
Hi,
  caner_elci, Iam ready to use some javascript, but Iam writing displaying those employeenames using linkbuttons in codebehind, and I know I can append JavaScript in Codebehind, can you please provide me some javascript code which will do that for me, if possible please provide me the javascript code so that I can easily embed that into codebehind..

 gregoryyoung, Iam really not sure which one your asking whether it is causing postback r not??, but I'll explain you wht exactly going on (sorry for being so dumb)... Iam writing a database query which will get me all the employee names and looping through the Reader and creating a linkbutton and the tex of the linkbutton is the employee name and attaching all the link buttons to one eventhandler function, before attaching this link button to a table cell (to place the linkbutton at appropriate place on the page) Iam also attaching a black arrow Image to the table cell... and all this is done in PageLoad() event of the page. this is wat happening in the page, I want a mechanism to check which linkbutton is clicked and accordingly I want to place a red arrow instead of black arrow...


Thank You,
Steve
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10842858
Hi Steve,

Of course, I can write a sample code for you.. But I need to see your code.. can you please paste some code from your aspx file? Especially, the parts those you create buttons.. So I can write a few Javascript functions to enable/disable them...

Caner
0
 
LVL 1

Author Comment

by:steve_mick972
ID: 10843052

public void Page_Load()
{
  //after opening the database connection and getting the data into the Reader Object
 // this is how my code looks like....
  while(Reader.Read())
  {
   //create a link button for each employee
    LinkButton lnkEmp = new LinkButton();
   // set linkbutton properties
    lnkEmp.ID = Reader["EmpID"].ToString();
    lnkEmp.Text = Reader["EmpName"].ToString() + "<br>";
  //set linkbutton clickevent handler
    lnkEmp.Click += new EventHandler(this.ProcessClick);

   // create a row and cell to attach Image and linkbutton to the page
    HtmlTableRow tblRowEmp = new HtmlTableRow();
    HtmlTableCell tblCellEmp = new HtmlTableCell();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
   
   //create a HtmlImage and add source as BlackArrow Image and set some prop
    HtmlImage imgBarrow = new HtmlImage();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
    imgBarrow.Src = "/images/Barrow.gif";
    tblCellEmp.Align = "left";

   //attach link button and image to appropriate cells
    tblCellBarrow.Controls.Add(imgBarrow);
    tblCellEmp.Controls.Add(lnkEmp);
   //attach cells to the row...
    tblRowEmp.Cells.Add(tblCellBarrow);
    tblRowEmp.Cells.Add(tblCellEmp);
  //above row is already attached to a table....
  }
}

that is what happening in my Page_Load() event of the page, Please let me know if you dont understand anything...

Thank You,
Steve
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 4

Expert Comment

by:caner_elci
ID: 10843091
This is fine, but I need to know when and where you are going to disable buttons?
0
 
LVL 1

Author Comment

by:steve_mick972
ID: 10843171
when the user clicks on the link button, instead of BlackArrow Image I want to put  Red Arrow Image before the linkbutton (the code I wrote to put black arrow image I want to replace with it similar code to put red arrow image)..

Steve
0
 
LVL 4

Accepted Solution

by:
caner_elci earned 500 total points
ID: 10843621
Okay, here we go:

in your C# code, add an attribute to your linkButton which is actually an javaScript event handler for click event of that LinkButton.. That will include a simple javascript code that changes your image.. For example:

HtmlImage imgArrow = new HtmlImage();
imgArrow.ID = "image_to_change";
imgArrow.Src = "Barrow.jpg";
this.Controls.Add( imgArrow );

LinkButton1.Attributes.Add( "onClick", "image_to_change.src='images/RArrow.jpg';" );

Above, you should generate a unique ID for your HtmlImage control, and add that ID to generated JavaScript code in Attributes.Add() method.. such as:

imgArrow.ID = "ArrowImage" + someCounter;
LinkButton1.Attributes.Add( "onClick", imgArrow.ID + ".src='images/RArrow.jpg';" );

This code will add an event handler to your LinkButton and it will be on client-side..

But if your LinkButtons does postback, you should add another attribute for its href property.. if you know any other way to stop it causing postback, you can do that too.. In my example, you can do this:

LinkButton1.Attributes.Add( "href", "#" );

I tried this with a simple project and works fine.. if there is anything you don't understand, please let me know..

Caner ELCI
0
 
LVL 1

Author Comment

by:steve_mick972
ID: 10850256
I am sorry for the late reply, But your code is not working, can you please look into where I am doing wrong... here is what I am doing in my case with your example...

public void Page_Load()
{
  //after opening the database connection and getting the data into the Reader Object
 // this is how my code looks like....
  while(Reader.Read())
  {
   //create a link button for each employee
    LinkButton lnkEmp = new LinkButton();
   // set linkbutton properties
    lnkEmp.ID = Reader["EmpID"].ToString();
    lnkEmp.Text = Reader["EmpName"].ToString() + "<br>";
  //set linkbutton clickevent handler
    lnkEmp.Click += new EventHandler(this.ProcessClick);

   // create a row and cell to attach Image and linkbutton to the page
    HtmlTableRow tblRowEmp = new HtmlTableRow();
    HtmlTableCell tblCellEmp = new HtmlTableCell();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
   
   //create a HtmlImage and add source as BlackArrow Image and set some prop
    HtmlImage imgBarrow = new HtmlImage();
    HtmlTableCell tblCellBarrow = new HtmlTableCell();
    imgBarrow.Src = "/images/Barrow.gif";
   
// code added..
    imgBarrow.ID = "arrow" + counter // Iam incrementing the counter every call..
    lnkEmp.Attributes.Add("onClick",imgBarrow.ID+".src='/images/Rarrow.gif';");
    lnkEmp.Attributes.Add("href","#");

   //attach link button and image to appropriate cells
    tblCellBarrow.Controls.Add(imgBarrow);
    tblCellEmp.Controls.Add(lnkEmp);
   //attach cells to the row...
    tblRowEmp.Cells.Add(tblCellBarrow);
    tblRowEmp.Cells.Add(tblCellEmp);
  //above row is already attached to a table....
  }
}

in the above code "//code added part "is the one I am changing rest everything I am keeping the same... can you please help me out what's wrong with one Iam doing...
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10852623
First of all, I have a question.. what are you going to do when users clicks on your lnkEmp? I ask this, because I see that you are adding an event handler to that button, which causes postback (refreshing page and running your server-side code - this.ProcessClick)... So next time the page is loaded, your client-side changes, such as changing image source, will not be seen..
0
 
LVL 1

Author Comment

by:steve_mick972
ID: 10854059
Actually in my case I definitely need to have the post back and the link buttons has to be created dynamically in PageLoad event anyways... I have got the way around in c# without using javascript I have got the solution... but I dont know for some reason your way is not working, I tried to do it in normal way not using my code just sample example, still it was not working... I guess Im doing some thing very wrong...

But still I really appreciate ur help and ofcourse Im accepting ur answer....
I have another Question, I have posted that in ASP.NET section, If you could I would really appreciate your looking at that question.... ..

Thank You,
Steve...
0
 
LVL 4

Expert Comment

by:caner_elci
ID: 10854124
Thank you, I'll check it out..

Caner
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Recently while returning home from work my wife (another .NET developer) was murmuring something. On further poking she said that she has been assigned a task where she has to serialize and deserialize objects and she is afraid of serialization. Wha…
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
This video discusses moving either the default database or any database to a new volume.
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now