locked
Pick photos in DataList RRS feed

  • Question

  • User1510859543 posted

    We have a DataList control to display photos from a network folder.  The users would like to click on the photo to select it for uploading instead of checking the checkbox. I tried using a javascript function called pickimg() to change the border around the image to a wider green border.  It should also check the box named ckPickPhoto so the code-behind will recognize which photos to upload.  Below is the relevant markup and code used to fill images.  If there is a better solution then I am open to suggestions.

    <%@ Register Assembly="Microsoft.Web.GeneratedImage" Namespace="Microsoft.Web" TagPrefix="cc1" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <link href="../css/bootstrap.min.css" rel="stylesheet" />
        <style type="text/css">
          .picked {
              border-color: lawngreen;
              border-width: 5pt;
          }
          .blkborder {
              border-color: black;
              border-width: 1pt;
          }
          body {
              margin-left: 15px;
          }
        </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentMain" Runat="Server">
        <script src="../js/jquery-1.11.1.js" type="text/javascript"></script>
        <script src="../js/jquery.MultiFile.js" type="text/javascript"></script>
        <script src="../js/modernizr-custom.min.js" type="text/javascript"></script>
    
        <script type="text/javascript">
    
            //Bind keydown event to document
            $(function () {
                $("form").on("keypress", "input[type=text], select, textarea", function (e) {
                    if (e.which === 13) {
                        e.preventDefault();
                        var $fields = $(this).closest("form").find(":input[type=text]");
                        var index = $fields.index(this);
                        $fields.eq(index + 1).trigger("focus");
                    }
                });
            });
     
            function checkemail() {
                $('.dummy:checkbox').prop('checked', true);
            }
            function pickimg(obj) {
                document.getElementById(obj.id).className = 'picked';
            }
        </script>
    
        <asp:Panel ID="PanelImages" runat="server" ScrollBars="Vertical" 
            BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static">
    
            <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3" 
                BorderColor="Black" ItemStyle-BorderWidth="1pt" ItemStyle-BorderColor="Black" 
                ItemStyle-BorderStyle="Solid" RepeatDirection="Horizontal" 
                RepeatLayout="Flow" RepeatColumns="6" 
                Caption="Images in selected folder">
                <ItemTemplate>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <cc1:GeneratedImage ID="ResizedImageGenerator" runat="server"
                                ImageHandlerUrl="~/ImageHandlers/ResizeImageHandler.ashx" 
                                AlternateText='<%# System.IO.Path.GetFileName(Container.DataItem) %>' 
                                ToolTip='<%# System.IO.Path.GetFileName(Container.DataItem) %>' 
                                CssClass="blkborder" onclick="pickimg(this);">
                                <Parameters>
                                    <cc1:ImageParameter Name="ImageUrl" Value='<%# Container.DataItem %>' />
                                    <cc1:ImageParameter Name="Width" Value="180" />
                                </Parameters>
                            </cc1:GeneratedImage>
                            <asp:Label ID="LblImageUrl" runat="server" Text='<%# Container.DataItem %>' CssClass="Hide"></asp:Label>
                            <asp:Label ID="LblFileName" runat="server" Text='<%# System.IO.Path.GetFileName(Container.DataItem) %>' CssClass="Hide"></asp:Label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy" />
                            <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemStyle BackColor="Transparent" />
                <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
            </asp:DataList>
        </asp:Panel>  
    </asp:Content>
    
    CODE BEHIND to fill DataList
    
        Private Sub PopulateThumbs()
            If PanelImages.CssClass = "Hide" Then
                Exit Sub
            End If
            If LstDirectories.Items.Count = 0 Then
                Exit Sub
            End If
            If LstDirectories.SelectedIndex = -1 Then
                Exit Sub
            End If
            Dim strPhysicalPath As String = LstDirectories.SelectedValue
    
            Dim pics As ArrayList = New ArrayList()
            Dim intDocsCount As Int16 = 0
            Dim s As String = Server.MapPath("~/images")
            s &= "\noimage.jpg"
            Dim intImageCount As Integer = 1
            Dim bolJobIDAdded As Boolean = False
    
            For Each s In Directory.GetFiles(strPhysicalPath, "*.jpg")
                'Get information about the image
                pics.Add(s)
                intImageCount += 1
            Next
    
            For Each s In Directory.GetFiles(strPhysicalPath, "*.jpeg")
                'Get information about the image
                pics.Add(s)
                intImageCount += 1
            Next
    
            PicturesInFolder.DataSource = pics
            PicturesInFolder.DataBind()
    
        End Sub
    
    
    

    Tuesday, November 20, 2018 6:48 PM

All replies

  • User-893317190 posted

    Hi dlchase,

    It seems you want to make all the selected image's checkbox checked and get checked box in code behind.

    If so , you could refer to the code below.

       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <style type="text/css">
          .picked {
              border:1px solid lawngreen
           
          }
          .blkborder {
              border-color: black;
              border-width: 1pt;
          }
          body {
              margin-left: 15px;
          }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
       
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Panel ID="PanelImages" runat="server" ScrollBars="Vertical" 
            BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static">
    
            <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3" 
                BorderColor="Black" ItemStyle-BorderWidth="1pt" ItemStyle-BorderColor="Black" 
                ItemStyle-BorderStyle="Solid" RepeatDirection="Horizontal" 
                RepeatLayout="Flow" RepeatColumns="4" 
                Caption="Images in selected folder">
                <ItemTemplate>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "/images/WingtipToys/" + Eval("ImagePath") %>'   />
                            <asp:Label ID="LblImageUrl" runat="server" Text='<%# Container.DataItem("ProductName") %>' CssClass="Hide"></asp:Label>
                            <asp:Label ID="LblFileName" runat="server" Text='<%# Container.DataItem("ProductName") %>' CssClass="Hide"></asp:Label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy" />
                            <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemStyle BackColor="Transparent" />
                <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
            </asp:DataList>
        </asp:Panel>
    
            <asp:Button ID="Button1" runat="server" Text="upload"  OnClick="Button1_Click"/>
    
             <script type="text/javascript">
    
            //Bind keydown event to document
            $(function () {
                $("img").click(function () {
                    $(this).addClass("picked")
                   $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
    //my layout may differ from yours , so please change this code to choose the check box in your html }) }); </script> </form>

    Code behind.

     Private constr As String = ConfigurationManager.ConnectionStrings("wingTipToys").ConnectionString
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                Using adapter As SqlDataAdapter = New SqlDataAdapter("select * from products", constr)
    
                    Dim table As DataTable = New DataTable()
                    adapter.Fill(table)
                    PicturesInFolder.DataSource = table
                    PicturesInFolder.DataBind()
                End Using
            End If
        End Sub
    
        Protected Sub Button1_Click(sender As Object, e As EventArgs)
    
    
            For Each item As DataListItem In PicturesInFolder.Items
                If item.ItemType = ListItemType.AlternatingItem Or item.ItemType = ListItemType.Item Then 'loop through all the items and get the check
                    Dim flag As CheckBox = CType(item.FindControl("ckPickPhoto"), CheckBox)             'box in it,make item whose checkbox is not checked
    'in visible If Not flag.Checked Then item.Visible = False End If End If Next End Sub

    The result.

    Best regards,

    Ackerly Xu

    Wednesday, November 21, 2018 5:24 AM
  • User1510859543 posted

    I think this will work.  I will give it a try.  What would I have to add to the jquery code to "toggle" the checkbox?  It would be nice to allow user to uncheck if they click on the wrong photo.  Thanks.

    Wednesday, November 21, 2018 2:08 PM
  • User1510859543 posted

    The checkbox works but do not get a green border.

    Wednesday, November 21, 2018 6:09 PM
  • User-893317190 posted

    Hi dlchase,

    You could use the jquery method toggleClass, when the element has the class , it will remove the class, or it will add the class.

    Below is my code . About  the img's border , please add the css style  border-style:solid

     <style type="text/css">
          .picked {
            
              border-color: lawngreen;
              border-width: 5pt;
              border-style:solid;
           
          }
          .blkborder {
              border-color: black;
              border-width: 1pt;
          }
          body {
              margin-left: 15px;
          }
        </style>
        <script src="../Scripts/jquery-3.3.1.js"></script>
       
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:Panel ID="PanelImages" runat="server" ScrollBars="Vertical" 
            BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static">
    
            <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3" 
                BorderColor="Black" ItemStyle-BorderWidth="1pt" ItemStyle-BorderColor="Black" 
                ItemStyle-BorderStyle="Solid" RepeatDirection="Horizontal" 
                RepeatLayout="Flow" RepeatColumns="4" 
                Caption="Images in selected folder">
                <ItemTemplate>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:Image ID="Image1" runat="server" ImageUrl='<%# "/images/WingtipToys/" + Eval("ImagePath") %>'   />
                            <asp:Label ID="LblImageUrl" runat="server" Text='<%# Container.DataItem("ProductName") %>' CssClass="Hide"></asp:Label>
                            <asp:Label ID="LblFileName" runat="server" Text='<%# Container.DataItem("ProductName") %>' CssClass="Hide"></asp:Label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy" />
                            <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                        </div>
                    </div>
                </ItemTemplate>
                <AlternatingItemStyle BackColor="Transparent" />
                <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
            </asp:DataList>
        </asp:Panel>
    
            <asp:Button ID="Button1" runat="server" Text="upload"  OnClick="Button1_Click"/>
    
             <script type="text/javascript">
    
            $(function () {
                $("img").click(function () {
                    $(this).toggleClass("picked")
                    if ($(this).hasClass("picked")) {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
                    } else {
                         $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", false);
                    }
                  
                   
                })
                
             
            });
     
         
        </script>
    

    The result.

    Best regards,

    Ackerly Xu

    Thursday, November 22, 2018 1:28 AM
  • User1510859543 posted

    Tried that but still no luck.  I think that bootstrap class is overriding.  Is there a way to have the background of the container where the checkbox resides turn green?

    Monday, November 26, 2018 3:14 PM
  • User1510859543 posted

    I was able to change the background of the sibling with the jquery below.  Now I would like to do this to toggle all images from a checkbox so that when checked it would turn all siblings to green background and unchecked remove the green.

            $(function () {
                $("img").click(function () {
                    $(this).toggleClass("picked")
                    if ($(this).hasClass("picked")) {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
                        $(this).parent().parent().siblings().css("background-color", "lawngreen");
                    } else {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", false);
                        $(this).parent().parent().siblings().css("background-color", "");
                    }
                })
            });
    

    Monday, November 26, 2018 6:18 PM
  • User-893317190 posted

    Hi dlchase,

    You could add a checkbox and bind event on it.

    Below is my code.

     check all or remove all:<input id="Checkbox1" type="checkbox" />
             <script type="text/javascript">
    
            //Bind keydown event to document
            $(function () {
                $("img").click(function () {
                    $(this).toggleClass("picked")
                    if ($(this).hasClass("picked")) {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
                    } else {
                         $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", false);
                    }
                  
                   
                })
    
                $("#Checkbox1").change(function () {
                    if ($(this).prop("checked")) {
                        $(".dummy :checkbox").prop("checked", true);
                        $("img").addClass("picked");
                    } else {
                        $(".dummy :checkbox").prop("checked", false);
                        $("img").removeClass("picked");
                        
                    }
                })
                
             
            });
     
         
        </script>
    

    Best regards,

    Ackerly Xu

    Tuesday, November 27, 2018 6:39 AM
  • User1510859543 posted

    Thank you so much!  However, since I could not get the border to work I am using the following code that changes the background color of the div where the checkboxes reside.  How can I adjust this to handle this on all selected divs as I don't think the new code will work on my page.

            $(function () {
                $("img").click(function () {
                    $(this).toggleClass("picked")
                    if ($(this).hasClass("picked")) {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
                        $(this).parent().parent().siblings().css("background-color", "lawngreen");
                    } else {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", false);
                        $(this).parent().parent().siblings().css("background-color", "");
                    }
                })
                $("#ckSelectAll").change(function () {
                    if ($(this).prop("checked")) {
                        $(".dummy :checkbox").prop("checked", true);
                        $("img").css("background-color", "lawngreen");
                    } else {
                        $(".dummy :checkbox").prop("checked", false);
                        $("img").removeClass("picked");
                        
                    }
                })
    
            });
    
    Below is the page markup of affected area.
    
        <asp:Panel ID="PanelImages" runat="server" ScrollBars="Vertical" 
            BackColor="#CCCCCC" CssClass="Hide" ClientIDMode="Static">
    
            <asp:DataList ID="PicturesInFolder" runat="server" CellPadding="3" 
                RepeatDirection="Horizontal" 
                RepeatLayout="Flow" RepeatColumns="6" 
                Caption="Images in selected folder">
                <ItemTemplate>
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <cc1:GeneratedImage ID="ResizedImageGenerator" runat="server"
                                ImageHandlerUrl="~/ImageHandlers/ResizeImageHandler.ashx" 
                                AlternateText='<%# System.IO.Path.GetFileName(Container.DataItem) %>' 
                                ToolTip='<%# System.IO.Path.GetFileName(Container.DataItem) %>'>
                                <Parameters>
                                    <cc1:ImageParameter Name="ImageUrl" Value='<%# Container.DataItem %>' />
                                    <cc1:ImageParameter Name="Width" Value="180" />
                                </Parameters>
                            </cc1:GeneratedImage>
                            <asp:Label ID="LblImageUrl" runat="server" Text='<%# Container.DataItem %>' CssClass="Hide"></asp:Label>
                            <asp:Label ID="LblFileName" runat="server" Text='<%# System.IO.Path.GetFileName(Container.DataItem) %>' CssClass="Hide"></asp:Label>
                        </div>
                    </div>
                    <div class="row mleft0" style="width: 100%">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <asp:CheckBox ID="ckPickPhoto" runat="server" Text="Upload" CssClass="dummy hide" />
                            <asp:CheckBox ID="ckJobID" runat="server" Text="Job ID" />
                        </div>
                    </div>
                </ItemTemplate>
                <ItemStyle BorderColor="Black" BorderStyle="Solid" BorderWidth="1pt" />
            </asp:DataList>
        </asp:Panel>    

    Tuesday, November 27, 2018 12:31 PM
  • User-893317190 posted

    Hi dlchase,

    If you only want to handle this on selected divs, you could refer to the code below.

     check all or remove all:<input id="Checkbox1" type="checkbox" checked="checked" />
             <script type="text/javascript">
    
            //Bind keydown event to document
            $(function () {
                $("img").click(function () {
                    $(this).toggleClass("picked")
                    if ($(this).hasClass("picked")) {
                        $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", true);
                    } else {
                         $(this).parent().parent().siblings().find(".dummy :checkbox").prop("checked", false);
                    }
                  
                   
                })
                var selectedDiv;  //define a variable to record last selected Div
                var checkedBoxes;//define a variable to record last selected checkbox
                $("#Checkbox1").change(function () {
                   
                    if (selectedDiv == undefined ) {
                        selectedDiv =  $("#PicturesInFolder :checkbox:checked ").parent().parent().parent().parent().find("img") //record selected img
                            .toggleClass("picked");  //please use your css("background-color","lawngreen")
                        checkedBoxes = $("#PicturesInFolder :checkbox:checked ");//record selected checkbox
                        checkedBoxes.prop("checked", false);
                   
                    } else {
                        if ($("#PicturesInFolder :checkbox:checked ").length == 0) {
                             selectedDiv.toggleClass("picked");//please use your css("background-color","")
                        checkedBoxes.prop("checked", true)
                      
                        }
                         checkedBoxes = undefined 
                        selectedDiv = undefined
                     
                    }
                  
                })
                
                 
            });
     
         
        </script>
    
        </form>

    The result.

    Best regards,

    Ackerly Xu

    Wednesday, November 28, 2018 4:27 AM