Creating the details view

You use the details view to load the details for the items. 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 » Resources, click Add » New Item...

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

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

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

   5. Define the markup by pasting the following code:

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

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

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

       

      <div class="agent-single content">

       

          <telerik:RadListView ID="DetailsView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">

              <LayoutTemplate>

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

              </LayoutTemplate>

              <ItemTemplate>

                  <div class="column-small">

                      <div class="block">

                          <p id="photo" runat="server"></p>

                          <h3><sf:FieldListView ID="Title" runat="server" Text="{0}" Properties="Title" /></h3>

                          <address>

                              <sf:FieldListView ID="Address" runat="server" Text="{0}" Properties="Address" /><br />

                              <sf:FieldListView ID="City" runat="server" Text="{0}" Properties="City" />

                              <sf:FieldListView ID="Region" runat="server" Text="{0}" Properties="Region" /><br />

                              <sf:FieldListView ID="PostalCode" runat="server" Text="{0}" Properties="PostalCode" /><br />

       

       

                          </address>

                      </div>

                  </div>

              </ItemTemplate>

          </telerik:RadListView>

       

          <div class="page-content">

       

          </div><!-- .page-content -->

       

      </div>

   6. In the Properties pane of the DetailsView.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 DetailsView.

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

   using System.Web.UI;

   using LocationsModule.Model;

   using Telerik.Sitefinity.Web.UI;

   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:

   class DetailsView : ViewBase

   {

    

   }

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

   protected override string LayoutTemplateName

   {

       get

       {

           return null;

       }

   }

    

   public override string LayoutTemplatePath

   {

       get

       {

           var path = "~/Locations/LocationsModule.Web.UI.Public.Resources.DetailsView.ascx";

           return path;

       }

       set

       {

           base.LayoutTemplatePath = value;

       }

   }

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

   protected internal virtual RadListView DetailsViewControl

   {

       get

       {

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

       }

   }

8. Override the InitializeControls method in the following way:

   protected override void InitializeControls(GenericContainer container, IContentViewDefinition definition)

   {

       var detailDefinition = definition as IContentViewDetailDefinition;

       if (detailDefinition == null) return;

    

       var locationsView = (LocationsView)this.Host;

       var item = locationsView.DetailItem as LocationItem;

       if (item == null)

       {

           if (this.IsDesignMode())

           {

               this.Controls.Clear();

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

           }

           return;

       }

    

       this.DetailsViewControl.DataSource = new LocationItem[] { item };

   }

9. Save the file.

The details view is loaded by the Locations view to display details for published items. It inherits from ViewBase. You create the Locations view in Creating the Locations 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 DetailsView.cs, you reference the RadListView control from the DetailsView.ascx by calling GetControl. Then, you override theInitializeControls method to set the data source for the RadListView control.