ListView example?

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?

Hello John Cheng,

Create a user control and drop it on a page.

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.

Hi John Cheng,

Crating a simple user control

•  Create a new control

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

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. 

Hi John Cheng,

You could expose the datasource as a public property. Please take a look at

• Controls Overview
• Types of controls

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.

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

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.

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

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?

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

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?