Asked by:
Display list of icons in Gridview and select one ASP.Net

Question
-
User940894612 posted
I have a page which returns a list whereby a user can select a list of his plants with an icon he's previously assigned to it. We have 4 icons and a user should be able to update the plant to assign a different icon to the plant. I'm having issues displaying the original data and do not know how to display it correctly. we have 4 icons, star - triangle - circle - heart
If the icon assigned is the star it display the image src 'star.gif', if not 'star-fallback.gif' If the icon assigned is the triangle it displays the image src 'triangle.gif', if not 'triangle-fallback.gif' etc
So in the return data
Column 1: Plant Name Column 2: 4 icons - 3 of which are the fallback and the one selected one. I need to be able to update these icons in the gridview, but for now just need the display to work.
Here's my code to bind the data
protected void BindData(int profileId) { string conn = ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString; DataTable table = new DataTable(); using (SqlConnection sqlConn = new SqlConnection(conn)) { if (sqlConn != null) { try { if (sqlConn.State == ConnectionState.Closed) sqlConn.Open(); using (SqlCommand cmd = new SqlCommand()) { cmd.Connection = sqlConn; cmd.CommandType = CommandType.StoredProcedure; cmd.CommandText = "TD_GetUserPlantIcons"; cmd.Parameters.AddWithValue("@profileId", profileId); SqlDataReader reader = cmd.ExecuteReader(); DataTable dt = new DataTable(); dt.Columns.Add("PlantName"); dt.Columns.Add("Icon"); while (reader.Read()) { DataRow row = dt.NewRow(); row["PlantName"] = reader["PlantName"]; row["Icon"] = reader["Icon"]; dt.Rows.Add(row); } GridView1.DataSource = dt; GridView1.DataBind(); reader.Close(); } } catch (Exception ex) { } } } }
The Stored Procedure is a basic select statement
SELECT Icon, PlantName FROM UserPlantIcons WHERE ProfileId=@ProfileId --AND UserId = @UserId -- not needed --AND TreeId=@TreeId --AND PlantName=@PlantName -- not needed AND IsSelected=1
Any help would be greatly appreciated.
Thanks Rob
Tuesday, March 23, 2021 10:46 AM
All replies
-
User475983607 posted
Please use the debugger to check your logic. You have an empty catch block which hides exceptions. Never design try...catch with an empty catch.
Tuesday, March 23, 2021 11:08 AM -
User940894612 posted
Hi,
It's not that, it does return data however I don't know how to format the icons part.
Thanks
Rob
Tuesday, March 23, 2021 11:10 AM -
User475983607 posted
Robbied81
It's not that, it does return data however I don't know how to format the icons part.You did not share the markup or the image path. Are you receiving a broken image icon?
But, you empty catch is a problem. Do not use atry...catch if the catch is empty. You're better off with no try...catch.
Tuesday, March 23, 2021 11:16 AM -
User940894612 posted
Hi
No, not a broken image. The markup is just a basic gridview. I can't think of a way to display all the icons and make the one assigned selected.
If it's returning the one icon image and plant name that's fine, but I need cell 1 to return all 4, 3 with the fallback image and one icon image.
Thanks
Rob
Tuesday, March 23, 2021 11:21 AM -
User475983607 posted
Robbied81
No, not a broken image. The markup is just a basic gridview. I can't think of a way to display all the icons and make the one assigned selected.
If it's returning the one icon image and plant name that's fine, but I need cell 1 to return all 4, 3 with the fallback image and one icon image
I have no idea what a "basic GridView" means to you. You have to actually write GridView markup to set the icon path on a Image server control. I recommend going through any GridView getting started tutorial to learn the basics.
https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview?view=netframework-4.8
Tuesday, March 23, 2021 11:27 AM -
User-1716253493 posted
Use Image, ImageButton or Hyperlink control in itemtemplate
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("icon","~/iconfolder/{0}") %>' />
Tuesday, March 23, 2021 11:35 AM -
User940894612 posted
That only returns the selected icon, I need to return the 3 fallback icons also in case user wants to select it.
Thanks
Rob
Tuesday, March 23, 2021 11:53 AM -
User475983607 posted
Robbied81
That only returns the selected icon, I need to return the 3 fallback icons also in case user wants to select it.
Please stop making us guess. You asked how to display data in a GridView and that's how we answered the question.
How does a user select a fallback icon??? Is this part of your database design? How does an icon fallback? What does that mean? Anyway, every beginning level GridView tutorial illustrates how to do CRUD operation. Including the link I provided above. I assume the user clicks an Edit button which puts the GridView in edit mode. The user selects an image name from a dropdown list. The user clicks save and the image shows in the GridView. Do these steps meet your expectations?
If not, perhaps the GridView is not the right tool for this requirement?
Tuesday, March 23, 2021 12:03 PM -
User940894612 posted
Apologies, it would've helped if I put the screenshot of what I'm trying to achieve mockup attached here: https://ibb.co/b5VY8YY
You will see from the top plant 'Acer Campestre' that the heart icon is selected and the other 2 are greyed icons. The parts I'm having problems with are:
- the inital display
- if a user selects the star, the image changes to a yellow star and the heart goes to a greyed out fallback
Thanks
Rob
Tuesday, March 23, 2021 12:42 PM -
User475983607 posted
There is a thin line between asking for support and asking for someone to write your code. IMHO, you are asking the community to write your code. Not only are you asking the community to write your code you are specifying that a GridView must be used. A GridView is not the tool I would use, if I understand the requirements. I would write a JavaScript application and AJAX to toggle the selected images. Keep in mind, this is not an invitation for writing your code.
If you still want to use a GridView, then learn the GridView. I provided the steps above.
Tuesday, March 23, 2021 12:58 PM -
User940894612 posted
Hi
A gridview is not a pre-requisite just what I thought should be used. I'm open to suggestions but just need a nudge in the right direction.
Thanks
Rob
Tuesday, March 23, 2021 2:14 PM -
User-1716253493 posted
Simple solution save the icons in several columns, i.e icon1, icon2, icon3 columns
Then use three Image or ImageButton in the itemtemplate
Tuesday, March 23, 2021 2:59 PM