Complex Object and RadAutoCompleteBox in XAML Based Windows Store Application

Learn more about Rad Controls for Windows 8 here

In this article we will have a look at working with Complex Business Objects and RadAutoCompleteBox in XAML based Windows Store Applications. To begin, ensure you have added a reference for "RadControls for Windows 8" to the project. To add the reference right-click on the project and from the Extensions tab select RadControls for Windows 8.

Select-RadControls-for-Windows8.jpg

After adding the reference for the RadControls for Windows 8 you need to create a business object. Let us assume, we are working with an Employee object. You need to create an Employee class as in the following:

public class Employee

    {

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Department { get; set; }

 

    }

}

As of now you have created the Employee class. Next you need to create, or rather populate, some Employee data. There are many ways Employee data can be populated in the application. Some of them are as follows:

  1. From WCF SOAP Service

  2. From WCF REST based Service returning either JSON or XML.

  3. From OData Service etc

For the purpose of this article we will populate the data locally. Let us create a function returning a collection of Employees; see:
 

private List<Employee> GetEmployees()

        {

            List<Employee> lstEmployee = new List<Employee>

            {

                new Employee

                {

                    FirstName = "Dhananjay",

                    LastName = "Kumar",

                    Department = "Team1"

                },

                new Employee

                {

                    FirstName = "Dhananjay",

                    LastName = "Kumar",

                    Department = "Team1"

                },

                new Employee

                {

                    FirstName = "Deepak",

                    LastName = "Chwala",

                    Department = "Team2"

                },

                new Employee

                {

                    FirstName = "Amit",

                    LastName = "Chawla",

                    Department = "Team1"

                },

                new Employee

                {

                    FirstName = "Arun",

                    LastName = "Narayn",

                    Department = "Team2"

                },

                new Employee

                {

                    FirstName = "Bunty",

                    LastName = "Goyel",

                    Department = "Team1"

                },

                new Employee

                {

                    FirstName = "Boman",

                    LastName = "Irani",

                    Department = "Team2"

                },

                new Employee

                {

                    FirstName = "Charu",

                    LastName = "Sharma",

                    Department = "Team2"

                },

                new Employee

                {

                    FirstName = "Depanker",

                    LastName = "Banerjee",

                    Department = "Team1"

                },

                new Employee

                {

                    FirstName = "Ashok",

                    LastName = "Singhal",

                    Department = "Team2"

                },

                new Employee

                {

                    FirstName = "Chabhi",

                    LastName = "Rastogi",

                    Department = "Team1"

                },

 

            };

 

            return lstEmployee;

        }

As of now you have a collection of business objects with you. Now you need to create a RadAutoCompleteBox. The very first task is to add the following namespace to the XAML:

xmlns:tinput="using:Telerik.UI.Xaml.Controls.Input"

After adding the namespace you need to add a RadAutoCompleteBox to the XAML as follows:

   <tinput:RadAutoCompleteBox

            Height="70"

            Width="200"

            x:Name="autocompleteEmployee"

            DisplayMemberPath="FirstName">

           

        </tinput:RadAutoCompleteBox>

You can set one of the properties of the complex object as the suggestion term. In the sample above we are setting the FirstName property as the suggestion term.

In the last step you need to set the ItemSource of the RadAutoCompleteBox. This can be set as in the following:
 

protected override void OnNavigatedTo(NavigationEventArgs e)

        {

            autocompleteEmployee.ItemsSource = GetEmployees();

          

        }

Now on running the application you will find the RadAutoCompleteBox bound with the complex object.

RadAutoCompleteBox.jpg

In this way you can work with a complex object as a RadAutoCompleteBox in a XAML based Windows Store Application. I hope you find this article useful. Thanks for reading.