Chandradev's Blog

Using DataPager Control of silverlight, we can easily create the paging functionality in datagrid of silverlight.We can do this task like this

Step1: Create in one class in Solution Exp of Web i.e Emp.cs like this

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace GridPaging.Web
{
public class Emp
{
public int Id { get; set; }
public string EmpName { get; set; }
public string EmpSal { get; set; }
}
}

Step2:Create one silverlight enabled WCF and write the code like this

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;

namespace GridPaging.Web
{
[ServiceContract(Namespace = “”)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
SqlConnection con = new SqlConnection(“Data Source=.\\SQLEXPRESS;Initial Catalog=Test;Integrated Security=True”);

[OperationContract]
public List GetAllEmpName()
{
List Emps = new List();
con.Open();
using (SqlCommand cmd = new SqlCommand(“Select Id,EmpName,EmpSal from tblEmp”, con))
{
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
Emp emp1 = new Emp();
emp1.Id = Convert.ToInt32(dr[“Id”]);
emp1.EmpSal = dr[“EmpSal”].ToString();
emp1.EmpName = dr[“EmpName”].ToString();
Emps.Add(emp1);
}
con.Close();
return Emps;
}
}
}
}

Step3: Now compile and consume the WCF Service in Silverlight Application
Step4: Take one DataGrid and DataPager control from toolbar
Step5: Configure the XAML code like this

<StackPanel Margin="20,10,0,0">
<sdk:DataGrid AutoGenerateColumns="False" Height="220" HorizontalAlignment="Left" IsReadOnly="True" Name="dataGrid1" VerticalAlignment="Top" Width="219">
<sdk:DataGrid.Columns>
<sdk:DataGridTextColumn Binding="{Binding Id}" Header="EmpId"/>
<sdk:DataGridTextColumn Binding="{Binding EmpName}" Header="EmpName"/>
<sdk:DataGridTextColumn Binding="{Binding EmpSal}" Header="EmpSal"/>

</sdk:DataGrid.Columns>
</sdk:DataGrid>
<sdk:DataPager Height="26" HorizontalAlignment="Left" Source="{Binding Path=ItemsSource,ElementName=dataGrid1}" PageSize="8" Grid.Row="1" Grid.Column="0" Name="DataGridPager" Width="219" />
</StackPanel>

Step6:Write the code behind page for paging functionality like this

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 System.Windows.Data;

namespace GridPaging
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
fillGrid();
}
protected void fillGrid()
{
ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
client.GetAllEmpNameCompleted += new EventHandler(client_GetAllEmpNameCompleted);
client.GetAllEmpNameAsync();
}

void client_GetAllEmpNameCompleted(object sender, ServiceReference1.GetAllEmpNameCompletedEventArgs e)
{
if (e.Result.Count > 0)
{
dataGrid1.ItemsSource = e.Result;
PagedCollectionView tempListView = new PagedCollectionView(e.Result);
dataGrid1.ItemsSource = tempListView;

}
}
}
}

Note:Donot forget to write “System.Windows.Data” Namespace.

Step7:Now compile the code, you will get the expected output.