ComponentOne

DataGrid for Silverlight

Copyright  1987-2010 ComponentOne LLC. All rights reserved.
Corporate Headquarters ComponentOne LLC 201 South Highland Avenue 3rd Floor Pittsburgh, PA 15206 ∙ USA Internet: info@ComponentOne.com Web site: http://www.componentone.com Sales E-mail: sales@componentone.com Telephone: 1.800.858.2739 or 1.412.681.4343 (Pittsburgh, PA USA Office)

Trademarks The ComponentOne product name is a trademark and ComponentOne is a registered trademark of ComponentOne LLC. All other trademarks used herein are the properties of their respective owners. Warranty ComponentOne warrants that the original CD (or diskettes) are free from defects in material and workmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during this time, you may return the defective CD (or disk) to ComponentOne, along with a dated proof of purchase, and ComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for a defective CD (or disk) by sending it and a check for $25 (to cover postage and handling) to ComponentOne. Except for the express warranty of the original CD (or disks) set forth here, ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that the information contained in this manual is correct as of the time it was written. We are not responsible for any errors or omissions. ComponentOne’s liability is limited to the amount you paid for the product. ComponentOne is not liable for any special, consequential, or other damages for any reason. Copying and Distribution While you are welcome to make backup copies of the software for your own use and protection, you are not permitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and we appreciate your support in seeing that it is used by licensed users only. This manual was produced using ComponentOne Doc-To-Help™.

Table of Contents
DataGrid ............................................................................................................................ 1 DataGrid for Silverlight Key Features...................................................................................................1 DataGrid for Silverlight Quick Start ......................................................................................... 5 Step 1 of 4: Creating a Silverlight Application .......................................................................................5 Step 2 of 4: Binding the Grid to a Data Source ......................................................................................6 Step 3 of 4: Customizing the Grid's Appearance and Behavior................................................................9 Step 4 of 4: Running the Grid Application .......................................................................................... 10 Working with DataGrid for Silverlight .....................................................................................15 Class Hierarchy................................................................................................................................. 15 Data Binding .................................................................................................................................... 15 Defining Columns ............................................................................................................................. 16 Creating Custom Columns................................................................................................................. 21 Creating Custom Rows...................................................................................................................... 24 Adding Row Details .......................................................................................................................... 29 Localizing the Application ................................................................................................................. 29 Enabling or Disabling End User Interaction ........................................................................................ 32 Setting Selection Mode ...................................................................................................................... 32 Locking the Grid ............................................................................................................................... 33 Deferred and Real Time Scrolling ...................................................................................................... 33 Paging Grid Data .............................................................................................................................. 34 DataGrid for Silverlight's Appearance ......................................................................................35 C1DataGrid Themes ......................................................................................................................... 35 Table Formatting Options.................................................................................................................. 37 C1DataGrid Brushes ......................................................................................................................... 39 C1DataGrid ClearStyle ..................................................................................................................... 39 C1DataGrid Styles ............................................................................................................................ 41 C1DataGrid Template Parts .............................................................................................................. 42 RowDetailsTemplate......................................................................................................................... 43 Run-time Interaction ............................................................................................................44 Keyboard and Mouse Navigation ....................................................................................................... 44 Resizing Columns and Rows ............................................................................................................. 47 Reordering Columns ......................................................................................................................... 48 Filtering Columns ............................................................................................................................. 48 Sorting Columns ............................................................................................................................... 50 Grouping Columns ........................................................................................................................... 51 Freezing Columns ............................................................................................................................. 53 Editing Cells ..................................................................................................................................... 54 Adding Rows to the Grid ................................................................................................................... 55 DataGrid for Silverlight Tutorials ...........................................................................................57 Binding the Grid to a Web Service ..................................................................................................... 57 Binding the Grid to an RSS Feed........................................................................................................ 64 Creating a Master/Detail View .......................................................................................................... 67 Localizing the Grid ........................................................................................................................... 71 Binding the Grid to a RiaServices Domain Data Source....................................................................... 78 Implementing Stealth Paging ............................................................................................................. 79 DataGrid for Silverlight Task-Based Help .................................................................................89 Creating a DataGrid .......................................................................................................................... 89

iii

.................... 91 Customizing Grid Appearance ............Controlling Grid Interaction ........................................... 98 iv ...............................................................................................................................................

 Custom Filtering Support 1 . See Run-time Interaction (page 44) for more information. freezing. See Filtering Columns (page 48) for more information. editing. Expandable and collapsible nodes are automatically generated. DataGrid has many built-in interactive features such as column resizing and dragging. filtering. The default filtering displays buttons on the column headers allowing end-users to show data that satisfy conditions such as 'Contains'. grouping. You can also show calculated aggregate functions or totals in grouped header rows. The robust data-bound C1DataGrid control makes it easy to display. hyperlink.Quick Start (page 5) .  Filtering C1DataGrid supports three filtering techniques: filter row. 'Equals'. 'Starts With'. such as:  Fully Interactive Grid Enhance the end-user experience by creating a fully interactive grid with ComponentOne DataGrid for Silverlight. Simply drag a column header to the area above the grid to group the data. full text search and the default Excel-like filtering. combo box and images. check box. and analyze tabular data in Silverlight applications. Getting Started Get started with the following topics: . edit.Key Features (page 1) .Tutorials (page 57) DataGrid for Silverlight Key Features ComponentOne DataGrid for Silverlight includes several key features. and drag-and-drop rows. or 'Greater Than'.  Built-in Data Editors DataGrid for Silverlight provides many built-in column editors that cover all of the common data types.DataGrid Add advanced data visualization to your Silverlight applications with ComponentOne DataGrid™ for Silverlight. DateTime picker. See Grouping Columns (page 51) for more information. multi-line text and a color picker. sorting. The built-in editors include text. You can also choose from a selection of custom column editors including masked text.  Data Grouping and Totals DataGrid for Silverlight supports Outlook-style grouping.

You can conveniently provide DataGrids in multiple languages by translating all strings used in the control such as filter conditions and all UI strings embedded in the control. such as Microsoft Excel. Small Footprint With our grid control’s small size. filtering. It allows you to take advantage of built-in C1DataGrid features like sorting. multi-column.  Big Functionality. see Adding Row Details (page 29). you can improve performance with deferred scrolling. multi-row.  Support for RIA Services You can easily bind the C1DataGrid control to your Rich Internet Application (RIA) Services data source. With the C1DataGrid control's clipboard support. Export your data to one of several formats: HTML. The C1DataGrid control also supports the clipboard so you could copy content to an external Excel file. and Excel. see Localizing the Application (page 29).  Paging and Scrolling C1DataGrid supports several techniques to help with loading large amounts of data. and grouping. PDF. o Paging: Connect C1DataGrid to a C1DataPager and only load the necessary data to fit one page. See Paging Grid Data (page 34) for details. single column. and multi-range. 500 KB.  Hierarchical DataGrid DataGrid for Silverlight supports displaying hierarchical information with parent and child grids. You can even add preview ToolTips to display the approximate datarow to the user while scrolling. Set the ScrollMode property to turn on deferred scrolling.Implement custom end-user operations such as incremental search and record set filtering using the filter bar. you can add a full featured grid to your Rich Internet Application without worrying about longer download times. DataGrid gives you a RowDetailsTemplate for embedding other controls inside the grid that can be bound to your data. DataGrid for Silverlight provides top and bottom row templates which can be used for a filter bar.  Localization DataGrid for Silverlight supports localized resource files added to your project. For more information.  Printing and Export Formats DataGrid for Silverlight supports printing and saving data. See Deferred and Real Time Scrolling (page 33) for details. Deferred Scrolling: When loading a large amount of data. As the user scrolls down the grid. See Implementing Stealth Paging (page 79) for an example. The data is not fetched until the user stops moving the scroll bar. Stealth Paging: Achieve paging functionality with a scrollbar.  Easily Change Colors with ClearStyle 2 . just like with paging. For more information. You can also customize how parent and child grids appear and behave by using templates. o o  Multiple Selection Modes Give end-users all of the following cell selection options: single cell. single row. more data is fetched as needed. Just embed another DataGrid and you can create a master-detail grid for displaying hierarchical data. a special data entry row below the column headers. just follow a couple of steps and use the adapter classes provided with the C1DataGrid.  Add and Remove Rows DataGrid for Silverlight has built-in support for adding and removing rows. See Adding Rows to the Grid (page 55) for more information. endusers can then easily paste selected cells into any text editor. C1DataGrid supports server-side sorting and filtering so you can still achieve these functionalities without sacrificing performance. single range.

Column types include DateTime. WhistlerBlue. see Freezing Columns (page 53) for more information. see Keyboard and Mouse Navigation (page 44). See Custom Keyboard Navigation (page 47) for more information. see Column Types (page 16). By freezing a column or row.  Keyboard and Mouse Navigation Built-in keyboard and mouse navigation adds accessibility and provides users with more ways of interacting with the grid. Users can also resize columns and rows at run time. You can even bind grid columns to image lists. For more information. 3 . See C1DataGrid ClearStyle (page 39) and ComponentOne ClearStyle Technology for more information. you can lock it from being scrolled by the end user so that those columns are always visible. RainerOrange. For more information.  Use Built-in Column Types for Enhanced Editing DataGrid for Silverlight supports several built-in column types that can provide masking and data validation.  Display In-Cell Images Each grid cell can display images in addition to data using the built-in image column type. including ExpressionDark. ShinyBlue. see Resizing Columns and Rows (page 47) for more information. For more information. ExpressionLight. an easy and efficient way to display database information graphically. Numeric columns and more.  Freezing Columns and Rows You can now freeze specific columns or rows to prevent users scrolling them horizontally. See C1DataGrid Themes (page 35) for more information.  Fully Customizable Style Fully customize the appearance of DataGrid for Silverlight by creating XAML style resources to fit the exact look of your application. and BureauBlack. For more information.  Size Rows and Columns DataGrid for Silverlight automatically resizes the row and column to fit the cell contents. Boolean. By just setting a few color properties you can quickly style the entire grid.DataGrid for Silverlight supports ComponentOne's new ClearStyle technology that allows you to easily change control colors without having to change control templates.  Silverlight Toolkit Themes Add style to your UI with built-in support for the most popular Microsoft Silverlight Toolkit themes. Customize the default keyboard and mouse navigation to control how the user interacts with the grid at run time.

.

and bind it to a data source. select a language in the left pane.microsoft. complete the following steps: 1. The MainPage.com/winfx/2006/xaml" xmlns:d="http://schemas. What You've Accomplished 3. In this quick start you'll create a new project in Visual Studio. In Visual Studio. You'll create a new Silverlight project and add the C1DataGrid control to your application.Silverlight.assembly=C1. 4. 7. and create your project. 2.openxmlformats.MainPage" xmlns="http://schemas. 5 . The XAML markup will now look similar to the following: <UserControl xmlns:c1grid="clrnamespace:C1.com/expression/blend/2008" xmlns:mc="http://schemas. In the New Project dialog box.Silverlight. In Visual Studio 2010 you can also click on the window in Design view to add controls directly to the form. Click OK to accept default settings.DataGrid namespace and <c1grid:C1DataGrid></c1grid:C1DataGrid> tags have been added to the project.DataGrid for Silverlight Quick Start The following quick start guide is intended to get you up and running with ComponentOne DataGrid for Silverlight.DataGrid. you'll be able to access the C1DataGrid control in code. and in the templates list select Silverlight Application. If the <c1grid:C1DataGrid> tag includes existing content. You'll then customize the grid's appearance and behavior and run the grid application to observe run-time interactions. delete it so it appears similar to the following: <c1grid:C1DataGrid></c1grid:C1DataGrid> Give your grid a name by adding x:Name="c1dg" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg"> By giving the control a unique identifier. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. To set up your project and add a C1DataGrid control to your application.DataGrid" x:Class="C1DataGrid.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft. select File | New | Project. add DataGrid for Silverlight to your application. 6. close the New Silverlight Application dialog box.Silverlight. Enter a Name for your project and click OK.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1grid:C1DataGrid></c1grid:C1DataGrid> </Grid> </UserControl> Note that the C1.xaml. 5.microsoft. In the XAML window of the project. The New Silverlight Application dialog box will appear. place the cursor between the <Grid> and </Grid> tags and click once.xaml file should open. Step 1 of 4: Creating a Silverlight Application In this step you'll begin in Visual Studio to create a Silverlight grid application using ComponentOne DataGrid for Silverlight.

Step 2 of 4: Binding the Grid to a Data Source In the last step you set up the grid application.500 g pkgs. In the next step you'll add a XML data source to your project and bind the grid to a data source. right-click the project and select Add | New Item. select XML File from the list of installed templates. 2. complete the following steps: 1.5" /> 6 .8 oz jars" Price="25" /> <Product Name="Uncle Bob's Organic Dried Pears" Category="Produce" Unit="12 .35" /> <Product Name="Grandma's Boysenberry Spread" Category="Condiments" Unit="12 ." Price="30" /> <Product Name="Northwoods Cranberry Sauce" Category="Condiments" Unit="12 .12 oz bottles" Price="19" /> <Product Name="Aniseed Syrup" Category="Condiments" Unit="12 .100 g pkgs. The Products.200 ml jars" Price="31" /> <Product Name="Queso Cabrales" Category="Dairy Products" Unit="1 kg pkg. Replace the existing text in the Products. but the grid currently contains no data – if you run the application now you'll see a blank grid." Price="21" /> <Product Name="Queso Manchego La Pastora" Category="Dairy Products" Unit="10 ." Price="23. In the Solution Explorer window. name the file "Products.500 g pkgs. 3.1 lb pkgs.25" /> <Product Name="Genen Shouyu" Category="Condiments" Unit="24 . and click Add to close the dialog box.250 ml bottles" Price="15.12 oz jars" Price="40" /> <Product Name="Mishi Kobe Niku" Category="Meat/Poultry" Unit="18 .1 kg tins" Price="39" /> <Product Name="Carnarvon Tigers" Category="Seafood" Unit="16 kg pkg.5" /> <Product Name="Pavlova" Category="Condiments" Unit="32 .0" encoding="utf-8" ?> <Products> <Product Name="Chai" Category="Beverages" Unit="10 boxes x 20 bags" Price="18" /> <Product Name="Chang" Category="Beverages" Unit="24 .xml".45" /> <Product Name="Alice Mutton" Category="Meat/Poultry" Unit="20 .You've successfully created a basic grid application. and should have opened automatically. In the Add New Item dialog box.xml file with the following XML markup and save the file:  XML to add: <?xml version="1." Price="62.550 ml bottles" Price="10" /> <Product Name="Chef Anton's Cajun Seasoning" Category="Condiments" Unit="48 .6 oz jars" Price="22" /> <Product Name="Chef Anton's Gumbo Mix" Category="Condiments" Unit="36 boxes" Price="21.xml file should now be included in your project. In this step you'll continue in Visual Studio by adding an XML data source to your project and binding the grid to the data source.500 g boxes" Price="17." Price="97" /> <Product Name="Ikura" Category="Seafood" Unit="12 . To add a data source and bind the grid in Visual Studio." Price="38" /> <Product Name="Konbu" Category="Seafood" Unit="2 kg box" Price="6" /> <Product Name="Tofu" Category="Produce" Unit="40 .

4.5" /> <Product Name="NuNuCa Nuß-Nougat-Creme" Category="Confections" Unit="20 .355 ml cans" Price="4.Linq and click OK to add the reference. Choose MainPage.500 g pkgs." Price="9" /> <Product Name="Guaraná Fantástica" Category="Beverages" Unit="12 .  7.Xml. x 4 pieces" Price="10" /> <Product Name="Gustaf's Knäckebröd" Category="Grains/Cereals" Unit="24 .xaml.ItemsSource property to the XML data source:  Visual Basic Partial Public Class MainPage Inherits UserControl Public Sub New() InitializeComponent() LoadData() End Sub ' Create the Product class.Xml. locate System.Linq Imports C1.250 g pkgs.Linq. 6. import the following namespaces:  Visual Basic Imports System.Silverlight. Add the following code to initialize the data source. using C1.450 g glasses" Price="14" /> </Products> This will add data taken from the Products table of the standard Microsoft Northwind database.Silverlight." Price="21" /> <Product Name="Tunnbröd" Category="Grains/Cereals" Unit="12 . In the Code Editor. Public Class Product Private _Name As String Public Property Name() As String Get Return _Name End Get Set(ByVal value As String) _Name = value End Set End Property Private _Category As String Public Property Category() As String Get Return _Category End Get 7 .2" /> <Product Name="Sir Rodney's Marmalade" Category="Confections" Unit="30 gift boxes" Price="81" /> <Product Name="Sir Rodney's Scones" Category="Confections" Unit="24 pkgs.<Product Name="Teatime Chocolate Biscuits" Category="Confections" Unit="10 boxes x 12 pieces" Price="9. and select View Code in the context menu to open the Code Editor. Right-click the project and select Add Reference.Xml. and bind the C1DataGrid.DataGrid C# using System. In the Add Reference dialog box.DataGrid. 5. right-click the page.

ItemsSource = data End Sub End Class  C# public MainPage() { InitializeComponent(). set.Set(ByVal value As String) _Category = value End Set End Property Private _Unit As String Public Property Unit() As String Get Return _Unit End Get Set(ByVal value As String) _Unit = value End Set End Property Private _Price As String Public Property Price() As String Get Return _Price End Get Set(ByVal value As String) _Price = value End Set End Property End Class Private Sub LoadData() ' Initialize the XML data source.Category = Product.Price = Product. . c1dg. Dim ProductsDoc As XDocument = XDocument.Value. } public string Price { get. List<Product> data = ( from Product in ProductsDoc. } public string Unit { get.Unit = Product. LoadData(). XDocument ProductsDoc = XDocument.Attribute("Name"). set.Value}).Descendants( "Product" ) 8 . set.Name = Product.Attribute("Unit").Value. } } private void LoadData() { // Initialize the XML data source.Descendants("Product") Select New Product With {.ToList ' Bind the C1DataGrid control to the data source.Value.Attribute("Price").Load("Products. } // Create the Product class.xml"). . . set.xml") Dim data As IEnumerable(Of Product) = (From Product In ProductsDoc.Attribute("Category").Load("Products. } public string Category { get. public class Product { public string Name { get.

Price = Product. // Bind the C1DataGrid control to the data source. The XAML will now look similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True"> 3. Category = Product. complete the following steps: 1.Value.Attribute("Price"). This will move the add new row to the top of the grid. In this example you'll be customizing the grid in XAML rather than code. Unit = Product.xaml file.Attribute("Unit"). In this step you'll customize the grid application's appearance and behavior.Attribute("Category").ToList().Value } ). In the next step you'll customize the appearance and behavior of the C1DataGrid control. The XAML will now look similar to the following: 9 . c1dg.Value. Return to the MainPage. Locate the <c1grid:C1DataGrid> tag in the XAML window and add CanUserGroup="True" to it. Step 3 of 4: Customizing the Grid's Appearance and Behavior In the previous steps you worked in Visual Studio to create a new Silverlight project and bind DataGrid for Silverlight to a data source.Value.ItemsSource = data. } What You've Accomplished If you save and run your application you'll observe that the grid is now populated with data from the Products.Attribute("Name"). To customize DataGrid for Silverlight.select new Product { Name = Product. This will enable the grouping area of the grid.xml file: You've successfully bound DataGrid for Silverlight's C1DataGrid control to an XML data source. Add NewRowVisibility="Top" to the <c1grid:C1DataGrid> tag in the XAML window. 2.

Notice that a sort indicator glyph appears to indicate the column being sorted and the direction of the sort. 2. bound the grid to a data source. In the next step you'll explore some of the run-time interactions that are possible in your grid application. Add VerticalGridLinesBrush="Aquamarine" to the <c1grid:C1DataGrid> tag. Click the Name header once to sort the grid by product name. Step 4 of 4: Running the Grid Application Now that you've created a grid application. This changes the color of the vertical grid lines. and customized the grid's appearance and behavior.<c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top"> 4. 10 . This will ensure that the horizontal and vertical scroll bars are always visible. Select Debug | Start Debugging to run your application. The XAML will now look similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible"> 5. Add VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" to the <c1grid:C1DataGrid> tag. To observe ComponentOne DataGrid for Silverlight's run-time interactions. The XAML will now look similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True" NewRowVisibility="Top" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Visible" VerticalGridLinesBrush="Aquamarine"> What You've Accomplished Save and run your application and observe that you've changed the appearance of the grid and the columns that are displayed: You've successfully customized the appearance and behavior of your grid. complete the following steps: 1. the only thing left to do is run your application.

Re-order the columns by clicking the Category column header and dragging it in front of the Name column header: The Category column will now appear before the Name column.You can sort multiple columns by holding the CTRL key while clicking another column. 11 . 4. by clicking the right edge of the column and dragging the edge to a new location. 3. here the Name column. Resize a column.

Note that the vertical scroll bar remains visible. and pressing the Filter button. though content cannot be scrolled vertically. Clear the filter by clicking the Filter icon in the Category column header and clicking the Clear button: 12 . so that only items beginning with that string appear: Notice that the drop-down arrow icon is replaced with a filter icon.5. indicating that the column is filtered. This is because you set the VerticalScrollBarVisibility property to Visible. 6. Filter the content of a column by clicking the drop-down arrow in the Category header. entering "bev" in the filter text box.

Click the X button in the Category column header in the grouping area to no longer group columns by category. Add new data to the grid by clicking in the new row and typing content: 13 . Drag the Category header to the grouping area to group the grid by category: You can repeat this with additional columns to group by multiple criteria.7. 8. 9.

customized the appearance of the grid. Congratulations! You've completed the DataGrid for Silverlight quick start and created a DataGrid for Silverlight grid application. 10. click once on a cell. bound the grid to a data source. and viewed some of the run-time capabilities of your grid application. specifying that a cell in that row is in edit mode. and press the ENTER key: Notice that a pencil icon appears in the row indicator column. 14 . type text to add or change content.Click away from the row or press ENTER for the content you added to be included in the grid. To edit the contents of a cell.

filter. Note that in order for the C1DataGrid user interface to update automatically when items are added to or removed from the source data.Working with DataGrid for Silverlight ComponentOne DataGrid for Silverlight allows you to select. and the appearance of the whole table. You can use the C1DataGrid. add.Silverlight. edit.Silverlight.DataGridRow : System.Object Represents the collection of columns of the data grid. you can generate columns automatically.Object Represents a column in the grid.Object Collection of rows. C1. followed by automatically generated columns. Class Hierarchy The following list summarizes the class relationships between the more important classes included in the DataGrid for Silverlight:     C1. and sort the items displayed in the table generated by the C1DataGrid component. Using the AutoGenerateColumns property. the types of columns to display.Collections. This component is shown in Visual Studio's Toolbox. delete.Controls. You can control which columns are displayed.DataGridColumnHeaderPresenter : System. Each row in the data grid will be bound to an object in the data source.DataGrid.Silverlight. resize and filter elements. You can change the order of rendered columns by setting the DisplayIndex property of the column.DataGridRowCollection : System. C1. C1. The columns of a table created using the C1DataGrid component correspond to the fields in a data source.Control Encapsulates most of the grid functionality.DataGridColumnCollection : System.DataGrid. the control must be bound to a collection that implements INotifyCollectionChanged. ObjectDataProvider. and each column in the data grid will be bound to a property of the data object. or both. such as an ObservableCollection<(Of <(T>)>).C1DataGrid : System.DataGridCell : System.IEnumerable interface (such as XmlDataProvider.DataGrid.DataGrid.Silverlight.Windows.Object Represents an individual grid cell.DataGridColumn : System. C1. Automatically generated columns are now added to the Columns collection. Setting this property to True (default) creates columns automatically when the ItemsSource property is set. DataSet. and so on).ItemsSource property to bind the C1DataGrid.Object Represents a row in the grid.Windows. DataView. Setting this property to False allows you to specify the columns to display. Note: By default explicitly declared columns are rendered first.DataGrid.Controls. 15 .Control Content control that represent the header of a column. C1.    Data Binding ComponentOne DataGrid for Silverlight's C1DataGrid control can be bound to any object that implements the System.Silverlight.Silverlight. manually. C1.Silverlight.DataGrid. which are added to the Columns collection. To bind the grid. simply set the ItemsSource property to an IEnumerable implementation. group. this control contains the sort.

DataGridDateTimeColumn for bound date/time data. This is the default column type for bound numeric data (the format will be inferred from the type. This is the default column type for bound Boolean data. The generated columns are of type DataGridCheckBoxColumn for bound Boolean (and nullable Boolean) properties. This is the default column type for bound string data. The CellTemplate and CellEditingTemplate properties enable you to specify content templates for both display and editing modes. see the DataGrid for Silverlight Quick Start (page 5). DataGridTextColumn DataGridCheckBoxColumn DataGridComboBoxColumn DataGridDateTimeColumn DataGridImageColumn DataGridNumericColumn DataGridTemplateColumn 16 . such as the DataGridTemplateColumn type or custom column types. This is useful if you want to create and configure all columns explicitly. you can let the data grid generate columns. An image column. if the type is int the format will not contain decimal places).See Binding the Grid to an RSS Feed (page 64) and Binding the Grid to a Web Service (page 57) for data binding examples. A date time column (see below for an image). A text column. Defining Columns You can use ComponentOne DataGrid for Silverlight's Columns collection to programmatically add. DataGridComboBoxColumn for bound enum data. A template column for hosting custom content. To rearrange the display order of the columns. This is the default column type for bound enumeration type data. For example. A combo box column. and DataGridNumericColumn for bound numeric data. This is the default column type for bound date/time data. A numeric column. the C1DataGrid control generates columns automatically. You can also specify columns in XAML with or without automatically generating columns. If a property does not have a String or numeric value type. based on the type of data. Bound undefined data is displayed in a DataGridBoundColumn type column. For steps on binding a C1DataGrid control to an XML data source. insert. Column Types ComponentOne DataGrid for Silverlight's C1DataGrid control provides a flexible way to display a collection of data in rows and columns. This is the default column type for bound undefined data. and of type DataGridTextColumn for bound string data. the generated text box columns are read-only and display the data object's ToString value. A check box column. You can prevent automatic column generation by setting the AutoGenerateColumns property to False. Alternatively. Creating your own columns enables you to use additional column types. you can set the DisplayIndex property for individual columns. remove. when you set the ItemsSource property. but handle the AutoGeneratingColumn event to customize columns after creation. The DataGridTemplateColumn type provides an easy way to create a simple custom column. and change any columns in the control at run time. Generating Columns By default. Built-in column types include: Column Type DataGridBoundColumn Description A column that can bind to a property in the grid's data source.

If the AutoGenerateColumns property is False only the columns you have defined will appear in the grid. Select the C1DataGrid control.CustomColumns A custom column. Hyperlink Column. you can use the DataGridColumn Collection Editor to define columns in your grid. Multi line Text Column. and in the Properties window select the ellipsis button next to the Columns(Collection) item in the Miscellaneous group. These column types can provide built-in input validation. Gif Column. Masked Text Column. you can explicitly define columns. The DataGridColumn Collection Editor dialog box will appear: 17 . for example the DataGridDateTimeColumn column includes a calendar for selecting a date: Explicitly Defining Columns If you choose. and so on. In Microsoft Expression Blend. Color Column. See the C1DataGrid_Demo sample for examples ofcustom columns like a Composite Column.

You can also define custom columns in the grid in XAML by using the Columns collection.Header> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <TextBlock Margin="6.Row="1" Grid. Mode=TwoWay}" DisplayIndex="0" SortMemberPath="Available" FilterMemberPath="Available" MinWidth="108" > <C1DataGrid:DataGridColumn.0.0" VerticalAlignment="Center" Text="Available"/> <CheckBox HorizontalAlignment="Left" IsHitTestVisible="True" VerticalAlignment="Center" Grid. --> <C1DataGrid:DataGridCheckBoxColumn Binding="{Binding Available.6.Column="1" Checked="CheckBox_Checked" Unchecked="CheckBox_Checked" Loaded="CheckBox_Loaded"/> </StackPanel> </C1DataGrid:DataGridColumn.ColumnSpan="2" Margin="5" AutoGeneratingColumn="grid_AutoGeneratingColumn" CanUserAddRows="False" ColumnHeaderHeight="30" > <C1DataGrid:C1DataGrid. You can also inherit from DataGridTemplateColumn and set this configuration in the constructor to make your XAML 18 . For example:  XAML <C1DataGrid:C1DataGrid x:Name="grid" Grid.Header> </C1DataGrid:DataGridCheckBoxColumn> <!-Custom "merged" column made with a DataGridTemplateColumn. Adds a check box to the header and listens to its events.Columns> <!-Custom check box column.

DataGrid.Header> <C1DataGrid:DataGridTemplateColumn. Below are examples of customizing column formatting and behavior. If the AutoGenerateColumns property is set to True and columns are automatically generated. Canceling Column Generation You can cancel the generation of specific columns in the AutoGeneratingColumn event. Switch to Source view and add the event handler to instances of the C1DataGrid control.DataGridAutoGeneratingColumnEventArgs) Handles c1dg. --> <C1DataGrid:DataGridTemplateColumn> <C1DataGrid:DataGridTemplateColumn. for example: <c1grid:C1DataGrid x:Name="c1grid" AutoGenerateColumns="True" AutoGeneratingColumn="c1grid_AutoGeneratingColumn"></c1grid:C1DataGrid> You can now add code to the AutoGeneratingColumn event handler to customize the appearance and behavior of automatically generated columns.Silverlight.CellEditingTemplate> </C1DataGrid:DataGridTemplateColumn> </C1DataGrid:C1DataGrid. for example:  Visual Basic Private Sub c1grid_AutoGeneratingColumn(ByVal sender As System.Silverlight.AutoGeneratingColumn event. you can use the following code to cancel the generation of Boolean columns in the grid:  Visual Basic 19 . ByVal e As C1. }  2. Adding the AutoGeneratingColumn Event Handler Complete the following steps to add the AutoGeneratingColumn event handler: 1.DataGrid.Header> <local:MergedColumnEditor ControlMode="Header" /> </C1DataGrid:DataGridTemplateColumn.AutoGeneratingColumn ' Add code here. C1.cleaner. End Sub C# private void c1grid_AutoGeneratingColumn(object sender. you can customize how generated columns are displayed in code by handling the C1DataGrid.CellTemplate> <DataTemplate> <local:MergedColumnEditor ControlMode="Cell" /> </DataTemplate> </C1DataGrid:DataGridTemplateColumn.CellTemplate> <C1DataGrid:DataGridTemplateColumn. Switch to Code view and add an event handler for the AutoGeneratingColumn event.CellEditingTemplate> <DataTemplate> <local:MergedColumnEditor ControlMode="EditingCell" /> </DataTemplate> </C1DataGrid:DataGridTemplateColumn.DataGridAutoGeneratingColumnEventArgs e) { // Add code here. For example.Columns> </C1DataGrid:C1DataGrid> Customizing Automatically Generated Columns You can customize columns even if columns are automatically generated.Object.

Cancel = True End If End Sub  C# private void c1grid_AutoGeneratingColumn(object sender.DataGrid.Column. If e.Object. If e.DataGridAutoGeneratingColumnEventArgs) Handles c1dg.Private Sub c1grid_AutoGeneratingColumn(ByVal sender As System.Object.Silverlight.Property.Column.Header = "Name".Column. you can change the "ProductName" column so that it appears with the "Name" header using the following code:  Visual Basic Private Sub c1grid_AutoGeneratingColumn(ByVal sender As System.Silverlight.Header = "Name" End If End Sub C# private void c1grid_AutoGeneratingColumn(object sender.DataGrid. For example.CanUserMove = False End If End Sub C#  20 . ByVal e As C1.Column.Silverlight.PropertyType Is GetType(Boolean) Then e.AutoGeneratingColumn ' Cancel automatic generation of all Boolean columns. If e.Silverlight.DataGrid.Header.DataGridAutoGeneratingColumnEventArgs e) { // Modify the header of the ProductName column.Column. }  Preventing Column Interaction Using the AutoGeneratingColumn event you can change how end users interact with specific generated columns.DataGridAutoGeneratingColumnEventArgs e) { // Cancel automatic generation of all Boolean columns. you can prevent users from moving read-only columns with the following code:  Visual Basic Private Sub c1grid_AutoGeneratingColumn(ByVal sender As System.PropertyType == typeof(bool)) e.Silverlight.Property.ToString() == "ProductName") e. For example. ByVal e As C1.DataGrid. if (e. C1.ToString() = "ProductName" Then e.IsReadOnly = True Then e.AutoGeneratingColumn ' Modify the header of the ProductName column.Header.DataGrid. } Changing a Column Header In the AutoGeneratingColumn event you can change the text that appears in the header of automatically generated columns. C1. if (e. ByVal e As C1.Object.DataGridAutoGeneratingColumnEventArgs) Handles c1dg.AutoGeneratingColumn ' Modify the header of the ProductName column.Cancel = true.DataGridAutoGeneratingColumnEventArgs) Handles c1dg.

public class DataGridHyperlinkColumn : DataGridBoundColumn { }  Customizing Column Cell Content In this section you'll find information about changing the UI element shown as the content of cells belonging to a column when the cell is not in editing mode.DataItem". that means that this column could potentially use UI elements created by other columns. Navigate to the Solution Explorer. UnbindCellContent: This method is called before the cell content is recycled. Columns returning the same RecyclingKey will be candidates to share the same cell content instances.Silverlight.DataGrid. and so on. Update the class so it appears similar to the following:  Visual Basic Imports C1. Name the class.  21 . For example you can create a Hyperlink column. In the Add New Item dialog box choose Class in the list of templates.private void c1grid_AutoGeneratingColumn(object sender. To implement custom cell content you'll need to override the following methods:    GetCellContentRecyclingKey: Key used to store the cell content for future reuse in a shared pool. you should add a new class file where the custom column will be written. 2. C1. BindCellContent: Initializes the cell content presenter. for example complete the following steps: 1. } Creating Custom Columns ComponentOne DataGrid for Silverlight supports creating specific behavior columns.Column. for example "DataGridHyperlinkColumn". a GIF column. the source which can be set directly in the binding or in the DataContext of the cellContent. Once the file is created it must inherit from DataGridBoundColumn.DataGrid. right-click the project name and select Add│ New Item.Silverlight. CreateCellContent: Creates the visual element that will be used to display the information inside a cell.CanUserMove = false. It’s important to note that cell content UI elements are recycled by the data grid.DataGridAutoGeneratingColumnEventArgs e) { // Modify the header of the ProductName column. a Rich Text column. the SetBinding of the corresponding dependency property being "row.Silverlight. if (e. 3. and click the Add button to add the class to the project. This method must set cellContent properties.Column. you can even customize the header presenter of the column.DataGrid Public Class DataGridHyperlinkColumn Inherits DataGridBoundColumn End Class C# using C1. By creating a custom column you'll be able to customize the cell content and editing content of all the cells belonging to a column. First.IsReadOnly == true) e.

  22 .  Visual Basic Public Overloads Overrides Function GetCellContentRecyclingKey(ByVal row As DataGridRow) As Object Return (GetType(HyperlinkButton)) End Function C#  public override object GetCellContentRecyclingKey(DataGridRow row) { return typeof(HyperlinkButton).NavigateUriProperty. That means this column will not share the cell content element with other columns (unless it would be another column which returned the same key.In the implementation of a hyperlink column the methods might look similar to the example below. the BindCellContent method will be called by the data grid passing the hyperlink as a parameter. In the following method a different key for this column is returned (the default key is typeof(TextBlock)). if (Binding != null) { Binding newBinding = CopyBinding(Binding).SetBinding(HyperlinkButton. HyperlinkButton) If Binding IsNot Nothing Then Dim newBinding As Binding = CopyBinding(Binding) newBinding. the hyperlink will be saved to be used in a future cell:  Visual Basic Public Overloads Overrides Function CreateCellContent(ByVal row As DataGridRow) As FrameworkElement Return New HyperlinkButton() End Function C# public override FrameworkElement CreateCellContent(DataGridRow row) { return new HyperlinkButton(). } The CreateCellContent method will be called by the data grid if there is no recycled hyperlink. newBinding. but that's not likely to happen).HorizontalAlignment = HorizontalAlignment hyperlink. In this method you should set the properties of the hyperlink to bind it to the data of the cell:  Visual Basic Public Overloads Overrides Sub BindCellContent(ByVal cellContent As FrameworkElement.Source = row. In this case a new hyperlink will be created which will be used in the cell once the cell that contains the hyperlink is unloaded. DataGridRow row) { var hyperlink = (HyperlinkButton)cellContent.DataItem hyperlink.Source = row.DataItem.VerticalAlignment = VerticalAlignment End Sub C# public override void BindCellContent(FrameworkElement cellContent. newBinding) End If hyperlink. ByVal row As DataGridRow) Dim hyperlink = DirectCast(cellContent. } After the hyperlink is created or a recycled one is taken.

Complete the following steps: 1. } Note that you can also set the data item as the data context of the hyperlink instead of setting it in the Source property of the binding. hyperlink.DataItem hyperlink. Adding Properties to a Custom Column You may want to add properties to a column in order to set a specific behavior.NavigateUriProperty.DataItem C# Hyperlink.HorizontalAlignment = HorizontalAlignment.DataContext = row. This property allows the user to specify the name of the target window or frame where the page will open. newBinding) End If hyperlink. } Visual Basic Public Overloads Overrides Sub BindCellContent(ByVal cellContent As FrameworkElement.hyperlink.VerticalAlignment = VerticalAlignment hyperlink. } hyperlink.SetBinding(HyperlinkButton.DataItem. ByVal row As DataGridRow) Dim hyperlink = DirectCast(cellContent.DataContext = row.NavigateUriProperty.SetBinding(HyperlinkButton. Continuing with the hyperlink column created in the previous topics. For example:   Visual Basic Hyperlink. HyperlinkButton) If Binding IsNot Nothing Then Dim newBinding As Binding = CopyBinding(Binding) newBinding. Once the property is created you'll propagate this to the hyperlink in the BindCellContent method:   23 . this technique is does not perform as well as setting the binding source property directly.Source = row.VerticalAlignment = VerticalAlignment. Although you will end up with the same result. newBinding).TargetName = TargetName End Sub C#  2.HorizontalAlignment = HorizontalAlignment hyperlink. in this topic you'll add a property called TargetName. set. Add the following code to create the TargetName property:  Visual Basic Private _TargetName As String Public Property TargetName() As String Get Return _TargetName End Get Set(ByVal value As String) _TargetName = value End Set End Property C# public string TargetName { get.

Some of these rows are implemented internally and others are provided as samples. hyperlink. } hyperlink. hyperlink. You could create a grid where the first row has a TextBox in each cell and when you type on it the grid is filtered by the typed text as in the following image: 24 . When creating a custom row you'll be able to change the following parts:    Cells content Row presenter Row header presenter See Customizing Row Cell Content (page 24) for more details.VerticalAlignment = VerticalAlignment.SetBinding(HyperlinkButton. Name. this scenario will work correctly if you set a converter type which converts the string to a double.Source = row. if (Binding != null) { Binding newBinding = CopyBinding(Binding). Suppose you want to bind a numeric column against a string property. DisplayFormatAttribute.HorizontalAlignment = HorizontalAlignment.NavigateUriProperty. Currently supported attributes include: DisplayAttribute (AutoGenerateFilter. hyperlink. template row.public override void BindCellContent(FrameworkElement cellContent. For example. summary row. totals row. suppose you wanted to build a filter row. DataGridRow row) { var hyperlink = (HyperlinkButton)cellContent. newBinding. SortMemberPath. group row. Order). filter row. public DataGridHyperlinkColumn(PropertyInfo property) : base(property)  You can set a converter in the binding to help you to manage scenarios where you need to use a column bound to property source that is not the same type. and so on. FilterMemberPath and Header properties as well as properties set using custom attributes. } Tips You may find the following tips helpful when adding properties to a custom column:  Provide a constructor that takes PropertyInfo as parameter calling base(property) in order to automatically set the Binding. GroupName. newBinding).TargetName = TargetName. Creating Custom Rows You may be able to solve several scenarios by creating custom rows like a new row.DataItem. Customizing Row Cell Content This topic explains how to customize cell content. and EditableAttribute.

25 . for example "DataGridFilterRow". UnbindCellContent: This method is called before the cell content is recycled.DataGrid Public Class DataGridFilterRow Inherits DataGridRow End Class C# using C1. because all columns will have a corresponding cell. right-click the project name and select Add│ New Item. In other scenarios like a summary row. 2. 4. CreateCellContent: Creates a visual element that will be used to display information inside a cell in this column. you can use it to implement filtering in the grid.Adding a Class File You would need to add a new class file where the custom row will be written.Silverlight. For example. Overriding Methods The methods you would need to override to specify the cell content of custom row are very similar to those exposed in custom columns.Silverlight. GetCellContentRecyclingKey: Key used to store the cell content for future reuse in a shared pool.  In the filter row the HasCellPresenter method will return always true. Rows returning the same RecyclingKey can share the same cell content instances. Navigate to the Solution Explorer. In the Add New Item dialog box choose Class in the list of available templates. Name the class. Once you've added the class. only the columns where there is an aggregate function will have a cell. BindCellContent: Initializes the cell content presenter. public class DataGridFilterRow : DataGridRow { } This will update the class to inherit from DataGridRow. complete the following steps to add a new class file: 1. 3. and click the Add button to add the class to the project. To implement custom cell content you'd need to override the following methods:      HasCellPresenter: Determines whether a cell should exist for this row and the specified column. Once the file is created it must inherit from DataGridRow. Update the class so it appears similar to the following:  Visual Basic Imports C1.DataGrid.

//If the column doesn't have a FilterMemberPath specified //it won't allow entering text in the TextBox. TextBox) 'If the column doesn't have a FilterMemberPath specified 'it won't allow entering text in the TextBox. which allows recycling the text boxes. Add the following code to the BindCellContent method:  Visual Basic Protected Overrides Sub BindCellContent(cellContent As FrameworkElement. column As DataGridColumn) Dim filterTextBox = DirectCast(cellContent. } protected override FrameworkElement CreateCellContent(DataGridColumn column) { return new TextBox().Text = "Not available" Else filterTextBox.FilterMemberPath)) {  26 . If String. and the CreateCellContent will create a new instance of it. but these controls currently do not do anything.IsEnabled = False filterTextBox.Text = "" filterTextBox.FilterMemberPath) Then filterTextBox. if (string.IsNullOrEmpty(column. DataGridColumn column) { var filterTextBox = (TextBox)cellContent. filterTextBox.IsNullOrEmpty(column. Add the following code to  Visual Basic Protected Overrides Function GetCellContentRecyclingKey(column As DataGridColumn) As Object Return GetType(TextBox) End Function Protected Overrides Function CreateCellContent(column As DataGridColumn) As FrameworkElement Return New TextBox() End Function  C# protected override object GetCellContentRecyclingKey(DataGridColumn column) { return typeof(TextBox). to implement filtering complete the following steps: 1.The GetCellContentRecyclingKey method will return typeof(TextBox). } Implementing Filtering In the previous steps you added a TextBox in each cell.IsEnabled = True End If ' Handle TextChanged to apply the filter to the column.TextChanged += New EventHandler(Of TextChangedEventArgs)(filterTextBox_TextChanged) End Sub C# protected override void BindCellContent(FrameworkElement cellContent.

or you can add custom rows on top or bottom of data item rows. For example. DataGridColumn column) { var filterTextBox = (C1SearchBox)cellContent. filterTextBox.Text = "".IsEnabled = false. filterTextBox.Text = "Not available". In UnbindCellContent you must remove the text changed handler to avoid leaking memory:  Visual Basic Protected Overrides Sub UnbindCellContent(cellContent As FrameworkElement. in the following image the rows were replaced with template rows: 27 . filterTextBox.TextChanged -= New EventHandler(Of TextChangedEventArgs)(filterTextBox_TextChanged) End Sub C# protected override void UnbindCellContent(FrameworkElement cellContent. Replacing Data Item Row In order to replace the rows generated by the data grid you must add a handler to the CreatingRow event. } 2. } // Handle TextChanged to apply the filter to the column.TextChanged += new EventHandler<TextChangedEventArgs>(filterTextBox_TextChanged).TextChanged -= new EventHandler<TextChangedEventArgs>(filterTextBox_TextChanged).IsEnabled = true.filterTextBox. C1SearchBox) filterTextBox. }  Adding a Custom Row to the Data Grid You can replace rows the data grid uses to show the data of each data item or group with custom rows. filterTextBox. column As DataGridColumn) Dim filterTextBox = DirectCast(cellContent. } else { filterTextBox.

For example. DataGridCreatingRowEventArgs e) { //Check if it's an item row (it could be a group row too). e As DataGridCreatingRowEventArgs) 'Check if it's an item row (it could be a group row too).Row = new DataGridTemplateRow() { RowTemplate = (DataTemplate)Resources["TemplateRow"] }. summary row. in XAML or code:  XAML <c1dg:C1DataGrid> <c1dg:C1DataGrid.Row = New DataGridTemplateRow() With { _ .The following code replaces the default row with a template row:  Visual Basic Private Sub C1DataGrid_CreatingRow(sender As Object.Type == DataGridRowType.TopRows> <c1dg:C1DataGrid. This functionality is used in the new row. } }  Adding an Extra Row ComponentOne DataGrid for Silverlight allows adding one or more rows on top or bottom of data.BottomRows> <local:DataGridFilterRow/> 28 . DataTemplate) _ } End If End Sub C# private void C1DataGrid_CreatingRow(object sender. and filter row scenarios. If e. total row.RowTemplate = DirectCast(Resources("TemplateRow").TopRows> <local:DataGridFilterRow /> </c1dg:C1DataGrid.Type = DataGridRowType. if (e.Item Then e.Item) { e.

for each required culture.</c1dg:C1DataGrid. If your translation is only for the invariant culture. Using the RowDetailsVisibilityMode property the row details section can be displayed for selected rows. set the current culture. And. This row details section can display more details information about a specific row's content. or it can be collapsed.NET Windows forms.resx files should be placed in the Resources subfolder of your project.de. where:   XXX is the name of the ComponentOne assembly. Localization Conventions To localize the grid you would need to set up resource files for each localized culture. the . Setting Row Details Visibility (page 39) for more information. Adding Row Details Each grid row in ComponentOne DataGrid for Silverlight can be expanded to display a row details section.BottomRows> </c1dg:C1DataGrid>   Visual Basic grid. See the following topic for details and the Localizing the Grid (page 71) tutorial for an example. The following conventions are recommended when creating .resx – Invariant culture resource for the C1. displayed for all rows.resx file does not need to contain a culture suffix. RowDetailsTemplate. with the extension . Localizing the Application You can localize (translate) end user visible strings in ComponentOne DataGrid for Silverlight. For an example. Localization in DataGrid for Silverlight is based on the same approach as the standard localization of . you will need to complete the following steps: 1. C1.DataGrid. Add resource files for each culture that you wish to support.Silverlight. see the RowDetailsTemplate (page 43) topic.YYY.resx. you can create a set of resource files for the DataGrid for Silverlight assembly. Files should be named as follows: XXX. To localize your application.resx resource files:   All .resx – German (de) resource for the C1.Rows. 3. C1.TopRows. that specifies the appearance of the section and the data to be displayed. 2.Silverlight. When the application runs you can switch between those resources and between languages. YYY is the culture code of the resource. For example:   Localization Strings 29 .Silverlight. depending on your project.DataGrid.Rows.resx.Add(New DataGridFilterRow()) C# grid.Silverlight. Update your project file's supported cultures. The row details section is defined by a DataTemplate.TopRows.Add(new DataGridFilterRow()).DataGrid assembly. Adding Resource Files As with Windows Forms. You can create separate resource files. Note that all parts of your application using components from a DataGrid for Silverlight DLL must use the same localization resource.DataGrid assembly.

Text that appears in the filter bar for text ComboBoxFilter_SelectAll DateTimeFilter_End DateTimeFilter_Start EmptyGroupPanel Filter_Clear Filter_Filter NumericFilter_And NumericFilter_Equals Select All End Start Drag a column here to group by that column Clear Filter And Equals NumericFilter_GraterOrEquals Greater/Equals NumericFilter_Greater Greater NumericFilter_Less Less NumericFilter_LessOrEquals Less/Equals NumericFilter_NotEquals Not Equals NumericFilter_Or TextFilter_Contains Or Contains TextFilter_StartsWith Starts With TextFilter_Equals Equals 30 . Text that appears in the filter for date time columns for the start of the date time range. Text that appears in the filter bar to add a filter condition.The following table lists strings that can be added to an . Text that appears in the filter for text columns to indicate if the filter condition should apply to items that contain the value of the condition. Text that appears in the filter for text columns to indicate if the filter condition should apply to items that start with the value of the condition. Text that appears in the filter bar for numeric columns to indicate multiple filter conditions. Text that appears in the grouping area of the grid when no columns are grouped. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to items with lower values than the condition value. Text that appears in the filter bar to clear the filter condition. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to exact matches only. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to items with higher values than the condition value. Text that appears in the filter bar for numeric columns to indicate multiple filter conditions. Text that appears in the filter for date time columns for the end of the date time range. Text that appears in the filter for check box columns to select all items. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to items that are not an exact match. Text that appears in the filter for check box columns to indicate if the column should be filtered for checked or unchecked items.resx file to localize your application: String AddNewRow CheckBoxFilter_Checked Default Value Click here to add a new row Checked : Description Text that appears in the add new row. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to items with higher values than the condition value or exact matches only. Text that appears in the filter bar for numeric columns to indicate the filter condition should apply to items with lower values than the condition value or exact matches only.

Thread.vbproj file. In the . and Russian. }  31 . Spanish. 2.Threading.CultureInfo("fr-FR"). By default.Globalization. you can set the desired culture in your application using the following code:  Visual Basic Public Sub New() ' Set desired culture.CurrentUICulture = New System. 3. 4. for example here the French (France) locale. To do so.csproj file. right-click your project and select Unload Project. for example here the French (France) locale. Italian. you will need to set the supported cultures for your project. InitializeComponent(). ' Add any initialization after the InitializeComponent() call.CurrentThread.CurrentUICulture = new System. separating each with a semicolon. System.es. locate the <SupportedCultures></SupportedCultures> tags. list the cultures you want to be supported. right-click your project and choose Reload Project from the content menu. // Add any initialization after the InitializeComponent() call. If you want to use a culture other than the current culture.csproj option (or Edit ProjectName. and select the Edit ProjectName. In the Solution Explorer. TextFilter_NotEquals Not Equals Text that appears in the filter bar for text columns to indicate the filter condition should apply to items that are not an exact match. For example: <SupportedCultures>fr. In the Solution Explorer. Save and close the . System.CurrentUICulture. Right click the project again.vbproj. the current culture is designated as System.Thread.columns to indicate the filter condition should apply to exact matches only.csproj or .CurrentThread. Adding Supported Cultures Once you've created resource files for your application.Thread. In between the tags.en. 5.ru</SupportedCultures> This will support French.CurrentThread. InitializeComponent() End Sub C# public MainPage() { // Set desired culture. The project will appear grayed out and unavailable. where ProjectName is the name of your project).Threading. complete the following steps: 1.Globalization.Threading. Setting the Current Culture The C1DataGrid control will use localization files automatically according to the culture selected in the application as long as you haven't moved files to another location or excluded files from the project. English. // InitializeComponent() call. The project will be reloaded and will now support the specified cultures.it.CultureInfo("fr-FR") ' InitializeComponent() call.

False by default. Determines if users can sort this column at run time. True by default. True by default. True by default. You can change how users interact with the grid. True by default. Determines if users can change the number of frozen columns by dragging the freezing separator at run time. Determines if users can group rows at run time. Determines if users can sort columns at run time by clicking on a column's header. If True. Determines if users can resize this column at run time. The following table lists properties that you can use to customize how users interact with the grid: Property CanUserAddRows CanUserEditRows CanUserFilter CanUserGroup CanUserRemoveRows CanUserReorderColumns CanUserResizeColumns CanUserResizeRows CanUserSort CanUserToggleDetails CanUserFreezeColumns Description Determines if users can add rows at run time. Determines if users can toggle the row details section's visibility. True by default. None by default. True by default. Determines if users can reorder columns at run time by using a drag-and-drop operation. the filter bar will be visible on columns. Determines if users can edit rows at run time. True by default. Determines if users can remove rows at run time by pressing the DELETE key. Determines if users can filter columns at run time. Setting Selection Mode You can set the grid's selection mode behavior by setting the SelectionMode property. the filter bar will be visible on this column. but setting the SelectionMode property to one of the following values: 32 . Determines if users can filter this column at run time. True by default. If True. True by default. If True the grouping area of the grid will be visible. and prevent actions such as filtering columns and resizing rows. True by default.Enabling or Disabling End User Interaction You can customize how much control end users have over the grid at run time. False by default. For example you can enable grouping. Note: The properties set in the grid take precedence over those set in columns. True by default. In each column you can customize the following properties: Property CanUserMove CanUserResize CanUserFilter CanUserSort Description Determines if users can reorder this column at run time. True by default. Determines if users can resize rows at run time. Determines if users can resize columns at run time.

In XAML To set the grid to deferred scrolling mode. see the Multiple Row Selection (page 46) topic. real time scrolling is used and as a user moves the thumb button or clicks the scroll button the grid scrolls. add ScrollMode="Deferred" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" ScrollMode="Deferred"> In Code 33 . Locking the Grid By default users can interact and edit the grid and columns in the grid. You can determine how the grid is scrolled by setting the ScrollMode property. (A range is the rectangle delimited by two cells) The user can select multiple rows while holding down the corresponding modifier key. For example:   Visual Basic c1dg. The user can select multiple cells ranges while holding down the corresponding modifier key.Option None SingleCell SingleRow SingleColumn SingleRange MultiRow (Default) MultiColumn MultiRange Description The user can not select any item. The example below set the grid to deferred scrolling mode. For more information about modifier keys and the MultiRow option. The user can select only one column at a time.IsReadOnly = True C# c1dg. The user can select only one row at a time. The user can select only one cell at a time. In XAML To lock the grid from being edited. you can set the grid or specific columns in the grid to not be editable with the IsReadOnly property. In deferred scrolling. The user can select only one cells range at a time. The user can select multiple columns while holding down the corresponding modifier key.IsReadOnly = true. If you choose. You might want to implement deferred scrolling in your application if the grid contains a large amount of data or to optimize scrolling. You can set the ScrollMode property to a C1DataGridScrollMode enumeration option. Deferred and Real Time Scrolling ComponentOne DataGrid for Silverlight supports both real time and deferred scrolling. By default. set the IsReadOnly property to True. either RealTime (default) or Deferred. the grid does not move as the scrollbar thumb is moved. the grid is not scrolled until the user releases the scrollbar thumb. add IsReadOnly="True" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" IsReadOnly="True"> In Code To lock the grid from editing.

ScrollMode = C1DataGridScrollMode.Deferred C# c1dg. You can think of a collection view as a layer on top of a binding source collection that allows you to navigate and display the collection based on sort.ScrollMode = C1DataGridScrollMode. When you add the control to your application. Paging the grid can decrease load time and allow users to interact more easily with the control. You use the PagedCollectionView class to provide grouping. filter. sorting. Next. Using the C1DataPager Control and PagedCollectionView Class So suppose you might set the C1DataGrid control's ItemsSource property with the following code:   Visual Basic c1dg. ComponentOne DataGrid for Silverlight supports paging through the use of the C1DataPager control and the PagedCollectionView class.ItemsSource = data C# c1dg.To set the grid to deferred scrolling mode. For example:   Visual Basic c1dg.ItemsSource = data C# c1dg. for example in XAML markup: <c1ria:C1DataPager Source="{Binding ItemsSource. it will appear similar to the following image: The control includes First. you might want to add paging to your C1DataGrid control. C1DataPager Control The C1DataPager control is very similar to the standard Microsoft DataPager control. Previous. PagedCollectionView Class The C1DataPager control provides a convenient user interface for controlling paging with a PagedCollectionView. Paging Grid Data If you are displaying a large amount of data in the grid or have a limited amount of space in your application. set the ScrollMode property to Deferred.ItemsSource = new PagedCollectionView(data). and paging functionality for any collection that implements the IEnumerable interface. filtering. And then you might bind the C1DataPager control to the C1DataGrid control.Deferred. Instead. you might set the C1DataGrid control's ItemsSource property with the following code:   Visual Basic c1dg. You can include this control in your application. and group queries. and by setting the PageSize property on the control allow the grid to be paged by any amount you choose.ItemsSource = data. all without having to manipulate the underlying source collection itself. and Last buttons by default as well as a text box listing the current page and total number of pages. ElementName=c1dg}" HorizontalAlignment="Left" Name="c1DataPager1" VerticalAlignment="Top" PageSize="5" /> 34 . using the PagedCollectionView class.

headers. style and template properties that you can use to completely change the appearance of the control and its rows. such as alternating row backgrounds and the ability to show or hide headers. Note that ComponentOne DataGrid for Silverlight uses ClearStyle technology for styling. see the Theming topic.DataGrid for Silverlight's Appearance The C1DataGrid control supports common table formatting options. When you first add a C1DataGrid control to the page. For details. All of the built-in themes are based on Silverlight Toolkit themes. The built-in themes are described and pictured below. note that in the images below. and scroll bars. For more information about how to use themes in Silverlight. see ComponentOne ClearStyle Technology. the control provides several brush. Additionally. C1DataGrid Themes ComponentOne DataGrid for Silverlight incorporates several themes that allow you to customize the appearance of your grid. and cells. You can change this appearance by using one of the built-in themes or by creating your own custom theme. grid lines. a cell has been selected and the mouse is hovering over another cell to show both selected and hover styles: 35 . it appears similar to the following image: This is the control's default appearance. columns.

Theme Name C1ThemeBureauBlack Theme Preview C1ThemeExpressionDark C1ThemeExpressionLight 36 .

C1ThemeRainierOrange C1ThemeShinyBlue C1ThemeWhistlerBlue For more information about how to use themes in Silverlight. Table Formatting Options The following topics detail table formatting options. including grid headers and placement of table objects. 37 . see the Theming topic.

You can set the HeadersVisibility property to one of the following options: Option None Column Row All (default) Description Neither row nor column headers are visible in the grid.Setting Row and Column Header Visibility By default row and column headers are visible in the grid. However. Both column and row headers are visible in the grid. Only row headers are visible in the grid. you can change its location by setting the NewRowVisibility property. if you choose. You can set the GridLinesVisibility property to one of the following options: Option None Horizontal Vertical All (default) Description Neither horizontal nor vertical grid lines are visible in the grid. if you choose. The Add New row appears at the bottom of the grid. The chosen scrollbar appears only when the content of the grid is exceeds the grid window. Setting New Row Visibility By default the Add New row is located at the bottom of the grid. Both horizontal and vertical grid lines are visible in the grid. and even disable them altogether. Setting Grid Line Visibility By default vertical and horizontal grid lines are visible in the grid. The chosen scrollbar appears to be hidden. Only horizontal grid lines are visible in the grid. if you choose. Only column headers are visible in the grid. by setting the VerticalScrollbarVisibility and HorizontalScrollbarVisibility properties. if you choose. Setting Vertical and Horizontal Scrollbar Visibility By default the grid's horizontal and vertical scrollbars are only visible when the height or width of grid content exceeds the size of the grid. You can set the VerticalScrollbarVisibility and HorizontalScrollbarVisibility properties to one of the following options: Option Disabled Auto (default) Hidden Visible Description The chosen scrollbar is disabled. You can set the NewRowVisibility property to one of the following options: Option Top Bottom (default) Description The Add New row appears at the top of the grid. However. 38 . However. you can set one or both sets of grid lines to be hidden by setting the GridLinesVisibility property. The chosen scrollbar is always visible. you can set the scrollbars to be always or never visible. Only vertical grid lines are visible in the grid. However. you can set one or both of the headers to be hidden by setting the HeadersVisibility property.

Setting Row Details Visibility
By default row details are collapsed and not visible. You can use the RowDetailsVisibilityMode property to set if and when row details are visible. You can set the RowDetailsVisibilityMode property to one of the following options:
Option VisibleWhenSelected Visible Collapsed (default) Description Row details are only visible when selected. Row details are always visible. Row details appear collapsed and are not visible.

C1DataGrid Brushes
ComponentOne DataGrid for Silverlight's C1DataGrid control provides several brush properties that you can use to completely change the appearance of the control and its rows, columns, headers, and cells. Some of the included brushes are described in the table below:
Brush Background Description Gets or sets the background brush that is used when rendering. (This brush will be applied to all the parts of the data grid) Gets or sets the foreground brush that is used when rendering. (This brush will be applied to all the parts of the data grid) Gets or sets the border brush that is used when rendering. (This brush will be applied to some of the parts of the data grid depending on the theme) Gets or sets the selected brush that is used when rendering selected rows and row and column headers, etc. Gets or sets the mouse over brush that is used when mouse is over rows and row and column headers, etc. Gets or sets the background brush of a row. Gets or sets the foreground brush of a row. Gets or sets the background brush of an alternating row. Gets or sets the foreground brush of an alternating row. Gets of sets the brush applied to the horizontal lines. Gets of sets the brush applied to the vertical lines.

Foreground

BorderBrush

SelectedBrush

MouseOverBrush RowBackground RowForeground AlternatingRowBackground AlternatingRowForeground HorizontalGridLinesBrush VerticalGridLinesBrush

ComponentOne DataGrid for Silverlight uses ClearStyle technology for styling. For details, see ComponentOne ClearStyle Technology.

C1DataGrid ClearStyle
DataGrid for Silverlight supports ComponentOne's new ClearStyle technology that allows you to easily change control colors without having to change control templates. By just setting a few color properties you can quickly style the entire grid.

39

You can completely change the appearance of the C1DataGrid control by simply setting a few properties, such as the C1DataGrid.Background property which sets the color scheme of the C1DataGrid control. For example, if you set the Background property to "#FF663366" so the XAML markup appears similar to the following: <c1grid:C1DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1dg" VerticalAlignment="Top" CanUserFreezeColumns="Left" CanUserGroup="True" Background="#FFFFFFCC"/> The grid will appear similar to the following image:

If you set the Background property to "#FF663366" and the Foreground property to "White", so the XAML markup appears similar to the following: <c1grid:C1DataGrid HorizontalAlignment="Left" Margin="10,10,0,0" Name="c1dg" VerticalAlignment="Top" CanUserFreezeColumns="Left" CanUserGroup="True" Background="#FF663366" Foreground="White"/> The grid will appear similar to the following image:

You can even set the Background property to a gradient value, for example with the following XAML: <c1grid:C1DataGrid x:Name="c1dg" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" CanUserFreezeColumns="Left" CanUserGroup="True">

40

<c1grid:C1DataGrid.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="GreenYellow" Offset="0.0" /> <GradientStop Color="YellowGreen" Offset="0.85" /> </LinearGradientBrush> </c1grid:C1DataGrid.Background> </c1grid:C1DataGrid> The grid will appear similar to the following image:

It's that simple with ComponentOne's ClearStyle technology! For more information, see ComponentOne ClearStyle Technology topic.

C1DataGrid Styles
ComponentOne DataGrid for Silverlight's C1DataGrid control provides several style properties that you can use to completely change the appearance of the control and its rows, columns, headers, and cells. Some of the included styles are described in the table below:
Style CellStyle ColumnHeaderStyle DragOverColumnStyle DragSourceColumnStyle Description Gets or sets the style that is used when rendering the cells. Gets or sets the style that is used when rendering the column headers. Style applied to a ContentControl element used to show the dragged column while it is moved. Style applied to a ContentControl that is placed over the source column when it starts the drag-and-drop operation. Style applied to a ContentControl element used to indicate the position where the dragged column will be dropped. Gets or sets the style used for the filter control container. Sets the style of the internal Rectangle used to show the focus on the C1DataGrid.

DropIndicatorStyle

FilterStyle FocusStyle

41

42 . Once you've created a new template. Gets or sets the style that is used when rendering the row header for entering new items. Gets or sets the style that is used when rendering the row headers.GroupColumnHeaderStyle GroupRowHeaderStyle GroupRowStyle NewRowHeaderStyle NewRowStyle RowHeaderStyle RowStyle Gets or sets the style that is used when rendering the column headers in the group panel. C1DataGrid Template Parts In Microsoft Expression Blend. the parts of the template will appear in the Parts window: Note that you may have to select the ControlTemplate for its parts to be visible in the Parts window. Gets of sets the style of the group row. Gets or sets the style that is used when rendering the rows. click the C1DataGrid control to select it and choose Object | Edit Template | Edit a Copy). you can view and edit template parts by creating a new template (for example. Gets or sets the style that is used when rendering the row for entering new items. Once you have done so. you can double-click any element to create that part in the template. Gets of sets the style of the header of the group row. the part will appear in the template and the element's icon in the Parts pane will change to indicate selection: Template parts available in the C1DataGrid control include: Name Body Type DataGridMainPanel Description Panel that contains the DataGridRowPresenter. In the Parts window.

--> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Name}" Margin="0. Presenter that displays the grouping panel or another element if there is no columns in the grouping panel. Represents a control that provides a scroll bar that has a sliding Thumb whose position corresponds to a value. controls. Root RowsHeader VerticalScrollBar Grid DataGridRowsHeaderPanel ScrollBar RowDetailsTemplate The RowDetailsTemplate template controls the appearance of the row details area. you can create an empty template at design time by selecting the C1DataGrid control and then clicking Object | Edit Other Templates | Edit RowDetailsTemplate | Create Empty.RowDetailsTemplate> 43 .0. --> <DataTemplate> <Border BorderBrush="DarkGray" BorderThickness="1" Background="Azure"> <StackPanel Orientation="Horizontal"> <StackPanel> <StackPanel Orientation="Horizontal"> <!-. the following template includes bound and unbound text and check boxes: <c1grid:C1DataGrid. The row details section appears below a row and can display additional information. Panel that contains DataGridRowsHeaderPanel. Defines a flexible grid area that consists of columns and rows. --> </c1grid:C1DataGrid. For example.Begin row details section. You can include text.Controls are bound to properties. Represents a control that provides a scroll bar that has a sliding Thumb whose position corresponds to a value. In Expression Blend. Mode=TwoWay}" VerticalAlignment="Center" /> </StackPanel> <TextBlock FontSize="12" Text="Notes: " /> <TextBox FontSize="12" Text="{Binding Notes. Mode=TwoWay}" Width="420" TextWrapping="Wrap"/> </StackPanel> </StackPanel> </Border> </DataTemplate> <!-.ColumnsHeader Grouping HorizontalScrollBar DataGridColumnsHeaderPanel DataGridGroupingPresenter ScrollBar Panel that contains a collection of DataGridColumnsHeaderPanel.RowDetailsTemplate> <!-.10. including controls bound to data. and more in the RowDetailsTemplate.End row details section.0" VerticalAlignment="Bottom" /> <TextBlock FontSize="12" Text="Order Date: " VerticalAlignment="Bottom"/> <TextBlock FontSize="12" Text=" Complete:" VerticalAlignment="Bottom" /> <CheckBox IsChecked="{Binding Complete.

If the focus is in the last row. sorting. Moves the focus to the cell directly above the current cell. end users should use the Command (or Apple) key in place of the CTRL key: Key Combination DOWN Arrow UP Arrow LEFT ARROW Description Moves the focus to the cell directly below the current cell. If the focus is in the first row. RIGHT Arrow 44 . Keyboard and Mouse Navigation ComponentOne DataGrid for Silverlight supports several run-time keyboard and mouse navigation options that provide increased accessibility. pressing the UP ARROW does nothing. Moves the focus to the previous cell in the row. Moves the focus to the next cell in the row. If the focus is in the last cell in the row. The following topics detail some of these end-user interactions. If the focus is in the first cell in the row. and grouping data. pressing the RIGHT ARROW does nothing.Run-time Interaction The image below highlights some of the run-time interactions possible in a ComponentOne DataGrid for Silverlight C1DataGrid control: The following topics detail these run-time features including filtering. pressing the DOWN ARROW does nothing. Note that on Apple computers. pressing the LEFT ARROW does nothing. Keyboard Navigation The following table lists several keyboard shortcuts that can be used to navigate and manipulate the grid at run time.

scrolls the grid to fully display the first row. commits any changes that were made and moves the focus to the last cell in the previous row. Scrolls the control upward by the number of rows that are displayed. moves the focus to the next editable cell in the current row. Moves the focus to the last cell in the current row. end users should use the Command (or Apple) key in place of the CTRL key: Mouse Action Click an unselected row Description Makes the clicked row the current row. If the current cell is not in edit mode. moves the focus to the previous control in the tab order of the parent container. PAGE UP TAB SHIFT+TAB If the current cell is in edit mode.HOME END PAGE DOWN Moves the focus to the first cell in the current row. If the focus is already in the first cell of the row. the grid begins editing the first editable cell of the new row. moves the focus to the previous control in the tab order of the parent container. 45 . CTRL+DOWN ARROW CTRL+UP ARROW CTRL+RIGHT ARROW CTRL+LEFT ARROW CTRL+HOME CTRL+PAGE DOWN CTRL+PAGE UP ENTER F2 Moves the focus to the last cell in the current column. Same as PAGE DOWN. ESC DEL INSERT Mouse Navigation The following table lists several mouse and keyboard shortcuts that can be used to navigate and manipulate the grid at run time. Cancel editing of a cell or new row. If the focus is already in the last cell of the row. scrolls the grid to fully display the last row. If the current cell is not in edit mode. Moves the focus to the first cell in the current column. If the first row is only partially displayed. moves the focus to the next control in the tab order of the parent container. Enter edit mode on a selected cell (if the grid and column's IsReadOnly properties are False). Moves the focus to the first cell in the control. Moves focus to the first displayed row without changing columns. Scrolls the control downward by the number of rows that are displayed. Scrolls to the new row and begins editing it. Same as PAGE UP. Moves the focus to the last displayed row without changing columns. commits any changes that were made and moves the focus to the first editable cell in the next row. If the focus is on the new row. If the focus is in the first cell in the control. Delete selected row. Moves the focus to the first cell in the current row. moves the focus to the previous editable cell in the current row. Enter/exit edit mode on a selected cell (if the grid and column's IsReadOnly properties are False). If the focus is in the last cell in the control. Moves the focus to the last cell in the current row. Note that on Apple computers. If the current cell is in edit mode. If the last row is only partially displayed. moves the focus to the next control in the tab order of the parent container.

clicking a row while pressing CTRL or SHIFT will modify a multi-row selection. or columns). If the property ColumnHeaderClickAction is set to Select the column will be selected if SelectionMode supports column selection. the selection includes all rows between the anchor row and the current row. Subsequent clicks while pressing SHIFT changes the current row.Click a cell in the current row Drag a column header cell Puts the clicked cell into edit mode. When you click a row while pressing SHIFT. Multiple Row Selection If the SelectionMode property is set to MultiRow. Pressing the CTRL key while clicking multiple column headers will sort by multiple columns in the order clicked. Modifies a contiguous multi-row selection (if SelectionMode support multiple rows. the navigation behavior does not change. the control marks the current row as an anchor row. Before navigation starts. When you navigate while pressing SHIFT. the selection includes all rows between the current row and an anchor row located at the position of the current row before the first click. but not the anchor row. when the user clicks the column header it sorts the column (if the CanUserSortColumns property is True and the CanUserSort property is True for the current column). 46 . cells. If the property ColumnHeaderClickAction is set to Sort. cells. Selection Keys The following selection keys modify multi-row selection:         SHIFT+DOWN ARROW SHIFT+UP ARROW SHIFT+PAGE DOWN SHIFT+PAGE UP CTRL+SHIFT+DOWN ARROW CTRL+SHIFT+UP ARROW CTRL+SHIFT+PAGE DOWN CTRL+SHIFT+PAGE UP Mouse Selection If the SelectionMode property is set to MultiRow. Resizes the column (if the CanUserResizeColumns property is True and the CanUserResize property is True for the current column). but navigating with the keyboard and mouse while pressing SHIFT (including CTRL+SHIFT) will modify a multi-row selection. Drag a column header separator Click a column header cell CTRL+click a row SHIFT+click a row Modifies a non-contiguous multi-row selection (if SelectionMode support multiple rows. Clicking the header of a column that is already sorted will reverse the sort direction of that column. Moves the column so that it can be dropped into a new position (if the CanUserReorderColumns property is True and the current column's CanUserReorder property is True). or columns).

complete the following steps: 1.Windows. For example. Custom Keyboard Navigation You can add your own custom navigation to the C1DataGrid control. }  2. Switch to Code view and add an event handler for the KeyDown event. Switch to Source view and add the event handler to instances of the C1DataGrid control. The column resizing cursor appears: 2.Object. for example:  Visual Basic Private Sub c1grid_KeyDown(ByVal sender As System. for example.KeyEventArgs) Handles c1dg. you can take a look at the hierarchical grid example (C1_MDSL_RowDetail) in the ControlExplorer sample. Custom keyboard navigation enables you to control how users interact with the grid. Resizing Columns and Rows Users can easily resize columns and rows at run time through a drag-and-drop operation.Input. you could set up navigation between parent and child grids. all the rows will be selected though. In a hierarchical grid. To resize columns at run time. Adding the KeyDown Event Handler Complete the following steps to add the KeyDown event handler: 1. for example: <c1grid:C1DataGrid x:Name="c1grid" AutoGenerateColumns="True" KeyDown="c1grid_KeyDown"></c1grid:C1DataGrid> You can now add code to the KeyDown event handler to customize the default navigation. Navigate the mouse to the right border of a column's header. Click the mouse and drag the cursor to the left or the right to resize the column: 47 . ByVal e As System. if the SHIFT key is pressed. you can prevent users from navigating to read-only columns or cells with null values. if you are in the first row and you press CTRL + DOWN you will navigate to the last row. the arrow keys will navigate to the border cells. For an example.KeyDown ' Add code here. KeyEventArgs e) { // Add code here. End Sub C# private void c1grid_KeyDown(object sender.If the CTRL key is pressed when navigating. To add custom keyboard navigation you would need to handle the KeyDown event and then add code to override the default navigation with your customized navigation.

See the Disabling Column Reordering (page 92) topic for more details. See the Disabling Column and Row Resizing (page 93) topic for more details. Drag the column header to where you wish the column to be ordered. Reordering Columns End users can easily reorder columns at run time. To filter a column's text at run time. Click the column header for the column you wish to reorder.3. Note that the CanUserResizeColumns and CanUserResizeRows properties must be set to True (default) for column and row resizing to be possible. allowing users to filter columns by specific criteria at run time. Release the mouse to complete the column resize operation. 2. Note that the CanUserReorderColumns property must be set to True (default) for column reordering to be possible. complete the following steps: 1. Filtering Columns ComponentOne DataGrid for Silverlight incorporates a filter column element in the user interface. Resize rows in a similar way by dragging the row indicator column. To reorder columns at run time. Notice that a line will appear if you can place the column in that location: 3. complete the following steps: 1. Click the drop-down arrow in a text column's header: 48 . Release the mouse to place the column in its new location and reorder the columns.

The following filter options may be included:  Text Columns In text columns. Filter options vary depending on the column type.2. are equivalent to. Enter the text in the filter text box that you want the column to be filtered by. The column will be sorted. and click the Filter button. or are not equivalent to the filter condition:  Boolean Columns Boolean check box columns can be filtered by whether items in the column are checked or not:  Numeric Columns Numeric columns offer several options for filtering: 49 . start. the filter bar appears similar to the following: You can filter the column by whether items in the column contain.

Sorting Columns Sorting grid columns at run time is simple in ComponentOne DataGrid for Silverlight.You can filter the column by specific condition: And you can use the And and Or radio buttons to filter by multiple conditions: Note that the CanUserFilter property must be set to True (default) for filtering to be possible. a sort direction indicator. appears when a column is sorted: 50 . To sort columns click once on the header of the column that you wish to sort. You will notice that the sort glyph.

Grouping Columns Users can group columns in your grid at run time to better organize information. notice that the sort glyph changes direction.You can click once again on the column header to reverse the sort. Sort multiple columns by sorting one column and then holding the CTRL key while clicking on a second column header to add that column to your sort condition. drag a column header onto the grouping area: 51 . in the following image the Category column was first sorted. and then the Name column was reverse sorted: Note that the CanUserSort property must be set to True (default) for sorting to be possible. For example. The grouping area at the top of the grid allows you to easily group columns through a simple drag-and-drop operation: To group a column.

simply click the X button next to a grouped column in the grouping area of the grid: 52 . by clicking the column header in the grouping area. In the following image the grouped column has been reverse sorted: You can group multiple columns by performing a drag-and-drop operation to drag additional columns to the grouping area: To remove the grouping.You can sort the display of grouped items.

The freeze bar enables users to freeze columns. the freeze bar appears to the left of the first columns by default: To freeze specific columns. When visible.Note that the CanUserGroup property must be set to True for the grouping area to be visible and grouping to be possible (by default it is set to False). Freezing Columns Users can freeze columns at run time to prevent them from being scrolled horizontally. For example. they are not scrolled when the grid is scrolled horizontally. in the following image the freeze bar was moved to the right of the second columns: Once columns are frozen. move the freeze bar to the right of the column(s) you want to freeze. For more information. For example. For more information about showing the grouping area. see Enabling Grouping in the Grid (page 91). see the Showing the Grouping Area (page 92) topic. This is useful as it keeps specific columns visible when the grid is resized or scrolled. in the following image the first two columns are frozen: 53 .

Complete the following steps to edit cell content: 1. Double-click the cell you would like to edit. Editing content is as simple as selecting a cell and deleting or changing the content in that cell.Note that the ShowVerticalFreezingSeparator property must be set to Left (by default None) for the freeze bar to be visible and the CanUserFreezeColumns property must be set to Left (by default None) to allow users to freeze columns are run time. 2. Editing Cells Users can easily edit cell content at run time. See Enabling Column Freezing (page 95) for an example. A cursor will appear in that cell indicating that it can be edited and a pencil icon will appear in the row indicator column. Delete text or type in new or additional text to edit the content of the cell: 3. indicating that a cell in that row is in edit mode. Press ENTER or click away from the cell you are editing for the changes you made to take effect: 54 .

allows you to type in new information to add to the grid at run time: To add a new row. See Disabling Cell Editing (page 96) for an example.The pencil icon indicating editing will no longer be visible. Note that the CanUserEditRows property must be set to True (default) for editing to be possible. located at the bottom of the grid by default and indicated by an asterisk symbol (*). The new row bar. simply type text into the new row bar: Press ENTER for text to be added to the grid in a new row: 55 . Adding Rows to the Grid You can add rows to the grid at run time using the new row bar.

56 .Note that the CanUserAddRows property must be set to True (default) for row adding to be possible. See Disabling Adding Rows (page 96) for an example.

for example "ComponentOneDataGrid".xaml item. In the <UserControl> tag. In Visual Studio. 7. If the MainPage. select File | New | Project. replace Width="400" Height="300" (or d:DesignWidth="400" d:DesignHeight="300") with Width="600" Height="400".Grid Layout--> <Grid. Click OK to accept the default settings. navigate to the Solution Explorer and double-click on the MainPage. locate the <UserControl> tag. Enter a Name for your project. and behavior customization steps and highlight advanced features. You'll then continue by creating and customizing the application's user interface (UI) and adding the C1DataGrid control to your project. 4. place the cursor just above the </Grid> tag and click once. Place the cursor just after the <Grid x:Name="LayoutRoot" Background="White"> tag and add the following markup: <!-.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> tag: <!-. complete the following steps: 1. and create your project. styling. 8.xaml. close the New Silverlight Application dialog box.Title --> <TextBlock Text="ComponentOne DataGrid for Silverlight" Margin="5" FontSize="16"/> In the XAML window of the project. select a language in the left pane and in the templates list select Silverlight Application. This will increase the size of your Silverlight application. To set up your project. In the XAML view.DataGrid for Silverlight Tutorials The following tutorials provide additional information about ComponentOne DataGrid for Silverlight and walk through steps to further customize your grid. The New Silverlight Application dialog box will appear. 2. Add a title to your application by adding the following TextBlock just under the </Grid. Binding the Grid to a Web Service The following tutorial will walk you through the process of binding the C1DataGrid control to the standard Northwind database and creating a Web Service. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. 10.xaml file is not currently open. The XAML markup will now look similar to the following: 57 . 6.RowDefinitions> This row definition will define the layout of your grid. Tutorials include additional data binding. 3. 9. In the New Project dialog box. 5. and click OK. Step 1 of 3: Creating the User Interface In this step you'll begin in Visual Studio to create a Silverlight grid application.

Row="2" /> This TextBlock will be used to display status information text.MainPage" xmlns="http://schemas. but the grid is blank and contains no data.DataGrid" x:Class="C1DataGrid.DataGrid. 13.microsoft.com/winfx/2006/xaml" Width="600" Height="400"> <Grid x:Name="LayoutRoot" Background="White"> <!-.Web) and if the App_Data folder is not visible. 58 . You've successfully created a basic grid application.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.assembly=C1. Step 2 of 3: Adding a Database and Web Service In this step you'll add a database to your project.Grid Layout--> <Grid.Web project (for example ComponentOneDataGrid.DataGrid namespace and <c1grid:C1DataGrid></c1grid:C1DataGrid> tags have been added to the project.Silverlight. delete it so it appears similar to the following: <c1grid:C1DataGrid> 12. complete the following steps: 1.Title --> <TextBlock Text="ComponentOne DataGrid for Silverlight" Margin="5" FontSize="16"/> <c1grid:C1DataGrid></c1grid:C1DataGrid> </Grid> </UserControl> Note that the C1.Row="1"> 14.Web project. and select Add | New Folder. and observe that your page includes a title.microsoft. and text below the grid. and begin the process of binding the grid. Name the folder "App_Data".Silverlight.RowDefinitions> <!-. Give your grid a name by adding x:Name="_c1DataGrid" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="_c1DataGrid"> By giving the control a unique identifier. To set up your project. Add the following markup just after the </c1grid:C1DataGrid> tag: <TextBlock x:Name="_tbStatus" Text="Ready" VerticalAlignment="Center" FontSize="12" Foreground="Gray" Margin="5" Grid. 11. expand the . If the <c1grid:C1DataGrid> tag includes existing content.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid. What You've Accomplished Run your application.Silverlight. In the Solution Explorer.Row="1" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="_c1DataGrid" Grid. a grid. both of which should be installed with the Studio for Silverlight samples. Note that in this step you'll be using the standard Northwind database and an example code file. right click the . you'll be able to access the C1DataGrid control in code.<UserControl xmlns:c1grid="clrnamespace:C1. Define the location of your grid by adding Grid. In the next steps you'll add a database to your project and bind the grid to a data source.

select the NWIND.Services. using C1_MDSLWeb. 8. Delete the existing HelloWorld method and replace it with the following code:  Visual Basic <WebMethod> _ Public Function GetData(tables As String) As Byte() ' Create DataSet with connection string Dim ds = GetDataSet() ' Load data into DataSet ds.ScriptService] or <System.2.Services."C)) ' Persist to stream Dim ms = New System.Data.Web project (for example ComponentOneDataGrid. you can find the SmartDataSet. In the Solution Explorer.MemoryStream() ds. using System. select the Web item. and select Add | Existing Item. 6.asmx". In the Solution Explorer.MDB file you just added. and click the Add button. right-click the . and click Add to add it to your project. 9. 7. XmlWriteMode. select the SmartDataSet.WriteSchema) ' Return stream data Return ms. Next. // SmartDataSet namespace 10.Web project and select Add | New Item. In the Solution Explorer. In the Add Existing Item dialog box.IO. select Web Service.Web. In the DataService.asmx file.DataGrid\C1DataGrid_MDSL\C1_MDSLWeb directory within the Documents or My Documents folder.cs file.Silverlight. 3. and click Add to add it to your project.ScriptService()> line.Script.Fill(tables.Split(". 5. 12. add the following using statements at the top of the file:  11.IO. In the left pane of the Add New Item dialog box.ToArray() End Function Private Function GetDataSet() As SmartDataSet ' Get physical location of the mdb file 59 .Data Imports C1_MDSLWeb ' SmartDataSet namespace C# using System. Note that the Web Service file will be added to your project and automatically opened. This will allow the Web Service to be called from script. right click the App_Data node. 4. select the NWIND.IO Imports System. In the templates list. In the Add Existing Item dialog box. Note that for Visual Basic projects. navigate to the ComponentOne Samples\Studio for Silverlight\C1.WriteXml(ms.DataGrid\C1DataGrid_MDSL\C1_MDSLWeb\App_Data directory within the Documents or My Documents folder.  Visual Basic Imports System. right-click the . navigate to the ComponentOne Samples\Studio for Silverlight\C1. uncomment the [System. and in the Properties window set its Build Action property to None In the Solution Explorer.Silverlight.vb file posted online in the forums.Web) and select Add | Existing Item.Web. name the Web Service "DataService.mdb file.Script. This file contains code allowing data transfer to and from the database.

// Check that the file exists if (!File.Format("Cannot find database file {0}. // Persist to stream var ms = new System. // Load data into DataSet ds. mdb) Throw New FileNotFoundException(msg) End If ' Make sure file is not read-only (source control often does this.GetAttributes(mdb) If (att And FileAttributes.jet..ReadOnly.Request. } // Create and initialize the SmartDataSet 60 .4.SetAttributes(mdb. } SmartDataSet GetDataSet() { // Get physical location of the mdb file string mdb = Path. } // Make sure file is not read-only (source control often does this.".PhysicalApplicationPath.Format("Cannot find database file {0}. ds.GetAttributes(mdb). throw new FileNotFoundException(msg). @"App_Data\nwind.Combine( Context. mdb).MemoryStream().Combine(Context.')).0.Split('.oledb.SetAttributes(mdb. att) End If ' Create and initialize the SmartDataSet Dim dataSet = New SmartDataSet() dataSet..ToArray().ReadOnly) != 0) { att &= ~FileAttributes.". "App_Data\nwind. att)..mdb"). XmlWriteMode.data source=" & mdb Return dataSet End Function  C# [WebMethod] public byte[] GetData(string tables) { // Create DataSet with connection string var ds = GetDataSet().Fill(tables.mdb") ' Check that the file exists If Not File.WriteXml(ms.PhysicalApplicationPath. if ((att & FileAttributes..Dim mdb As String = Path.) FileAttributes att = File.[ReadOnly]) <> 0 Then att = att And Not FileAttributes.IO.[ReadOnly] File.ConnectionString = "provider=microsoft. File.Exists(mdb) Then Dim msg As String = String.Exists(mdb)) { string msg = string.) Dim att As FileAttributes = File. // Return stream data return ms.Request.WriteSchema).

data source=" + mdb.IO Imports C1. Step 3 of 3: Connecting the Web Service In the previous step you created a Web Service and added a database to your project.Web project and will return to working with the ComponentOneDataGrid project. 13.Data assembly and click OK. 3. 4. C# using System.asmx file will appear in the list of Services. } This code will create a dataset and take data from the database. In the Solution Explorer.  8. add a reference to the C1. Right-click the . dataSet. Note that you'll now be done with the ComponentOneDataGrid. 2. change this if the name of your project is different.Silverlight. // ComponentOneDataGrid is the project's namespace. Add the following import statements at the top of the file:  Visual Basic Imports System.oledb. What You've Accomplished In this step you've added a database to your project and created a Web Service.xaml node and double-click the MainPage. 7. In this step you'll continue by linking the Web Service to your application. Add LoadData().DataService. to the MainPage constructor so it appears like the following:  Visual Basic Public Sub New() InitializeComponent() LoadData() End Sub 61 .Web project (for example ComponentOneDataGrid.DataService ' ComponentOneDataGrid is the project's namespace.vb file to open it in the Code Editor. expand the MainPage. return dataSet.ConnectionString = "provider=microsoft. expand the project's node.Silverlight. using ComponentOneDataGrid.var dataSet = new SmartDataSet().xaml. The DataService. 5. In the Add Service Reference dialog box click the Discover button. change this if the name of your project is different.xaml. right-click the project name and select Add Service Reference from the context menu. In the next step you'll finish connecting the Web Service to your project and you'll run your application.Web) and select Build from the context menu.Silverlight. In the Namespace text box. right-click the project name (for example ComponentOneDataGrid) and select Add Reference from the context menu. In the Solution Explorer. using C1.0. Note that this step requires ComponentOne Data for Silverlight. To set up your project.Data.cs or MainPage. change the default value to "DataService" and click the OK button to save your settings and close the dialog box.Data Imports ComponentOneDataGrid. In the Solution Explorer.jet.4.IO. In the Add Reference dialog box. complete the following steps: 1. 6.

GetDataAsync("Categories.Length / 1024) Dim ms = New MemoryStream(e. void LoadData() { // Invoke Web Service var svc = GetDataService().ReadXml(ms) ' Bind control to the data BindData() End Sub C# DataSet _ds = null.Text = "Error downloading data.Result) _ds = New DataSet() _ds. {0:n0} kBytes".Text = String. } void svc_GetDataCompleted(object sender. svc.Text = string. C# public MainPage() { InitializeComponent().[Error] IsNot Nothing Then _tbStatus..Result. } // Parse data stream from server (DataSet as XML) _tbStatus.Result.GetDataAsync("Employees") End Sub Private Sub svc_GetDataCompleted(sender As Object.Employees"). GetDataCompletedEventArgs e) { // Handle errors if (e. LoadData(). //svc. 9.GetDataCompleted. e. Add the LoadData and svc_GetDataCompleted methods to retrieve data from the Web Service:   62 .Products. _ds = new DataSet(). {0:n0} kBytes"..GetDataAsync("Employees").". svc.Text = "Error downloading data.Format("Got data.Format("Got data.Result). AddressOf svc_GetDataCompleted 'svc. return.GetDataAsync("Categories. var ms = new MemoryStream(e..GetDataCompleted += svc_GetDataCompleted. e." Return End If ' Parse data stream from server (DataSet as XML) _tbStatus.Error != null) { _tbStatus. svc. } Visual Basic Private _ds As DataSet = Nothing Private Sub LoadData() ' Invoke Web Service Dim svc = GetDataService() AddHandler svc..Employees"). e As GetDataCompletedEventArgs) ' Handle errors If e.Length / 1024).Products.

_ds.ServiceModel. Implement the GetDataService() method by adding the following code:  Visual Basic ' Get data service relative to current host/domain Private Function GetDataService() As DataServiceSoapClient ' Increase buffer size Dim binding = New System.Silverlight. address) End Function C# // Get data service relative to current host/domain DataServiceSoapClient GetDataService() { // Increase buffer size var binding = new System.ServiceModel.Tables("Employees") ' Populate categories grid _c1DataGrid. // int. // Bind control to the data BindData().EndpointAddress(uri) ' Return new service client Return New DataServiceSoapClient(binding.BasicHttpBinding().EndpointAddress(uri).asmx").MaxValue ' Get absolute service address Dim uri As Uri = C1.MaxBufferSize = 2147483647. var address = new System.   63 .Silverlight.MaxReceivedMessageSize = 2147483647 ' int. } 10.DefaultView End Sub C# void BindData() { // Get the tables DataTable dtEmployees = _ds. // int.MaxReceivedMessageSize = 2147483647. // Return new service client return new DataServiceSoapClient(binding.ReadXml(ms).BasicHttpBinding() binding.asmx") Dim address = New System.MaxValue binding.MaxValue binding.ServiceModel.MaxValue // Get absolute service address Uri uri = C1.ServiceModel.MaxBufferSize = 2147483647 ' int.Tables["Employees"]. address).GetAbsoluteUri("DataService.Extensions. } 11. binding.GetAbsoluteUri("DataService.Extensions.ItemsSource = dtEmployees. Implement the BindData() method by adding the following code:  Visual Basic Private Sub BindData() ' Get the tables Dim dtEmployees As DataTable = _ds.

ItemsSource = dtEmployees. 2. Run your application and observe that the grid appears bound to the Employees table of the Northwind database: What You've Accomplished Congratulations. Enter a Name for your project. 4. select a language in the left pane and in the templates list select Silverlight Application. select File | New | Project. added an Access database. Click OK to accept the default settings. and create your project. In Visual Studio. close the New Silverlight Application dialog box. 64 .DefaultView. 3. if you choose. Note that in this example. Complete the following steps: 1. Binding the Grid to an RSS Feed The following tutorial will walk you through the process of binding the C1DataGrid control to an RSS feed. The New Silverlight Application dialog box will appear.aspx . Note that you can substitute another RSS feed in the steps below. and click OK. you will be binding the grid to the ComponentOne Buzz RSS news feed at http://helpcentral.componentone. for example "C1DataGridRSS".// Populate categories grid _c1DataGrid. C1DataGridRSS) and select Add Reference. and created a Web Service to bind the C1DataGrid control.com/CS/blogs/c1buzz/rss. In the New Project dialog box. you've completed this tutorial! In this tutorial you created a new Silverlight project. right-click the project name (for example. In the Solution Explorer window. } 12.

componentone.assembly=C1. The XAML markup will now look similar to the following: <UserControl xmlns:c1grid="clrnamespace:C1. you'll be able to access the C1DataGrid control in code. Add AutoGenerateColumns="True" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1grid" AutoGenerateColumns="True"> This way the grid will automatically generate and display data from the data source.Silverlight. locate the System.Xml. In the Solution Explorer. place the cursor between the <Grid> and </Grid> tags and click once. delete it so it appears similar to the following: <c1grid:C1DataGrid></c1grid:C1DataGrid> Give your grid a name by adding x:Name="c1grid" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1grid"> By giving the control a unique identifier.MainPage" xmlns="http://schemas. 6. In the Add Reference dialog box.aspx") AddHandler client. AddressOf client_DownloadStringCompleted client. 10.DataGrid" x:Class="C1DataGrid. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. add an event handler and set up a WebClient object to read from the RSS feed with the following code:  Visual Basic Public Sub New() InitializeComponent() Dim client As New WebClient() Dim uri As New Uri("http://helpcentral. 11.DownloadStringAsync(uri) End Sub 65 .Xml.com/CS/blogs/c1buzz/rss. Add the following import statement at the top of the file:   Visual Basic Imports System.microsoft. If the <c1grid:C1DataGrid> tag includes existing content.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <c1grid:C1DataGrid></c1grid:C1DataGrid> </Grid> </UserControl> Note that the C1.Silverlight.DataGrid namespace and <c1grid:C1DataGrid></c1grid:C1DataGrid> tags have been added to the project. In the XAML window of the project.microsoft.Xml. 12.cs file to open it in the Code Editor. 8.xaml.5.Linq library and click OK to add a reference to your project. 7. 9.DataGrid.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.Linq C# using System. 13. expand the MainPage.DownloadStringCompleted.xaml.xaml node and double-click the MainPage.Linq. In the MainPage constructor.Silverlight.

ByVal e As DownloadStringCompletedEventArgs) Dim xmlNews As XDocument = XDocument.Element("title"). C# public MainPage() { InitializeComponent(). Uri uri = new Uri("http://helpcentral.com/CS/blogs/c1buzz/rss. client.Value. 14. Add the News class:  Visual Basic Public Class News Public Property Title() As String Get Return m_Title End Get Set(ByVal value As String) m_Title = Value End Set End Property Private m_Title As String Public Property Link() As String Get Return m_Link End Get Set(ByVal value As String) m_Link = Value End Set End Property Private m_Link As String End Class C# public class News { public string Title { get. if you choose.Title = story.DownloadStringAsync(uri). WebClient client = new WebClient(). } Note that you can substitute another RSS feed for the ComponentOne Buzz feed.ItemsSource = news End Sub C# void client_DownloadStringCompleted(object sender. set. .Parse(e. set.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted).Value} c1grid.componentone. } public string Link { get.Element("link"). DownloadStringCompletedEventArgs e)  15.Result) Dim news = From story In xmlNews. client. } } Visual Basic Private Sub client_DownloadStringCompleted(ByVal sender As Object.Link = story. Add the client_DownloadStringCompleted event handler:   66 .aspx").Descendants("item") _ Select New News With {.

67 . select File | New | Project.{ XDocument xmlNews = XDocument. Step 1 of 3: Setting up the Master/Detail Grid In this step you'll begin in Visual Studio to create a Silverlight grid application using ComponentOne DataGrid for Silverlight. a list of products is loaded and shown in the detail view using a second C1DataGrid control.Result). To set up your project and add a C1DataGrid control to your application. For each row in the main grid (categories). } 16. and learned how to bind the grid to an RSS feed. c1grid. complete the following steps: 1. For more information.Descendants("item") select new News { Title = (string)story. In Visual Studio. you've completed this tutorial! In this topic you created a new Silverlight project. var news = from story in xmlNews. Link = (string)story. The following example shows a set of product categories loaded from a XML file using LINQ to XML. The detail data is loaded when the detail view of a category row changes.Parse(e. You'll create a new Silverlight project and add the C1DataGrid control to your application. added a C1DataGrid control. Run your application and observe that the grid appears bound to the ComponentOne Buzz RSS news feed: What You've Accomplished Congratulations.Element("title").Element("link") }. see the C1DataGrid_Demo sample installed with ComponentOne Studio for Silverlight.ItemsSource = news. Creating a Master/Detail View The following tutorial will walk you through using the C1DataGrid control to present data in a master/detail view using the row details feature.

and create your project. 5. Add Margin="5" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserAddRows="False" Margin="5"> This will add a margin around the grid. Step 2 of 3: Adding a Data Source to the Project In this step you'll add a data source to your application and add external files to set up the data source. 7.xml and Data.Silverlight.openxmlformats. delete it so it appears similar to the following: <c1grid:C1DataGrid></c1grid:C1DataGrid> Give your grid a name by adding x:Name="c1dg" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg"> By giving the control a unique identifier.MainPage" xmlns="http://schemas.microsoft. you'll be able to access the C1DataGrid control in code.assembly=C1. In the Solution Explorer window.Silverlight. by default. Rename the folder "Resources". In the New Project dialog box. 3. complete the following steps: 1. 4. Note that to simplify the tutorial. this step uses files included with the C1DataGrid_Demo sample included with the Studio for Silverlight installation.DataGrid\C1DataGrid_Demo\C1DataGrid_Demo directory.xaml.DataGrid" x:Class="MasterDetail. In the XAML window of the project. and click OK. select a language in the left pane (in this example. products. Enter "MasterDetail" in the Name text box.Silverlight.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas. 68 . right-click the MasterDetail project and select Add | New Folder.cs will be installed in the Documents or My Documents folder in the ComponentOne Samples\Studio for Silverlight\C1.2. place the cursor between the <Grid> and </Grid> tags and click once.microsoft. 8. What You've Accomplished You've successfully created a basic grid application.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft. close the New Silverlight Application dialog box.com/expression/blend/2008" xmlns:mc="http://schemas. To add a data source. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. 6. C# is used).DataGrid. 9. and in the templates list select Silverlight Application. The New Silverlight Application dialog box will appear. The XAML markup will now look similar to the following: <UserControl xmlns:c1grid="clrnamespace:C1. Click OK to accept the default settings.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <Grid x:Name="LayoutRoot"> <c1grid:C1DataGrid></c1grid:C1DataGrid> </Grid> </UserControl> If the <c1grid:C1DataGrid> tag includes existing content. In the next step you'll add a XML data source to your project. Add CanUserAddRows="False" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserAddRows="False"> Users will not be able to add new rows to the grid.

In the Solution Explorer window. 4. In the Add Reference dialog box. and click Add.Linq. Step 3 of 3: Setting up Row Details In this step you'll finish setting up the row details section of the grid.2. right-click the project and select Add Reference. Add code to the Page constructor to set the ItemsSource property:  69 . Select the products. This file contains code to set up the data source. Right-click the page and select View Code in the context menu to open the Code Editor. you'll set up the row details section and finalize the application.Linq and System. In the Solution Explorer window. using C1. and in the Properties window set its Build Action property to Embedded Resource. In the next step.ComponentModel. In the Add Existing Item dialog box. 2.Xml. right-click the Resources folder and select Add | Existing Item. import the following namespaces:  C# using System.xml file. select the products. C# public MainPage() 4. In the Code Editor.RowDetailsTemplate> between the <c1grid:C1DataGrid></c1grid:C1DataGrid> tags so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserAddRows="False" Margin="5"> <c1grid:C1DataGrid. In the Solution Explorer.Silverlight. using C1DataGrid_Demo. This file provides that data you'll use in the project. 5.RowDetailsTemplate> </c1grid:C1DataGrid> This template will customize the row details section display. Add LoadedRowDetailsPresenter="c1dg_LoadedRowDetailsPresenter" LoadingRow="c1dg_LoadingRow" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserAddRows="False" LoadedRowDetailsPresenter="c1dg_LoadedRowDetailsPresenter" LoadingRow="c1dg_LoadingRow"> Later you'll add handlers for these events in code.DataGrid.xml file in the Solution Explorer. 3. To set up row details. 3. navigate to the C1DataGrid_Demo sample folder. navigate to the C1DataGrid_Demo\Resources sample folder.RowDetailsTemplate> <DataTemplate> <c1grid:C1DataGrid HeadersVisibility="Column" Margin="5" CanUserAddRows="False"/> </DataTemplate> </c1grid:C1DataGrid. 6. right-click the MasterDetail project and select Add | Existing Item.DataAnnotations and click OK to add the reference.Xml. In the Add Existing Item dialog box. Add the following <c1grid:C1DataGrid. select the Data. complete the following steps: 1. 5. and click Add.cs file. What You've Accomplished In this step you added an XML data source. You'll add a RowDetailsTemplate to set the appearance of the details row. and you'll add code to set up the details row behavior. locate System. 6.

if (detailGrid. c1dg.DataGrid. } } What You've Accomplished If you save and run your application you'll observe that the grid is now populated with data from the products.DataItem as Subcategory). C1.ProductSubcategoryID.{ InitializeComponent(). Add code for the c1dg_LoadingRow event to the MainPage class to set the row details visibility for the first row:  C# private void c1dg_LoadingRow(object sender.C1DataGrid.Parse(product.DetailsVisibility = Visibility. and that the first row's details section is visible: 70 . } 7. detailGrid.ItemsSource = Data.Silverlight.ItemsSource = Data.Silverlight.ItemsSource == null) { int subcategory = (e.Row. Add code for the c1dg_LoadedRowDetailsPresenter event to the MainPage class:  C# private void c1dg_LoadedRowDetailsPresenter(object sender.DetailsVisibility == Visibility.DataGrid.Row.Element("ProductSubcategoryID") != null && product.Element("ProductSubcategoryID").GetSubCategories(null).Row.Take(10). } } } 8.Silverlight.DataGridRowDetailsEventArgs e) { if (e.Element("ProductSubcategoryID").Index == 0) { e.C1DataGrid detailGrid = e.Value != "" && int. DataGridRowEventArgs e) { if (e.DataGrid.Row.Take(10).Value) == subcategory).Visible.xml file.GetProducts((product) => product.Visible) { C1.DetailsElement as C1.

Complete the following steps: 1. Step 1 of 3: Setting up the Localized Grid In this step you'll create a Silverlight grid application using ComponentOne DataGrid for Silverlight. In the New Project dialog box. and click OK. Click OK to close the New Silverlight Application dialog box and create your project. you'll localize the visible grid strings in an existing application. In Visual Studio. see Localizing the Application (page 29). and in the templates list select Silverlight Application. click the arrow icon in the row header of a row: You've completed this tutorial and learned how to set up row details in the grid to display a master/detail grid view.NET localization. 71 . Localizing the Grid Localizing ComponentOne DataGrid for Silverlight for various audiences is a fairly simple process as localization in Silverlight is based on the standard . You'll create a new Silverlight project. The New Silverlight Application dialog box will appear. 2.To collapse the row details section or expand another's row detail section. For more information about localization. select a language in the left pane. add the C1DataGrid control to your application. Enter "C1DataGridLocalization" in the Name text box. select File | New | Project. In this tutorial. 3. and bind the grid.

In the Solution Explorer. place the cursor between the <Grid> and </Grid> tags and click once. right-click the MainPage.DataGrid" x:Class="C1DataGridLocalization. 12.Silverlight. Add CanUserGroup="True" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg" CanUserGroup="True"> 7.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.com/winfx/2006/xaml" Width="450" Height="300"> <Grid x:Name="LayoutRoot"> <c1grid:C1DataGrid></c1grid:C1DataGrid> </Grid> </UserControl> If the <c1grid:C1DataGrid> tag includes existing content. 8.Silverlight. right-click the C1DataGridLocalization project and select Build. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. 9.4.microsoft.assembly=C1. 11. you'll be able to access the C1DataGrid control in code. In the Solution Explorer. 5.xaml.xaml file and click View Code in the context menu to open the Code Editor. Add the following code to the project to create the Data class:  Visual Basic Public Class Data Private _ProductName As String Public Property ProductName() As String Get Return _ProductName End Get Set(ByVal value As String) _ProductName = value End Set End Property Private _Description As String Public Property Description() As String Get Return _Description End Get Set(ByVal value As String) _Description = value End Set End Property Private _Quantity As Integer 72 . The XAML markup will now look similar to the following: <UserControl xmlns:c1grid="clrnamespace:C1. 10.MainPage" xmlns="http://schemas. In the XAML window of the project.DataGrid. 6.microsoft. replace Width="400" (or d:DesignWidth="400") with Width="450" to increase its size. In the <UserControl> tag. delete it so it appears similar to the following: <c1grid:C1DataGrid></c1grid:C1DataGrid> Give your grid a name by adding x:Name="c1dg" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="c1dg"> By giving the control a unique identifier.

} } Visual Basic Public Sub New() InitializeComponent() ' Add data to a data source.ProductName = "Name".Public Property Quantity() As Integer Get Return _Quantity End Get Set(ByVal value As Integer) _Quantity = value End Set End Property Private _InStock As Boolean Public Property InStock() As Boolean Get Return _InStock End Get Set(ByVal value As Boolean) _InStock = value End Set End Property End Class  C# public class Data { public string ProductName { get. Add the following code to the MainPage constructor to populate the grid:  73 . } public bool InStock { get.Quantity = i. // Add data to a data source. } public string Description { get.1 source. set. c1dg. set. set. List<Data> source = new List<Data>(). . . } public int Quantity { get.Add(New Data With { . set. .Description = "Description". Dim source As New List(Of Data)() Dim itemsCount As Integer = 25 For i As Integer = 0 To itemsCount .InStock = (i Mod 2 = 0) }) Next ' Set the grid's ItemsSource property.ItemsSource = source End Sub  C# public MainPage() { InitializeComponent(). int itemsCount = 25. 13.

Add(new Data() { ProductName = "Name". Right-click the Resources folder. and in the context menu select Add | New Item. In the next step. 5. Quantity = i. right-click the C1DataGridLocalization project and choose Add | New Folder.Silverlight. In the Solution Explorer.resx". you'll add a resource file to localize the grid.es. } // Set the grid's ItemsSource property. If the resource file did not automatically open. InStock = (i % 2 == 0) }). } What You've Accomplished In this step you created a new Silverlight application. Step 2 of 3: Adding a Resource File In this step. double-click the file name in the Solution Explorer. you can add multiple resources files to your project. select Resources File in the templates pane.DataGrid.Silverlight. you'll begin by adding a resource file to your application.for (int i = 0. 6. In the Add New Item dialog box. 1. Name the folder you just created "Resources". 3. Description = "Description". In the C1. add the following Names and Values: Name AddNewRow CheckBoxFilter_Checked ComboBoxFilter_SelectAll DateTimeFilter_End DateTimeFilter_Start EmptyGroupPanel Filter_Clear Filter_Filter NumericFilter_And NumericFilter_Equals NumericFilter_GraterOrEquals NumericFilter_Greater NumericFilter_Less NumericFilter_LessOrEquals Value Click here to add a new row Checked: Select All End Start Drag a column here to group by that column Clear Filter And Equals Greater/Equals Greater Less Less/Equals 74 .resx file. and click Add to add the file to your project. c1dg.DataGrid. added a C1DataGrid control. i < itemsCount. name the file "C1. Note that if you choose. 2. i++) { source.ItemsSource = source. and bound the control to a data source. 4.

In the C1.es.es. Save and close the resource file. name the file "C1.resx". 9.DataGrid. Right-click the Resources folder.resx file. 8. and in the context menu select Add | New Item. Save and close the resource file. add the following Names and Values to add Spanish localization: Name AddNewRow CheckBoxFilter_Checked ComboBoxFilter_SelectAll DateTimeFilter_End DateTimeFilter_Start EmptyGroupPanel Filter_Clear Filter_Filter NumericFilter_And NumericFilter_Equals NumericFilter_GraterOrEquals NumericFilter_Greater NumericFilter_Less NumericFilter_LessOrEquals NumericFilter_NotEquals NumericFilter_Or TextFilter_Contains TextFilter_StartsWith TextFilter_Equals TextFilter_NotEquals Value Cliquee aquí para agregar un nuevo renglón Seleccionado: Seleccionar todo Fin Inicio Arrastre una columna aquí para agrupar Borrar Filtrar Y Igual Mayor o igual Mayor Menor Menor o igual Diferente O Contiene Empieza con Igual Diferente 12.NumericFilter_NotEquals NumericFilter_Or TextFilter_Contains TextFilter_StartsWith TextFilter_Equals TextFilter_NotEquals Not Equals Or Contains Starts With Equals Not Equals 7. This file will localize the application to Spanish. If the resource file did not automatically open.DataGrid. see Adding Resource Files (page 29). double-click the file name in the Solution Explorer.Silverlight. 10. For information on file naming. and click Add to add the file to your project.Silverlight. In the Add New Item dialog box. 11. 75 . select Resources File in the templates pane.

right-click the MainPage. 2.CurrentUICulture = New CultureInfo("es") InitializeComponent() ' Add data to a data source.What You've Accomplished In this step you added a new resource file to your application. so they appear similar to the following: <SupportedCultures>es</SupportedCultures> 3. In the .  7.Threading C# using System. right-click your project and choose Reload Project from the context menu. using System.CurrentUICulture = new CultureInfo("es").CurrentThread.ItemsSource = source It should now look similar to the following:  76 .csproj option. The project will appear grayed out and unavailable. Add the following code to the MainPage constructor above the InitializeComponent() call to set the CurrentUICulture property:   Visual Basic Thread. c1dg.Threading. Add the following using statements to the top of the file:  Visual Basic Imports System. and then set that culture to be the current culture. Step 3 of 3: Setting the Culture Once you've created resource files for your application.xaml file and click View Code in the context menu to open the Code Editor.csproj file.Globalization Imports System. In the next step you'll add the file's culture to the project's supported cultures.1 source. In the Solution Explorer. Dim source As New List(Of Data)() Dim itemsCount As Integer = 25 For i As Integer = 0 To itemsCount . 4. right-click the C1DataGridLocalization project and select Unload Project. To do so. complete the following steps: 1. 6. locate the <SupportedCultures></SupportedCultures> tags. Click Yes if Visual Studio asks you to save the project. In the Solution Explorer. and select the Edit C1DataGridLocalization. Right-click the project again. 5. Thread. you will need to set the supported cultures for your project and explicitly set the current culture of the project. Add "es" in between the tags. In the Solution Explorer.CurrentThread.csproj file.CurrentUICulture = New CultureInfo("es") C# Thread. Save and close the . The project will be reloaded and will now support the specified cultures. Visual Basic Public Sub New() ' Set the culture.Globalization.CurrentThread.Add(New Data()) Next ' Set the grid's ItemsSource property.

InStock = (i % 2 == 0) }). // Add data to a data source. for (int i = 0. InitializeComponent(). i++) { source. int itemsCount = 25.Add(new Data() { ProductName = "Name". Thread. i < itemsCount. List<Data> source = new List<Data>(). 9. c1dg. } 8. Quantity = i.End Sub  C# public MainPage() { // Set the culture. Description = "Description". } // Set the grid's ItemsSource property. To observe some of the localized language strings.ItemsSource = source. Click the drop-down arrow in the filter box to view additional strings: 77 .CurrentUICulture = new CultureInfo("es"). Save and run your application. select the drop-down filter icon in the grid: 10.CurrentThread.

set the project's supported culture. which was created for that particular sample. 78 .Ria assembly. for more information. 4. You created a resource file. In this topic. Open your project and add the AdapterControl class to your project. Binding the Grid to a RiaServices Domain Data Source The following tutorial will walk you through the process of binding the C1DataGrid control to an RIA Services data source. and explicitly set the current culture in code. In your project.What You've Accomplished In this step you added the file's culture to the project's supported cultures and set that culture to be the current culture. Complete the following steps: 1. declare the AdapterControl in XAML. In this tutorial you've learned how to localize an application.Silverlight. add a reference to the C1. see MSDN). In the XAML window of the project add the following markup to add the adapter control: <adapter:AdapterControl x:Name="_adapter" AutoLoad="True" DataGrid="{Binding ElementName=_dataGrid}"> <riaControls:DomainDataSource x:Name="_myDataSource" QueryName="GetProducts"> <riaControls:DomainDataSource. 5.DomainContext> <local:MyDomainContext/> </riaControls:DomainDataSource. you'll create the AdapterControl class. and bind the C1DataGrid control to the AdapterControl. Open the C1DataGrid_CollectionVewAdapter2008 sample included with ComponentOne Studio for Silverlight. Locate all the "Products" occurrences in the AdapterControl class and replace them with the name of your business class (automatically generated by RiaServices) to use the class in your project. To make the C1DataGrid compatible with RiaServices DataView you'll use an adapter control that "translates" C1DataGrid's functions into RiaServices functions so that they work transparently to the user. 3.DataGrid.DomainContext> </riaControls:DomainDataSource> </adapter:AdapterControl> You need to set the content of the control to a RiaServices DomainDataSource control declared the same way as if you had used it directly in the XAML page (as stated in the RiaServices walkthrough document. You need also to bind the DataGrid property to the C1DataGrid instance where you are using the adapter control. There you can find the AdapterControl class. 2.

complete the following steps: 1. when the adapter control gets loaded it will automatically retrieve the data from the server and load the C1DataGrid with it. In the New Project dialog box.RowDefinitions> This row definition will define the layout of your application. more data is fetched as needed. The New Silverlight Application dialog box will appear. <C1Data:C1DataGrid ItemsSource="{Binding Data. In Visual Studio. See Paging Grid Data (page 34) for details.com/winfx/2006/xaml/presentation" 3. 4. As the user scrolls down the grid. 9. To set up your project.6. In this tutorial you'll create a Silverlight application with a C1DataGrid control that implements stealth paging functionality.microsoft. ElementName=_adapter}"/> Note that if the AutoLoad property of the AdapterControl is set to True.xaml file is not currently open. If the MainPage. Enter a Name for your project "StealthPaging".MainPage" xmlns="http://schemas. The dialog box will close and the reference will be added.xaml item. just like with paging. 7.Runtime. The XAML markup will now look similar to the following: <UserControl x:Class="StealthPaging. you can use it as binding source for the ItemsSource property of the C1DataGrid.Grid Layout--> <Grid. Click OK to accept the default settings. 79 . as in the previous step. Navigate to the Solution Explorer. select File | New | Project. You created the AdapterControl class. What You've Accomplished You learned how to bind the C1DataGrid control to an RIA Services data source.xaml. 6. and create your project. place the cursor just above the </Grid> tag and click once. You'll then continue by creating and customizing the application's user interface (UI) and adding the C1DataGrid control to your project. Step 1 of 3: Creating the User Interface In this step you'll begin in Visual Studio to create a Silverlight grid application. and bound the C1DataGrid control to the AdapterControl. declared the AdapterControl in XAML. and click OK. navigate to the Solution Explorer and double-click on the MainPage. For example. In the XAML view.Serialization assembly and click the OK button to add a reference to your project. right-click the StealthPaging project.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid. Stealth paging is a little different. 5. select a language in the left pane and in the templates list select Silverlight Application. Implementing Stealth Paging With paging you can only load the necessary data to fit one page. and select Add Reference from the context menu. you can achieve paging functionality with a scrollbar. In the XAML window of the project. In the Add Reference dialog box locate the System. 2. close the New Silverlight Application dialog box. Once your adapter control is added in the page. C1DataGrid supports server-side sorting and filtering so you can still achieve these functionalities without sacrificing performance. place the cursor just after the <Grid x:Name="LayoutRoot" Background="White"> tag and add the following markup: <!-. Navigate to the Toolbox and double-click the C1DataGrid icon to add the grid control to MainPage. 8.

Navigate to the Solution Explorer. 3.Silverlight.Silverlight. right-click the StealthPaging. You've successfully created a basic grid application.DataGrid namespace and <c1grid:C1DataGrid /> tag has been added to the project. you'll be able to access the C1DataGrid control in code. In the next steps you'll bind the grid to a data source and add stealth paging in code.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.Web project.DataGrid.Web project. What You've Accomplished If you run your application you'll observe that your page includes a grid and text below the grid. Add the following markup just after the </c1grid:C1DataGrid> tag: <TextBlock x:Name="txtStatus" Grid. 13.org/markupcompatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:c1grid="clrnamespace:C1.com/expression/blend/2008" xmlns:mc="http://schemas. Give your grid a name by adding x:Name="peopleDataGrid" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="peopleDataGrid" /> By giving the control a unique identifier.com/winfx/2006/xaml" xmlns:d="http://schemas. and select Add | New Item.openxmlformats. 80 . 10. 2. delete it so it appears similar to the following: <c1grid:C1DataGrid /> 11.Grid Layout--> <Grid.Silverlight.RowDefinitions> <c1grid:C1DataGrid /> </Grid> </UserControl> Note that the C1. In the Add Reference dialog box locate the System. The dialog box will close and the reference will be added.5.DataGrid"> <Grid x:Name="LayoutRoot" Background="White"> <!-.Runtime.xmlns:x="http://schemas.Serialization assembly and click the OK button to add a reference to your project. In the Solution Explorer right-click the StealthPaging." /> This TextBlock will be used to display status information text.microsoft.0. To set up your project.assembly=C1. and begin the process of binding the grid. complete the following steps: 1.0" Step 2 of 3: Adding a Web Service In this step you'll add a data source to your project. and select Add Reference from the context menu. but the grid is blank and contains no data.microsoft. If the <c1grid:C1DataGrid> tag includes existing content. Margin="0.Row="1" Text="Ready. 12. Customize your grid by adding AutoGenerateColumns="True" CanUserAddRows="False" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" /> This markup will set the grid to generate columns automatically and will disable adding new rows.

replace the code in the StealthPaging.WebServiceBinding(ConformsTo:=WsiProfiles.Age = i.BasicProf ile1_1)> _ <ToolboxItem(False)> _ Public Class DataWebService Inherits System.asmx". select the Web item.Runtime.FirstName = String.Services. In the DataWebService. 7.org/")> _ <System.Script.Format("Last Name {0}".Web. add the following using statements at the top of the file:   Visual Basic Imports System. _ . In the DataWebService. In the left pane of the Add New Item dialog box.Runtime.1 personList.Serialization.Services.WebService <WebMethod()> _ Public Function GetData(startRow As Integer.4. name the Web Service "DataWebService. 5. In the templates list. ' <System. _ .City = String. 6.asmx file.Web namespace with the following::  Visual Basic ' To allow this Web Service to be called from script. Note that the Web Service file will be added to your project and automatically opened.Serialization C# using System. endRow As Integer) As List(Of ServerPerson) Dim personList As New List(Of ServerPerson)() For i As Integer = startRow To endRow . i). select Web Service. using ASP.Web.Format("City {0}".Web.ScriptService()> _ <System.asmx file.WebService(Namespace:="http://tempuri.Add(New ServerPerson() With { _ .Services. i) _ }) Next Return personList End Function End Class <DataContract> _ Public Class ServerPerson Private _firstName As String <DataMember> _ Public Property FirstName() As String Get Return _firstName End Get Set _firstName = value End Set End Property 81 .NET AJAX. _ . uncomment the following line. i).Services.LastName = String.Format("First Name {0}". and click the Add button.Web.

Services.Script. for (int i = startRow.ComponentModel.Private _lastName As String <DataMember> _ Public Property LastName() As String Get Return _lastName End Get Set _lastName = value End Set End Property Private _age As Integer <DataMember> _ Public Property Age() As Integer Get Return _age End Get Set _age = value End Set End Property Private _city As String <DataMember> _ Public Property City() As String Get Return _city End Get Set _city = value End Set End Property End Class  C# namespace StealthPaging. using ASP.WebService { [WebMethod] public List<ServerPerson> GetData(int startRow. // [System.ToolboxItem(false)] // To allow this Web Service to be called from script.BasicProfile1_1)] [System. uncomment the following line.Web. int endRow) { List<ServerPerson> personList = new List<ServerPerson>().Add(new ServerPerson() { 82 . i < endRow.NET AJAX.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.ScriptService] public class DataWebService : System.Web { /// <summary> /// Summary description for DataWebService /// </summary> [WebService(Namespace = "http://tempuri.Web.Services. i++) { personList.

Save your application. LastName = string. [DataMember] public string FirstName { get { return _firstName. } set { _lastName = value. i). 83 .Web project. } set { _firstName = value. } set { _age = value. } return personList. 8. Age = i. In the next step you'll finish connecting the Web Service to your project and you'll run your application. [DataMember] public string City { get { return _city.Web project and will return to working with the StealthPaging project. right-click the StealthPaging.Format("City {0}". What You've Accomplished In this step you've added a data source to your project and created a Web Service. City = string. } set { _city = value. } } private string _lastName.FirstName = string. } } [DataContract] public class ServerPerson { private string _firstName.Format("First Name {0}". } } } } This code will create a new list that will be used to populate the C1DataGrid control. [DataMember] public string LastName { get { return _lastName. [DataMember] public int Age { get { return _age.Format("Last Name {0}". and select Build from the context menu. i). } } private int _age. Note that you'll now be done with the StealthPaging. } } private string _city. i) }).

xaml. Customize your grid by adding LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid x:Name="peopleDataGrid" AutoGenerateColumns="True" CanUserAddRows="False" LoadedRowPresenter="peopleDataGrid_LoadedRowPresenter"> This markup adds an event handler – you'll add code for the event handler in the next steps.DataService. Add the following variables to the MainPage class:   84 .ObjectModel Imports System. using C1. Add the following import statements at the top of the file:  Visual Basic Imports System.asmx file will appear in the list of Services.cs or MainPage.xaml file.xaml node and double-click the MainPage. ObservableCollection<ServerPerson> _people = new ObservableCollection<ServerPerson>().Silverlight.DataGrid.Runtime. C# using System.DataGrid Imports StealthPaging.Silverlight.xaml. int _pageSize = 20.vb file to open it in the Code Editor. 3.Step 3 of 3: Connecting the Web Service and Adding Stealth Paging In the previous step you created a Web Service and added a data source to your project. 7. In this step you'll continue by linking the Web Service to your application. 2. // Change this if the name of your project is different. Return to the MainPage.ServiceModel. To set up your project. using System. 4. right-click the project name and select Add Service Reference from the context menu.Silverlight Imports C1. In the Add Service Reference dialog box click the Discover button.Collections. expand the MainPage.Runtime.  8. 5. Visual Basic Dim _startRow As Integer = 0 Dim _pageSize As Integer = 20 Dim _people As New ObservableCollection(Of ServerPerson)() Dim _loading As Boolean C# int _startRow = 0.Serialization Imports System. using C1. using System.ServiceModel Imports C1. using StealthPaging. change the default value to "DataService" and click the OK button to save your settings and close the dialog box.Silverlight. In the Solution Explorer.DataService ' Change this if the name of your project is different. The DataWebService. In the Namespace text box. 6. In the Solution Explorer.ObjectModel.Serialization. complete the following steps: 1.Collections.

Index) { GetData(_startRow.DataGrid. peopleDataGrid. Add code to the MainPage constructor so it appears like the following:  Visual Basic Public Sub New() InitializeComponent() AddHandler peopleDataGrid. New EndpointAddress(Extensions. endRow As Integer) UpdateState(True.LoadedRowPresenter.DataGridRowEventArgs e) { if (_loading || _people.DataGridRowEventArgs) If _loading OrElse _people. startRow. } } Visual Basic #Region "retrieve data from the server" Private Sub GetData(startRow As Integer. } Visual Basic Private Sub peopleDataGrid_LoadedRowPresenter(ByVal sender As System.5 < e. 9.DataGrid. } if (_people. Add the following code to retrieve data from the server:  85 .Count < _pageSize) { return.5 < e.ItemsSource = _people. AddressOf proxy_GetDataCompleted  10. GetData(_startRow. ByVal e As C1.Count . _pageSize) End Sub C# public MainPage() { InitializeComponent().Count < _pageSize Then Return End If If _people.Object.Row. Add the LoadedRowPresenter event handler to your code under the MainPage constructor:   11.Index Then GetData(_startRow.ItemsSource = _people GetData(_startRow. _startRow + _pageSize) End If End Sub C# private void peopleDataGrid_LoadedRowPresenter(object sender.Row.GetAbsoluteUri("DataWebService.LoadedRowPresenter += new EventHandler<DataGridRowEventArgs>(peopleDataGrid_LoadedRowPresenter).bool _loading.Count . peopleDataGrid. _startRow + _pageSize). C1. endRow) ' Call web service Dim proxy = New DataWebServiceSoapClient(New BasicHttpBinding().Silverlight. _pageSize). AddressOf peopleDataGrid_LoadedRowPresenter peopleDataGrid.asmx"))) AddHandler proxy.Silverlight.GetDataCompleted.

asmx"))).GetDataCompleted += new EventHandler<GetDataCompletedEventArgs>(proxy_GetDataCompleted).Wait _loading = True Else _loading = False txtStatus. add to observable collection _startRow += _pageSize.Text = String. endRow As Integer) If loading Then txtStatus. MessageBoxButton.OK) Return End If ' Data retrieved OK. "Error Getting Data".Message.GetAbsoluteUri("DataWebService..Format("Retrieving rows {0} to {1}. 0) End Sub ' Sets loading status ' You could use a VisualState here too Private Sub UpdateState(loading As Boolean. endRow) End Sub Private Sub proxy_GetDataCompleted(sender As Object. foreach (ServerPerson person in e. new EndpointAddress(Extensions.Show(e. startRow.Message. endRow). return. startRow As Integer. // Call Web service var proxy = new DataWebServiceSoapClient(new BasicHttpBinding().[Error].[Error] IsNot Nothing Then MessageBox.GetDataAsync(startRow. endRow) Cursor = Cursors.OK). e As GetDataCompletedEventArgs) If e.Result _people.Error) { MessageBox.. proxy. add to observable collection _startRow += _pageSize For Each person As ServerPerson In e. 0.Arrow End If End Sub #End Region  C# #region retrieve data from the server private void GetData(int startRow.".Error.GetDataAsync(startRow. startRow.Result) { 86 . int endRow) { UpdateState(true. } // Data retrieved OK. } void proxy_GetDataCompleted(object sender.Show(e.proxy. GetDataCompletedEventArgs e) { if (null != e. proxy.Text = "Ready" Cursor = Cursors.Add(person) Next UpdateState(False. endRow). MessageBoxButton. "Error Getting Data".

Wait. _loading = true. 0)._people. Cursor = Cursors. } // Sets loading status // You could use a VisualState here too private void UpdateState(bool loading.. 0. startRow.Text = "Ready". txtStatus. } else { _loading = false.Arrow. int endRow) { if (loading) { txtStatus.". Run your application and observe that the grid appears bound to a data source: 13.Text = string. } UpdateState(false.. endRow). int startRow.Add(person). } } #endregion 12. Run your application and observe that as you scroll through the grid more rows appear in the grid: 87 .Format("Retrieving rows {0} to {1}. Cursor = Cursors.

the grid pages through the grid instead.Also note that the text below the grid indicates the rows being added as you scroll. 88 . added a data source. so that when the grid is scrolled at run time. and created a Web Service to bind the C1DataGrid control. You implemented stealth paging. improving performance. What You've Accomplished Congratulations. you've completed this tutorial! In this tutorial you created a new Silverlight project.

right-click the References folder in the project files list. 6. It will appear similar to the following: <UserControl xmlns="http://schemas. and click OK. Click once on the design area of the UserControl to select it. In the context menu choose Add Reference. In the Asset Library dialog box.DataGrid.com/winfx/2006/xaml/presentation" 89 . select the C1.Silverlight. In the Visual Studio Solution Explorer.DataGrid for Silverlight Task-Based Help The following task-based help topics assume that you are familiar with Visual Studio and Expression Blend and know how to use the C1DataGrid control in general. Unlike in Visual Studio. and in code. it will appear empty. If you choose. Note that if you create a C1DataGrid control as in the following steps.assembly=C1. 4. For example.Silverlight.Silverlight. The dialog box will close and the references will be added to your project and the controls will be available in the Asset Library. can customize the control by selecting it and setting properties in the Properties window. and the Width property to "250". in XAML. Most task-based help topics also assume that you have created a new Silverlight project and added a C1DataGrid control to the project – for information about creating the control. 2. in Blend you can add Silverlight controls directly to the design surface as in the next step.dll assembly.microsoft. Navigate to the Projects window and right-click the References folder in the project files list. In the context menu choose Add Reference. see Creating a DataGrid (page 89). The C1DataGrid control will now exist in your application. and then click on the C1DataGrid icon in the right pane: The C1DataGrid icon will appear in the Toolbox under the Assets button. Double-click the C1DataGrid icon in the Toolbox to add the control to the panel. choose the Controls item in the left pane. 2. Each topic in this section provides a solution for specific tasks using the ComponentOne DataGrid for Silverlight product. In the Toolbox click on the Assets button (the double chevron icon) to open the Assets dialog box. 3. In XAML To create a C1DataGrid control using XAML markup.DataGrid" to the initial <UserControl> tag.dll assembly. complete the following steps: 1.DataGrid. You will need to bind the grid or populate it with data. and click Open. complete the following steps: 1. Add a XAML namespace to your project by adding xmlns:c1grid="clrnamespace:C1. If you are unfamiliar with the ComponentOne DataGrid for Silverlight product. please see the DataGrid for Silverlight Quick Start (page 5) first. locate and select the C1. 5. At Design Time in Blend To create a C1DataGrid control in Blend. Creating a DataGrid You can easily create a C1DataGrid control at design time in Expression Blend.DataGrid.Silverlight. set the C1DataGrid control's Name property to "c1datagrid1" the Height property to "180".

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1grid="clrnamespace:C1.Silverlight.DataGrid;assembly=C1.Silverlight.DataGrid" x:Class="C1DataGrid.MainPage" Width="640" Height="480"> 3. Add a <c1:C1DataGrid> tag to your project within the <Grid> tag to create a C1DataGrid control. The markup will appear similar to the following: <Grid x:Name="LayoutRoot" Background="White"> <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" /> </Grid> This markup will create an empty C1DataGrid control named "c1datagrid1" and set the control's size. In Code To create a C1DataGrid control in code, complete the following steps: 1. In the Visual Studio Solution Explorer, right-click the References folder in the project files list. In the context menu choose Add Reference, select the C1.Silverlight.dll and C1.Silverlight.DataGrid.dll assemblies, and click OK. Right-click within the MainPage.xaml window and select View Code to switch to Code view Add the following import statements to the top of the page:   4. Visual Basic Imports C1.Silverlight.DataGrid C# using C1.Silverlight.DataGrid; Visual Basic Public Sub New() InitializeComponent() Dim c1datagrid1 As New C1DataGrid c1datagrid1.Height = 180 c1datagrid1.Width = 250 LayoutRoot.Children.Add(c1datagrid1) End Sub C# public MainPage() { InitializeComponent(); C1DataGrid c1datagrid1 = new C1DataGrid(); c1datagrid1.Height = 180; c1datagrid1.Width = 250; LayoutRoot.Children.Add(c1datagrid1); }

2. 3.

Add code to the page's constructor to create the C1DataGrid control. It will look similar to the following: 

This code will create an empty C1DataGrid control named "c1datagrid1", set the control's size, and add the control to the page. What You've Accomplished Run your application and observe that you've created a C1DataGrid control:

90

Note that when you create a C1DataGrid control as in the above steps, it will appear empty. You can add items to the control that can be interacted with at run time.

Controlling Grid Interaction
The following task-based help topics detail how you can enhance your users' interaction with DataGrid for Silverlight. For example, you can allow users to filter, sort, reorder, delete, and edit the grid through code and XAML.

Enabling Grouping in the Grid
You can enable grouping and the grouping area of the grid so that users can group columns in your grid at run time to better organize information. For more information, see Grouping Columns (page 51). By default, user cannot group columns in the grid but you can enable this function by setting the CanUserGroup property to True. At Design Time To enable grouping, complete the following steps: 1. 2. 3. Click the C1DataGrid control once to select it. Navigate to the Properties window and locate the CanUserGroup property. Check the check box next to the CanUserGroup property.

In XAML For example to enable grouping, add CanUserGroup="True" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserGroup=True" /> In Code For example, to enable grouping, add the following code to your project:   Visual Basic Me.c1datagrid1.CanUserGroup = True C# this.c1datagrid1.CanUserGroup = true;

What You've Accomplished Run the application and notice that the grouping area appears at the top of the grid. Note that you can also customize the visibility of the grouping area. For more information about the grouping area, see the Showing the Grouping Area (page 92) topic.

91

Showing the Grouping Area
By default grouping in the grid is disabled and the grouping area is not visible. For more information, see Grouping Columns (page 51). When the CanUserGroup property is set to True and grouping is enabled the grouping area is made visible. But if you choose you can show or hide the grouping area whether or not grouping is enabled. By default, the grouping area is not visible when grouping is not enabled but you can make the area visible by setting the ShowGroupingPanel property to True. At Design Time To show the grouping area, complete the following steps: 1. 2. 3. Click the C1DataGrid control once to select it. Navigate to the Properties window and locate the ShowGroupingPanel property. Check the check box next to the ShowGroupingPanel property.

In XAML For example to show the grouping area, add ShowGroupingPanel="True" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" ShowGroupingPanel="True" /> In Code For example, to show the grouping area, add the following code to your project:   Visual Basic Me.c1datagrid1.ShowGroupingPanel = True C# this.c1datagrid1.ShowGroupingPanel = true;

What You've Accomplished Run the application and notice that the grouping area appears at the top of the grid. Note that even if the grouping area is visible, grouping will not be enabled if the CanUserGroup property is False. For more information, see the Enabling Grouping in the Grid (page 91) topic.

Disabling Column Reordering
By default end users can easily reorder columns in the grid at run time. For more information, see Reordering Columns (page 48). If you choose, however, you can disable the column reordering feature by setting the CanUserReorderColumns property to False. At Design Time To disable column reordering, complete the following steps: 1. 2. 3. Click the C1DataGrid control once to select it. Navigate to the Properties window and locate the CanUserReorderColumns property. Clear the check box next to the CanUserReorderColumns property.

In XAML For example to disable column reordering, add CanUserReorderColumns="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserReorderColumns="False" /> In Code For example, to disable column reordering, add the following code to your project:

92

2.CanUserReorderColumns = false. In XAML For example to disable column and row resizing. Click the C1DataGrid control once to select it. If you choose. however. add CanUserResizeColumns="False" CanUserResizeRows="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserResizeColumns="False" CanUserResizeRows="False"/> In Code For example. complete the following steps: 93 . For more information.CanUserResizeRows = False C# this.CanUserResizeColumns = false. 5. For more information about column reordering. add the following code to your project:  Visual Basic Me. see the Reordering Columns (page 48) topic.CanUserResizeColumns = False Me. In the Properties window. you can disable the column and row resizing feature by setting the CanUserResizeColumns and CanUserResizeRows properties to False. Navigate to the Properties window and locate the CanUserResizeColumns property. you can disable the column filtering feature by setting the CanUserFilter property to False.c1datagrid1. For more information. Clear the check box next to the CanUserResizeRows property. complete the following steps: 1. At Design Time To disable column and row resizing. 4. to disable column and row resizing. At Design Time To disable column filtering. locate the CanUserResizeRows property. Clear the check box next to the CanUserResizeColumns property.c1datagrid1.c1datagrid1.c1datagrid1.CanUserResizeRows = false. see Filtering Columns (page 48). Disabling Column and Row Resizing By default end users can resize columns and rows in the grid at run time. 3. What You've Accomplished Run the application and observe that you can no longer reorder columns at run time by preforming a drag-anddrop operation. see the Resizing Columns and Rows (page 47) topic.CanUserReorderColumns = False C# this. For more information about column reordering. however. this. Disabling Column Filtering By default end users can filter columns in the grid at run time. If you choose. see Resizing Columns and Rows (page 47).  Visual Basic Me.c1datagrid1.c1datagrid1.  What You've Accomplished Run the application and observe that you can no longer resize columns or rows at run time by preforming a dragand-drop operation.

CanUserFilter = false. Navigate to the Properties window and locate the CanUserFilter property. see Sorting Columns (page 50). If you choose. In XAML For example to disable column filtering. Clicking on a column's header at run time will not sort the grid and the sort indicator is not visible in the column header.c1datagrid1. Navigate to the Properties window and locate the CanUserSort property. Click the C1DataGrid control once to select it. see the Filtering Columns (page 48) topic. 94 . 3. For more information. you can disable the column sorting feature by setting the CanUserSort property to False. Clear the check box next to the CanUserSort property. add the following code to your project:   Visual Basic Me. to disable column filtering. What You've Accomplished Run the application and observe that you can no longer sort columns at run time. add CanUserFilter="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserFilter="False" /> In Code For example. What You've Accomplished Run the application and observe that you can no longer filter columns at run time. the drop-down arrow to display the filter box is no longer visible at run time.1.c1datagrid1. complete the following steps: 1. For more information about column filtering.c1datagrid1. add CanUserSort="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserSort="False" /> In Code For example. 2.c1datagrid1. see the Sorting Columns (page 50) topic. Clear the check box next to the CanUserFilter property. add the following code to your project:   Visual Basic Me. however. 3.CanUserSort = false. to disable column sorting. Click the C1DataGrid control once to select it. At Design Time To disable column sorting. Disabling Column Sorting By default end users can sort columns in the grid at run time.CanUserFilter = False C# this. In XAML For example to disable column sorting.CanUserSort = False C# this. 2. For more information about column sorting.

Click the drop-down arrow next to the CanUserFreezeColumns property and select Left. At Design Time To enable column freezing. and enter "2" to set the number of bottom rows that will be frozen. add the following code to your project:   Visual Basic Me. 2.Enabling Column Freezing You may want to freeze columns in the grid at run time so that they are always visible even when the grid is scrolled horizontally. 2. In XAML For example to freeze the top and bottom two rows. add CanUserFreezeColumns="Left" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserFreezeColumns="Left" /> In Code For example.Left C# this. Click the C1DataGrid control once to select it and navigate to the Properties window. This feature is not enabled by default. 3. For more information about column freezing. click in the text box next to the property.CanUserFreezeColumns = DataGridColumnFreezing.Left. Navigate to the Properties window and locate the CanUserFreezeColumns property.c1datagrid1. complete the following steps: 1. add FrozenTopRowsCount="2" FrozenBottomRowsCount="2" to the <c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" FrozenTopRowsCount="2" FrozenBottomRowsCount="2" /> 95 . see Freezing Columns (page 53). This feature is not enabled by default. columns to the left of the bar will be frozen so that they are always visible even when the grid is scrolled horizontally. In the Properties window. locate the FrozenTopRowsCount property. and enter "2" to set the number of top tows that will be frozen. Locate the FrozenBottomRowsCount property. see the Freezing Columns (page 53) topic. For more information. but if you choose you can enable the row freezing feature by setting the FrozenTopRowsCount and FrozenBottomRowsCount properties.CanUserFreezeColumns = DataGridColumnFreezing. At Design Time To freeze the top and bottom two rows. click in the text box next to the property. to enable column freezing. Click the C1DataGrid control once to select it. The freeze bar can be moved to select which columns to freeze. What You've Accomplished Run the application and observe that the freeze bar is visible at run time. In XAML For example to enable column freezing. complete the following steps: 1. Freezing Grid Rows You may want to freeze the top or bottom rows in the grid at so that they are always visible even when the grid is scrolled vertically at run time. 3.c1datagrid1. but if you choose you can enable the column freezing feature by setting the CanUserFreezeColumns property to Left.

2. you can disable the new row bar feature by setting the CanUserAddRows property to False. users can enter text in the bar to add new content to the grid. to freeze the top and bottom two rows.FrozenBottomRowsCount = true. If you choose.c1datagrid1. Clear the check box next to the CanUserEditRows property. see Editing Cells (page 54).CanUserEditRows = false. this. add the following code to your project:  Visual Basic Me.c1datagrid1. 3. see the Editing Cells (page 54) topic. add the following code to your project:   Visual Basic Me.c1datagrid1.FrozenTopRowsCount = true.c1datagrid1.c1datagrid1.CanUserEditRows = False C# this.In Code For example. however. Click the C1DataGrid control once to select it. complete the following steps: 1. Disabling Cell Editing By default end users edit content in the grid at run time. For more information. In XAML For example to disable cell editing. however. observe that the cell does not move into edit mode and you can no longer edit grid content at run time.FrozenTopRowsCount = True Me. to disable cell editing. What You've Accomplished Run the application and double-click a cell. For more information about cell editing. complete the following steps: 96 .  What You've Accomplished Run the application and observe that the two top and bottom rows are frozen. you can disable the cell editing feature by setting the CanUserEditRows property to False.c1datagrid1. Navigate to the Properties window and locate the CanUserEditRows property. Disabling Adding Rows By default end users add new rows and content to the grid at run time. For more information. Scroll the grid vertically and notice that the top two an bottom two rows do not scroll and are locked in place. A new row bar appears at the bottom of the grid. At Design Time To disable cell editing. If you choose. At Design Time To disable adding rows. add CanUserEditRows="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserEditRows="False" /> In Code For example. By default the Add New row appears as the last row in the grid and so will be one of the frozen rows.FrozenBottomRowsCount = True C# this. see Adding Rows to the Grid (page 55).

CanUserAddRows = false. to disable adding rows.1. you can disable the toggling the details row feature by setting the CanUserToggleDetails property to False.CanUserToggleDetails = False C# this. Navigate to the Properties window and locate the CanUserAddRows property. 2. by default the row details can be toggled so that they are visible or collapsed. Clear the check box next to the CanUserAddRows property.CanUserAddRows = False C# this. Click the C1DataGrid control once to select it. For more information about cell editing. Click the C1DataGrid control once to select it. however. In XAML For example to disable adding rows.c1datagrid1. see the Adding Rows to the Grid (page 55) topic. add CanUserToggleDetails="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserToggleDetails="False" /> In Code For example. add CanUserEditRows="False" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" CanUserAddRows="False" /> In Code For example. 3. if needed. complete the following steps: 1. 3. What You've Accomplished Run the application and scroll to the end of the grid. Clear the check box next to the CanUserToggleDetails property.CanUserToggleDetails = false. In XAML For example to disable toggling row details. If you choose. Note that you will need to have a grid with row details to view the change in this example.c1datagrid1. add the following code to your project:   Visual Basic Me. At Design Time To disable toggling row details. Navigate to the Properties window and locate the CanUserToggleDetails property.c1datagrid1. Observe that the new row bar no longer appears in the grid and that users can no longer add new rows and content to the grid. 2. What You've Accomplished 97 . to disable toggling row details. Disabling Row Details Toggling When the grid includes a child grid or you've created a master-detail grid. add the following code to your project:   Visual Basic Me. for an example of creating a master-detail grid.c1datagrid1. see the Creating a Master/Detail View (page 67) topic.

complete the following steps: 1. Customizing Grid Appearance The following task-based help topics detail how you can customize DataGrid for Silverlight by changing the grid's appearance. Note for more information about ClearStyle technology.Green).Media. Changing the Grid's Background and Foreground Color ComponentOne DataGrid for Silverlight includes ComponentOne's unique ClearStyle technology that enables you to change the entire appearance of the grid simply and flawlessly. and choose Green.Windows.Media. add the following code to your project:  Visual Basic Me. At Design Time To change the grid's foreground and background color so that it appears green.  What You've Accomplished Run the application and observe that the grid now appears green with white text in the grid header: 98 . The follow topics also detail changing the layout of the grid.Windows. add Background="Green" Foreground="White" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" Background="Green" Foreground="White" /> In Code For example. this. see the C1DataGrid ClearStyle (page 39) topic.Background = new System. In XAML For example to change the grid's foreground and background color so that it appears green. including how to set the location of the header and add new row bar. The arrow icon in the row header that indicates that row details can be toggled is no longer visible so toggling rows is not an option.Media. to change the grid's foreground and background color so that it appears green. SolidColorBrush(Colors.c1datagrid1.White) C# this.c1datagrid1. 4.Run the application and observe that you can no longer toggle the row details in the grid at run time. For more details about ComponentOne's ClearStyle technology.Windows.ForeGround = New System. Navigate to the Properties window and click the drop-down arrow next to the Foreground property. see the C1DataGrid ClearStyle (page 39) topic.c1datagrid1. you can change the background color of the grid or the alternating row background. For example. 3. DataGrid for Silverlight includes several appearance options that incorporate ComponentOne's unique ClearStyle technology. Click the C1DataGrid control once to select it.White).Windows. and choose White.Media. Navigate to the Properties window and click the drop-down arrow next to the Background property. SolidColorBrush(Colors. The following steps will detail how to set the C1DataGrid. Click the drop-down arrow in the box the hex code appears in.SolidColorBrush(Colors. 2. Click the drop-down arrow in the box the hex code appears in.Background property to completely change the appearance of the grid.c1datagrid1.Green) Me.Background = New System.Foreground = new System. 5.SolidColorBrush(Colors.

SolidColorBrush(Colors. Highlight an item in the grid and notice the mouse hover style did not change. 2. This is helpful so that rows are easier to follow across the grid.c1datagrid1.Note that with the C1DataGrid control's ClearStyle technology. Click the drop-down arrow in the box the hex code appears in. and choose White. In XAML To remove alternating row colors and set it so all rows appear white. Navigate to the Properties window and click the drop-down arrow next to the AlternatingRowBackground property. and the alternating row background of the grid all changed to reflect the green background. add RowBackground="White" AlternatingRowBackground="White" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" RowBackground="White" AlternatingRowBackground="White" /> In Code To remove alternating row colors and set it so all rows appear white. the grid's scrollbars. 4. At Design Time To remove alternating row colors and set it so all rows appear white.White) 99 . complete the following steps: 1. 5. add the following code to your project:  Visual Basic Me. Alternating row colors are when alternate lines appear in a different color than the base color of the grid.RowBackground = New System. See Changing the Grid's Mouse Hover Style (page 100) for more details.Media.Windows. the color of the grid. Click the drop-down arrow in the box the hex code appears in. Click the C1DataGrid control once to select it. you can customize these styles as well if you choose. Navigate to the Properties window and click the drop-down arrow next to the RowBackground property. but if you choose you can make the appearance of the grid uniform by removing the alternating row colors. Removing the Grid's Alternating Row Colors ComponentOne DataGrid for Silverlight appears with alternating row colors by default. 3. and choose White.

White). For example.White)  C# this.SolidColorBrush(Colors.Media.MouseOverBrush = New System.Windows.Media.Media.White).Windows.Yellow) C#  100 .Windows.c1datagrid1.Me.c1datagrid1. you may want to highlight these cells even more or remove this effect. and choose Yellow. SolidColorBrush(Colors. Click the drop-down arrow in the box the hex code appears in.Windows. add the following code to your project:  Visual Basic Me. Navigate to the Properties window and click the drop-down arrow next to the MouseOverBrush property.SolidColorBrush(Colors. 2. SolidColorBrush(Colors. If you choose you can customize the appearance of cells that are moused over. 3. complete the following steps: 1. At Design Time To set the mouse over effect to yellow.c1datagrid1.c1datagrid1. add MouseOverBrush="Yellow" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" MouseOverBrush="Yellow" /> In Code To set the mouse over effect to yellow. What You've Accomplished Run the application and observe that all rows in the grid now appear white: Changing the Grid's Mouse Hover Style By default. In XAML To set the mouse over effect to yellow.AlternatingRowBackground = New System.AlternatingRowBackground = new System.Media. Click the C1DataGrid control once to select it.RowBackground = new System. this. columns and rows that are moused over appear in a different color to indicate to users what area of the grid they are interacting with.

an element of which is the font style.FontFamily = New FontFamily("Times New Roman") Me.FontSize = 10 C# this. add FontFamily="Times New Roman" FontSize="10" to the < c1grid:C1DataGrid> tag so that it appears similar to the following: <c1grid:C1DataGrid Name="c1datagrid1" Height="180" Width="250" FontFamily="Times New Roman" FontSize="10" /> In Code To remove alternating row colors and set it so all rows appear white.c1datagrid1.c1datagrid1.  What You've Accomplished 101 .c1datagrid1. Navigate to the Properties window and click the drop-down arrow next to the FontSize property and choose 10. 2.c1datagrid1. For example. What You've Accomplished Run the application and observe that all highlighted rows and columns in the grid now appear yellow: Changing the Grid's Font Style You may want to update the font style that appears in DataGrid for Silverlight when the control is run.SolidColorBrush(Colors. to match your application's appearance. this. complete the following steps: 1. Click the C1DataGrid control once to select it.FontFamily = new FontFamily("Times New Roman").Windows. 3.this.FontSize = 10.Yellow). you may want to change the style of the grid. add the following code to your project:  Visual Basic Me.MouseOverBrush = new System. In XAML To change the font style. At Design Time To change the font style. Navigate to the Properties window and click the drop-down arrow next to the FontFamily property and choose Times New Roman.Media.c1datagrid1.

Run the application and observe that all rows in the grid appear in the Times New Roman font: 102 .

Sign up to vote on this title
UsefulNot useful