locked
Display list of icons in Gridview and select one ASP.Net RRS feed

  • 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