Get an element in a Panel in a ListView when I click on another element in that Panel

3 posts, 1 answers
  1. Tonyz289
    Tonyz289  avatar
    50 posts
    Member since:
    Jun 2011

    Posted 30 Jan 2012 Link to this post

    I have a compound element in a Listview(see code) I am trying to change the background of the Panel when I click on the CheckBox. I can't figure out the  JavaScript to do it.

    <
    telerik:RadListView ID="RadListView1" runat="server" AllowPaging="True" ItemPlaceholderID="PlaceHolder1"
        Skin="listview_2" EnableEmbeddedSkins="false" OnItemCreated="RadListView1_ItemCreated"
        DataKeyNames="id,filenameextension,typeAbbr,title" OnNeedDataSource="RadListView1_NeedDataSource">
        <LayoutTemplate>
            <div class="RadListView RadListViewFloated RadListView_Windows7">
                <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="25" PagedControlID="RadListView1"
                    BorderWidth="0" OnFieldCreated="RadDataPager1_FieldCreated" CssClass="dataPagerClass">
                    <Fields>
                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                        <telerik:RadDataPagerButtonField FieldType="Numeric" PageButtonCount="5" />
                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                        <telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go"
                            TextBoxWidth="15" />
                        <telerik:RadDataPagerTemplatePageField>
                            <PagerTemplate>
                                <b>Total Number of Assets Found:
                                    <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
                                </b>
                            </PagerTemplate>
                        </telerik:RadDataPagerTemplatePageField>
                    </Fields>
                </telerik:RadDataPager>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div style="float: left; width: 162px; height: 200px; background-color: White;">
                <asp:Panel ID="myThumb" runat="server" CssClass="myClass" Style="border: 0; white-space: normal;
                    padding: 5px 2px 25px 2px; text-align: center; width: 156px;  background-color: White;">
                    <asp:HyperLink ID="HyperLink1" runat="server">
                        <telerik:RadBinaryImage ID="RadBinaryImage1" runat="server" AutoAdjustImageControlSize="False"
                            CssClass="myClass" ImageUrl='<%# Eval("thumbUrl") %>' AlternateText="Click to view preview"
                            ToolTip="Click to view preview" Width="150px" Height="150px" />
                    </asp:HyperLink><br />
                    <asp:CheckBox ID="ChkImage" runat="server" Style="float: left; padding-top: 5px" /><small><asp:HyperLink ID="lnkAsset1"
                            runat="server" Visible="false" Style="float: left; padding-top: 5px">
                        </asp:HyperLink><asp:HyperLink ID="lnkAsset2" runat="server" Style="float: left;">
                        </asp:HyperLink><asp:HyperLink ID="lnkAsset3" runat="server" Style="float: left;
                            padding-left: 20px"></asp:HyperLink></small><br />
                    <asp:HiddenField ID="hiddenAssetId" Value='<%# Eval("id") %>' runat="server" />
                </asp:Panel>
            </div>
        </ItemTemplate>
        <EmptyDataTemplate>
            No Assets Found
        </EmptyDataTemplate>
     </telerik:RadListView>
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Jan 2012 Link to this post

    Hello,

    Try the following.
    C#:
    protected void TelerikListView1_ItemDataBound(object sender, RadListViewItemEventArgs e)
       {
           RadListViewDataItem item = (RadListViewDataItem)e.Item;
           Panel pnl = (Panel)item.FindControl("myThumb");
           CheckBox chk = (CheckBox)pnl.FindControl("ChkImage");
           chk.Attributes.Add("onclick", "test('"+pnl.ClientID+"','"+chk.ClientID+"');");// attaching client side click event.
       }

    JS:
    <script type="text/javascript">
     function test(id1,id2)
         {
           var panel1 = document.getElementById(id1);
           var chk1 = document.getElementById(id2);
           if (chk1.status == true)
            {
              panel1.style.backgroundColor = "Red";
            }
           else
               {
              panel1.style.backgroundColor = "White";
            }
        }
    </script>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tonyz289
    Tonyz289  avatar
    50 posts
    Member since:
    Jun 2011

    Posted 31 Jan 2012 Link to this post

    Thanks. That worked with just a little change:chk1.status should be chk1.checked
Back to Top