Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListView > Get an element in a Panel in a ListView when I click on another element in that Panel

• Tonyz289

  Posted on Jan 30, 2012 (permalink)

  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>

  Reply

• Answer Princy MVP

  Posted on Jan 31, 2012 (permalink)

  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.

  Reply


• Tonyz289

  Posted on Jan 31, 2012 (permalink)

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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListView > Get an element in a Panel in a ListView when I click on another element in that Panel