Creating the details view

You use the details view to load the details for the products. To create the details view, perform the following:

1. Create the template for the details view. Perform the following:

   1. In the context menu of folder Web » UI » Public, click Add » New Item...

   2. From the dialog click Visual C# » Code » Code File.

   3. In the Name input field, enter FrontendProductsDetailsView.ascx and click Add.

   4. Open the newly created file and clear its content.

   5. Define the markup by pasting the following code:

      <%@ Control Language="C#" %>

      <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>

      <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>

        

      <telerik:RadListView ID="DetailsView" ItemPlaceholderID="ItemContainer" AllowPaging="False" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

          <LayoutTemplate>

              <div class="sfproductsDetails">

                  <%--<div class="sfproductsLinksWrp">

                      <sf:MasterViewHyperLink class="sfproductsBack" Text="<%$ Resources:ProductsResources, AllProducts%>" runat="server" />

                  </div>--%>

                  <asp:PlaceHolder ID="ItemContainer" runat="server" />

              </div>

          </LayoutTemplate>

          <ItemTemplate>

              <h1 class="sfproductsTitle">

                  <asp:Literal ID="Literal1" Text='<%# Eval("Title") %>' runat="server" />

              </h1>

              <div class="sfproductsAuthorAndDate">

                  <asp:Literal ID="Literal2" Text="<%$ Resources:Labels, By %>" runat="server" />

                  <sf:PersonProfileView runat="server" /> | <sf:FieldListView ID="PublicationDate" runat="server"

                      Format="{PublicationDate.ToLocal():MMM dd, yyyy}" />

              </div>

              <sf:ContentBrowseAndEditToolbar ID="BrowseAndEditToolbar" runat="server" Mode="Edit,Delete,Unpublish"></sf:ContentBrowseAndEditToolbar>

              <sf:FieldListView ID="summary" runat="server" Text="{0}" Properties="Summary" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <div class="sfproductsContent">

                  <asp:Literal ID="Literal3" Text='<%# Eval("Content") %>' runat="server" />

              </div>

       

              <sf:ImageField ID="predefinedImageField" runat="server" DataFieldType="Telerik.Sitefinity.Model.ContentLinks.ContentLink"

                  DisplayMode="Read" ShowDeleteImageButton="false" CssClass="sfprofileField sfprofileAvatar" DefaultSrc="~/SFRes/images/ProductCatalogSample/Images.NoProductImage.png" DataFieldName="ProductImage" />

       

              <sf:FieldListView ID="priceControl" runat="server" Text="Price: {0}" Properties="Price" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <sf:FieldListView ID="quantityInStock" runat="server" Text="Quantity in stock: {0}" Properties="QuantityInStock" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

              <sf:FieldListView ID="whatsInTheBox" runat="server" Text="What is in the box: {0}" Properties="WhatIsInTheBox" WrapperTagName="div" WrapperTagCssClass="sfproductsSummary"  />

       

               <div class='sfitemFlatTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Color:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:FlatTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" TaxonomyId="47fc0316-0f9b-4d6d-a606-6cdc1977e10d" AllowMultipleSelection="false"

                TaxonomyMetafieldName="Colors" Expanded="false" BindOnServer="true" WrapperTagCssClass="sfproductsSummary" />

              </div>

       

              <div class='sfitemFlatTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Tags:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:FlatTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/FlatTaxon.svc" TaxonomyId="cb0f3a19-a211-48a7-88ec-77495c0f5374" AllowMultipleSelection="true" TaxonomyMetafieldName="Tags" Expanded="false" BindOnServer="true" />

              </div>

               

              <div class='sfitemHierarchicalTaxon sfitemTaxonWrp'>       

                  <sf:SitefinityLabel runat="server" Text='Categories:' WrapperTagName="div" HideIfNoText="true" CssClass="sfitemFieldLbl" />

                  <sf:HierarchicalTaxonField runat="server" DisplayMode="Read" WebServiceUrl="~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc" TaxonomyId="e5cd6d69-1543-427b-ad62-688a99f5e7d4" Expanded="false" TaxonomyMetafieldName="Category" BindOnServer="true" />

              </div>

       

              <sf:ContentView

                   id="commentsListView"

                   ControlDefinitionName="ProductsCommentsFrontend"

                   MasterViewName="CommentsMasterView"

                   ContentViewDisplayMode="Master"

                   runat="server" />

               <sf:ContentView

                   id="commentsDetailsView"

                   ControlDefinitionName="ProductsCommentsFrontend"

                   DetailViewName="CommentsDetailsView"

                   ContentViewDisplayMode="Detail"

                   runat="server" />

          </ItemTemplate>

      </telerik:RadListView>

   6. In the Properties pane of the FrontendProductsDetailsView.ascx file, change the Build Action to Embedded Resource.

2. From the context menu of folder Web » UI » Public, click Add » Class...

3. In the Name input field, enter ProductDetailsView.

4. Open the file in Visual Studio and add the following namespaces:

   using ProductCatalogSample.Model;

   using Telerik.Sitefinity.Web.UI;

   using Telerik.Sitefinity.Web.UI.ContentUI;

   using Telerik.Sitefinity.Web.UI.ContentUI.Contracts;

   using Telerik.Sitefinity.Web.UI.ContentUI.Views.Backend;

   using Telerik.Sitefinity.Web.UI.Templates;

   using Telerik.Web.UI;

5. Change the class definition to:

   public class ProductDetailsView : ViewBase

   {

   }

6. Mark the class with the following attribute:

   [ControlTemplateInfo("ProductsResources", "ProductDetailViewFriendlyName", "ModuleTitle")]

7. Reference the embedded template by pasting the following code into the class body:

   internal const string layoutTemplateName = "ProductsModule.Web.UI.Public.FrontendProductsDetailsView.ascx";

    

   protected override string LayoutTemplateName

   {

       get

       {

           return null;

       }

   }

    

   public override string LayoutTemplatePath

   {

       get

       {

           return ProductsModule.ProductsVirtualPath + layoutTemplateName;

       }

       set

       {

           base.LayoutTemplatePath = value;

       }

   }

8. Provide a property for accessing the RadListView control in the template in the following way:

   protected internal virtual RadListView DetailsView

   {

       get

       {

           return this.Container.GetControl<RadListView>("DetailsView", true);

       }

   }

9. Override the InitializeControls method in the following way:

   protected override void InitializeControls(GenericContainer container, IContentViewDefinition definition)

   {

       var detailDefinition = definition as IContentViewDetailDefinition;

       if (detailDefinition != null)

       {

           var productsView = (ProductsView)this.Host;

           var item = productsView.DetailItem as ProductItem;

           if (item == null)

           {

               if (this.IsDesignMode())

               {

                   this.Controls.Clear();

                   this.Controls.Add(new LiteralControl("A product item was not selected or has been deleted. Please select another one."));

               }

               return;

           }

           else

           {

               this.DetailsView.ItemCreated += new EventHandler<RadListViewItemEventArgs>(DetailsView_ItemCreated);

               this.DetailsView.ItemDataBound += new EventHandler<RadListViewItemEventArgs>(DetailsView_ItemDataBound);

               this.DetailsView.DataSource = new ProductItem[] { item };

           }

       }

   }

    

   public override void RenderBeginTag(HtmlTextWriter writer)

   {

       if (!string.IsNullOrEmpty(this.CssClass))

       {

           this.AddAttributesToRender(writer);

           writer.RenderBeginTag(HtmlTextWriterTag.Div);

       }

   }

    

   public override void RenderEndTag(HtmlTextWriter writer)

   {

       if (!string.IsNullOrEmpty(this.CssClass))

       {

           base.RenderEndTag(writer);

       }

   }

10. Provide the necessary event handlers in the following way:

    private void DetailsView_ItemCreated(object sender, RadListViewItemEventArgs e)

    {

        if (e.Item.ItemType == RadListViewItemType.DataItem || e.Item.ItemType == RadListViewItemType.AlternatingItem)

        {

            var view = e.Item.FindControl("commentsListView") as ContentView;

            this.InitCommentsView(view);

        }

    }

     

    private void DetailsView_ItemDataBound(object sender, RadListViewItemEventArgs e)

    {

        if (e.Item.ItemType == RadListViewItemType.DataItem || e.Item.ItemType == RadListViewItemType.AlternatingItem)

        {

     

            var productsView = (ProductsView)this.Host;

            if (productsView.HidePrices)

            {

     

                var priceControl = e.Item.FindControl("priceControl");

                priceControl.Visible = false;

            }

     

            var view = e.Item.FindControl("commentsDetailsView") as ContentView;

            this.InitCommentsView(view);

        }

    }

     

    private void InitCommentsView(ContentView view)

    {

        if (view != null)

        {

            view.ControlDefinition.ProviderName = this.Host.ControlDefinition.ProviderName;

            var detailItem = this.Host.DetailItem as Telerik.Sitefinity.GenericContent.Model.Content;

            if (detailItem != null)

            {

                view.DetailItem = detailItem;

            }

        }

    }

11. Save the file.

The details view is loaded by the Products view to display details for published items. It inherits from ViewBase. You create the Products view in Creating the products view.

In the markup, first, you register the necessary assemblies, so that they can be used in the template. You create a RadListView to display the details for the item.

In ProductDetailsView.cs, you reference the RadListView control from the FrontendProductsDetailsView.ascx by calling GetControl. Then, you override the InitializeControls method to set the data source for the RadListView control.