Silverlight-DataGrid Row Detailed Information Binding-DataGrid.RowDetailsTemplate

If we want to click one row and view details of this row when using DataGrid in Silverlight, how should we do? Additionally, this deatailed information includes several rows of data, not just several properties.

We use DataGrid.DetailsTemplate to set or get detailed information. Firstly, name A for one DataGrid and set RowDetailsVisibilityMode = “WisibleWhenSelected” (The display mode of details template is to unfold the detailed information when the row is selected.). Then set DataGrid.RowDetailsTemplate for A and add another DataGrid B. Also, set an entity set AList to bind DataGrid A.In AList, there is one property BList, which is the multiple row details. Then, bind BList detail fields to ItemSource of DataGrid B.

<Gridx:Name=”LayoutRoot”Background=”White”>

<! —aThere is one DataGrid,its DataGrid.RowDetailsTemplate will be bound to another DataGrid to display detailed information.–>

<sdk:DataGridx:Name=”gridEmployee”CanUserReorderColumns=”False”CanUserSortColumns=”False”RowDetailsVisibilityMode=”VisibleWhenSelected”HorizontalAlignment=”Center”ScrollViewer.VerticalScrollBarVisibility=”Auto”Height=”200″ AutoGenerateColumns=”False”Width=”422″VerticalAlignment=”Center”>

<sdk:DataGrid.Columns>

<sdk:DataGridTextColumnWidth=”150″Header=”User Name”Binding=”{BindingUserName}”/>

<sdk:DataGridTextColumnWidth=”150″Header=”User Password”Binding=”{BindingUserPwd}”/>

</sdk:DataGrid.Columns>

<sdk:DataGrid.RowDetailsTemplate>

<DataTemplate>

<! —aThere is the other DataGrid detailed information.>

<sdk:DataGrid AutoGenerateColumns=”False”ItemsSource=”{BindingUserDetailInfomation}”HeadersVisibility=”None”>

<sdk:DataGrid.Columns>

<sdk:DataGridTextColumnWidth=”100″Header=”Address”Binding=”{BindingUserAddress}”/>

<sdk:DataGridTextColumnWidth=”100″Header=”City”Binding=”{BindingUserCity}”/>

<sdk:DataGridTextColumnWidth=”100″Header=”Country”Binding=”{BindingUserCountry}”/>

<sdk:DataGridTextColumnWidth=”100″Header=”State”Binding=”{BindingUserState}”/>

</sdk:DataGrid.Columns>

</sdk:DataGrid>

</DataTemplate>

</sdk:DataGrid.RowDetailsTemplate>

</sdk:DataGrid>

</Grid>

DataSource XAML.cs code:

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            this.gridEmployee.ItemsSource = new UserInfo().GetEmployeeData();

        }

    }

    ///<summary>

    ///User Information

    ///</summary>

    public class UserInfo

    {

        public string UserName { get; set; }

        public string UserPwd { get; set; }

        ///<summary>

        ///User Detailed Information

        ///</summary>

        public List<UserDetailInfo> UserDetailInfomation{get;set;}

        public UserInfo()

        { }

        ///<summary>

        ///Get User Information Instance

        ///</summary>

        ///<returns></returns>

        public List<UserInfo> GetEmployeeData()

        {

            List<UserInfo> employees = new List<UserInfo>();

            employees.Add

                (

                new UserInfo

                {

                    UserName = “Joe”,

                    UserPwd = “1234567”,

                    UserDetailInfomation = new List<UserDetailInfo>()

                    {

                        new UserDetailInfo()

                        {

                            UserAddress=“Anchorage, Alaska”,

                            UserCity=“Anchorage”,

                            UserCountry=“America”,

                            UserState=“Alaska”

                        },

                        new UserDetailInfo()

                        {

                            UserAddress=“Denver, Colorado”,

                            UserCity=“Denver”,

                            UserCountry=“America”,

                            UserState=“Colorado”

                        }

                    }

                });

            employees.Add

                (

                new UserInfo

                {

                    UserName = “Json”,

                    UserPwd = “json282”,

                    UserDetailInfomation = new List<UserDetailInfo>()

                    {

                        new UserDetailInfo()

                        {

                            UserAddress=“Hartford, Connecticut”,

                            UserCity=“Hartford”,

                            UserCountry=“America”,

                            UserState=“Connecticut”

                        },

                        new UserDetailInfo()

                        {

                            UserAddress=“Dover, Delaware”,

                            UserCity=“Dover”,

                            UserCountry=“America”,

                            UserState=“Delaware”

                        }

                    }

                });

            employees.Add

                (

                new UserInfo

                {

                    UserName = “Lisa”,

                    UserPwd = “lilisasa”,

                    UserDetailInfomation = new List<UserDetailInfo>()

                    {

                        new UserDetailInfo()

                        {

                            UserAddress=“Tampa, Florida”,

                            UserCity=“Tampa”,

                            UserCountry=“America”,

                            UserState=“Florida”

                        },

                        new UserDetailInfo()

                        {

                            UserAddress=“Gainesville, Florida”,

                            UserCity=“Gainesville”,

                            UserCountry=“America”,

                            UserState=“Florida”

                        }

                    }

                });

            return employees;

        }

    }

    ///<summary>

    ///User Detailed Information Entity

    ///</summary>

    public class UserDetailInfo

    {

        public string UserAddress { get; set; }

        public string UserCity { get; set; }

        public string UserState { get; set; }

        public string UserCountry { get; set; }

    }

Two Components Recommend:

Spire.Doc, is used to operate MS Word document for .Net and Silverlight, including basic manipulations (generate, open, edit documents), mail merge and other Word functions manipulations.

Spire.XLS, is used to operate MS Excel for .NET and Silverlight, including basic manipulations (generate, open, edit files), chart creation and data exporting.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s