Reader Level:
Articles

How to display the SharePoint 2010 list items in the Silverlight Datagrid using Client Object Model

By Vijai Anand on Dec 23, 2010
In this article we will be seeing how to display the SharePoint 2010 list items in the Silverlight Datagrid using Client Object Model.
  • 0
  • 0
  • 15940

In this article we will be seeing how to display the SharePoint 2010 list items in the Silverlight Datagrid using Client Object Model.

Steps Involved:

  • Open Visual Studio 2010.
  • Go to File => New => Project.
  • Select Silverlight Application template and enter the Name for the project.
  • Click Ok.
  • Open MainPage.xaml and replace the code with the following one.
<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="SLGetFilesFromDL.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"      
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"> 
    <Grid x:Name="LayoutRoot" Background="White">
        <my:DataGrid x:Name="dgFilesFromDL" Height="200" Width="300" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" AutoGenerateColumns="True"
                           Background="#FFEBD0D0" AlternatingRowBackground="#FFF8ECEC">
            <my:DataGrid.RowGroupHeaderStyles>
                <Style TargetType="my:DataGridRowGroupHeader">
                    <Setter Property="PropertyNameVisibility" Value="Collapsed" />
                    <Setter Property="Background" Value="#FF112255" />
                    <Setter Property="Foreground" Value="#FFEEEEEE" />
                    <Setter Property="SublevelIndent" Value="15" />
               
</Style>
                <!-- Style for groups under the top level -->
                <Style TargetType="my:DataGridRowGroupHeader">
                    <Setter Property="Background" Value="#44225566" />
                </Style>
            </my:DataGrid.RowGroupHeaderStyles>
        </my:DataGrid>     
       
<data:DataPager Source="{Binding  Path=ItemsSource, ElementName=dgFilesFromDL}" PageSize="7" Margin="166,0,50,0"></data:DataPager>
    </Grid>
</
UserControl>

Open MainPage.xaml.cs and replace the code with the following.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;
using System.Threading;
using
System.Windows.Data;
 
namespace SLGetFilesFromDL
{
    public partial class MainPage : UserControl
    {     
        private ListItemCollection _empDetails;
 
        public class Project
        {
            public String empName { get; set; }          
        }
        public MainPage()
        {
            InitializeComponent();
            ClientContext context = new ClientContext(ApplicationContext.Current.Url);
            context.Load(context.Web);
            List empDetails = context.Web.Lists.GetByTitle("Employee Details");
            context.Load(empDetails);
 
            CamlQuery query = new Microsoft.SharePoint.Client.CamlQuery();
            string camlQueryXml = "<View><ViewFields>" +
                "<FieldRef Name=\"Title\" />" +
                "</ViewFields></View>";
 
            query.ViewXml = camlQueryXml;
            _empDetails = empDetails.GetItems(query);
            context.Load(_empDetails);
            context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);
        }
 
        private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
        {
            // This is not called on the UI thread.
            Dispatcher.BeginInvoke(BindData);
        }
 
        private void BindData()
        {
          
            List<Project> projects = new List<Project>();
            foreach (ListItem li in _empDetails)
            {
                projects.Add(new Project()
                {
                    empName = li["Title"].ToString(),                 
                });
            }
            PagedCollectionView pcv = new PagedCollectionView(projects);
            this.dgFilesFromDL.ItemsSource = pcv;         
            pcv.SortDescriptions.Add(new System.ComponentModel.SortDescription("empName", System.ComponentModel.ListSortDirection.Ascending));
        }
    }
}
 
Refer to the following link Integrating Silverlight in SharePoint 2010 to add Silverlight webpart in the SharePoint 2010.

Output:

Names are sorted in Ascending Order:

1.gif

Names are sorted in Descending Order:

2.gif
 

Vijai Anand

Vijai Anand has been working in IT industry for over 5 years. He holds Bachelor's degree in Electronics and Communication Engineering. Vijai write articles and blogs related to SharePoint 2013, SharePoint 2010, Silv... Read more

COMMENT USING