More in this section

Forums / General Discussions / ListView example?

ListView example?

13 posts, 0 answered
  1. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    19 May 2010
    Link to this post
    I am interested to place a ListView control onto a page that bonds to a data source. I also want to use an ItemTemplate to display each data instance. This can be done on an external .aspx page without any code behind. Can I do it with the page created by Sitefinity? Do you have an example?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 May 2010
    Link to this post
    Hello John Cheng,

    Create a user control and drop it on a page.

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
           <LayoutTemplate>     
           </LayoutTemplate>
          <ItemTemplate>
            <asp:Label ID="Fname" runat="server" Text='<%# Eval("FirstName") %>' />
            <asp:Label ID="Lname" runat="server" Text='<%# Eval("LastName") %>' />
         </ItemTemplate>
     </asp:ListView>


    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    19 May 2010
    Link to this post

    So, I have to create a user control to hold the sample code your give? Can I directly drop the code onto a page, directly or through some configuration? I think it would be more flexible this way. I saw Sitefinity 4.0 allow me to drop ListView onto a page. But it’s not clear what I can do with it.

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    20 May 2010
    Link to this post
    Hi John Cheng,

    Crating a simple user control

    •  Create a new control
    sample code

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="TestControl.ascx.cs" Inherits="Controls_TestControl" %>
     
    <telerik:RadListBox runat="server" ID="RadListBox" DataSourceID="SiteMap" >
    <ItemTemplate>
       <asp:Label ID="Fname" runat="server"  Text='<%# Eval("Url") %>' />
            <asp:Label ID="Lname" runat="server" Text='<%# Eval("Title") %>' />
    </ItemTemplate>
    </telerik:RadListBox>
     
    <asp:SiteMapDataSource runat="server" ID="SiteMap" StartFromCurrentNode="false" ShowStartingNode="false" />

    •  Register the control under \App_Data\Sitefinity\Configuration\ToolboxesConfig.config

    <add name="CustomControl" title="CustomControl" description="CustomControl">
                    <tools>
                        <add type="~/Controls/TestControl.ascx" name="TestControl" title="TestControl" description="TestControl" layoutTemplate="~/Controls/TestControl.ascx" url="~/Controls/TestControl.ascx" />
                    </tools>
                </add>

    You can gather more information about adding controls at Sitefinity 4.x Developers Manual

    I saw Sitefinity 4.0 allow me to drop ListView onto a page. But it’s not clear what I can do with it.

    Most probably you are referring   to RadListView for ASP.NET AJAX  which is added to the Widgets secion in page edit mode. You can gather more information about this control and how it works at RadListView for ASP.NET AJAX online help.

    All the best,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    20 May 2010
    Link to this post
    Hi Ivan,
    Your example placed a list control and a fixed type data source into a user control. Let’s call it plumbing code, since it doesn’t have code behind. Let’s take a simple scenario, if I want to replace the data source with a different setting, or different kind, then I need to create another user control. If my control also has code behind, then, I need to recompile and redeploy it. This doesn’t sound very flexible. On the other hand, if Sitefinity can allow me place the plumbing code on the page level, everything is solved. This is what I am looking for. I can leave with the fact that Sitefinity page doesn’t allow code behind. But allow more complicated plumbing code should be a reasonable reqirement. 

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    20 May 2010
    Link to this post
    Hi John Cheng,

    You could expose the datasource as a public property. Please take a look at
    You do not have to create another control. Recompiling is not necessary for user controls - it is required when you work with class libraries and you are referencing dlls from the bin.

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    20 May 2010
    Link to this post
    Hi Ivan,

    I made a control that exposed a public property ObjectDataSourceID. If I don’t have to create another control in order to bond it with an ObjectDataSource instance. I would appreciate if you could show me an example.
  8. Bob
    Bob avatar
    330 posts
    Registered:
    30 Dec 2016
    21 May 2010
    Link to this post
    Hi John,

    I will give you a step by step example how to use ListView and ObjectDataSource controls. For the sake of simplicity I assume you are working with Web Site project.

    1. Open your Sitefinity web site in Visual Studio as web site.
    2. Create new user control in the root folder named MyListView.ascx.
      Note: This step is necessary because ListView control requires templates. Currently this is the only way to declare templates. In the future we are going to provide a way to declare templates directly from Sitefinity's UI. If you want to avoid the additional steps for creating user control you can use a control that does not require templates, such as GridView for example.
    3. Paste the following declarations in the .ascx file:
      <%@ Control Language="C#" AutoEventWireup="true" CodeFile="MyListView.ascx.cs" Inherits="MyListView" %>
      <asp:ListView ID="ListView1" runat="server">
          <LayoutTemplate>
              <dl>
                  <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
              </dl>
          </LayoutTemplate>
          <ItemTemplate>
              <dt><asp:Literal Text='<%# Eval("Name") %>' runat="server" /></dt>
              <dd><asp:Literal Text='<%# Eval("Description") %>' runat="server" /></dd>
          </ItemTemplate>
      </asp:ListView>
    4. In the code behind paste the following code:
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
      using System.Web.UI;
      using System.Web.UI.WebControls;
        
      public partial class MyListView : System.Web.UI.UserControl
      {
          public string MyDataSourceID
          {
              get;
              set;
          }
        
          protected void Page_Load(object sender, EventArgs e)
          {
              this.ListView1.DataSourceID = this.MyDataSourceID;
          }
      }
    5. Add App_Code folder to your web site if there isn't already one there.
    6. Create new class in App_Code folder named DataItem.
    7. Paste the following code in DataItem.cs file:
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
        
      public class DataItem
      {
          public string Name
          {
              get;
              set;
          }
        
          public string Description
          {
              get;
              set;
          }
      }
    8. Create new class in App_Code folder named DataProvider.
    9. Paste the following code in DataProvider.cs file:
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Web;
        
      public class DataProvider
      {
          public static IList<DataItem> GetData()
          {
              return new[] 
              
                  new DataItem()
                  {
                      Name = "First Item",
                      Description = "This is the first item."
                  },
                  new DataItem()
                  {
                      Name = "Second Item",
                      Description = "This is the second item."
                  },
                  new DataItem()
                  {
                      Name = "Third Item",
                      Description = "This is the third item."
                  }
              };
          }
      }
    10. Add the new user control and ObjectDataSource control to the toolbox. The following steps show haw to use Sitefinity's UI to add controls to toolboxes.
      1. Start your web site and navigate to ~/Sitefinity/Settings/Configurations
      2. In the left pane expand the following tree nodes: Toolboxes>Toolboxes>PageControls>Sections>Data>Tools and make sure Tools is selected.
      3. In the right pane click on Create New button.
      4. Fill the following fields:
        1. ControlType: System.Web.UI.WebControls.ObjectDataSource
        2. Name: ObjectDataSource
        3. Title: Object Data Source
      5. Click Save Changes button.
      6. Click Create New again.
      7. Fill the fields as described bellow:
        1. ControlType: ~/MyListView.ascx
        2. Name: MyListView
        3. Title: My List View
      8. Click Save Changes button.
    11. Open a page in edit mode.
    12. Expand Data section in Widgets pane.
    13. Drag and drop Object Data Source control on the page.
    14. Click edit on the control. In the properties window set the following fields:
      1. TypeName: DataProvider, App_Code
      2. SelectMethod: GetData
      3. ID: MyDataSource
    15. Click Save
    16. Drag and drop My List View control on the page.
    17. Click edit on the control. In the properties window set the following fields:
      1. MyDataSourceID: MyDataSource
    18. Click Save
    19. Publish and view the page. You should see a list of the three DataItems returned by our DataProvider.GetData() method.

      Greetings,
      Bob
      the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    21 May 2010
    Link to this post
    Hi Bob,
    Thanks for the detail. It sounds very promising. The first 9 steps are obvious. Steps 10 to 13 are easy to follow. But I have problem on Step 14.1. The TypeName edit box is not enabled. Actually, I cannot type anything in any of the fields. The Sitefinity version that I am using is 4.0.346, which is the latest I can get from your download site.
  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    24 May 2010
    Link to this post
    Hi John Cheng,

    Thank you for getting back to us.

    Could you try editing any of the settings of the user control, rather than the Object Data Source one? I have tried with both on the same version and the textbox is enabled. Also check the page permissions. Is it possible that you are not logged in with an administrator account. By default in the CTP version the permissions are set that only admin users can make changes in the back end, refer to attached image.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  11. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    24 May 2010
    Link to this post
    I just tried again. This time I was able to edit the exact data source control. And I was able to complete my test. I don't think my account was the issue, since there is only one account 'admin'. Thanks for the step-by-step help.
    During this test, I also noticed that it’s difficult to specify the parameters for the functions called by the data source. So, for now I avoid using paramters. Any help on that?
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    25 May 2010
    Link to this post
    Hello John Cheng,

    When I am struggling with parameters or some other attributes I have to set on such types of controls I create a blank .aspx page and add <asp:ObjectDataSource> control there, then I go in design mode of the control and run the wizard to select objects, and parameters. This produces markup with the selected necessary parameters. Then I go to the code with my Object Data Source control and add the select parameters in the code. You might apply the same approach, and specify parameters either in the code (if your data source control is going to be used with only one type of data) or in the control designer in page editor (if you intend to use the control with multiple types of data).

    All the best,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  13. John Cheng
    John Cheng avatar
    8 posts
    Registered:
    27 Apr 2010
    25 May 2010
    Link to this post
    You seem talking about .aspx pages. I don’t see how this would help me place the ObjectDataSource control onto a Sitefinity page, when I need to specify complex parameters. And there is limited designer and no page editor. Is there a page editor (code level) for the Sitefinity pages?
13 posts, 0 answered