FlexGrid for WinForms

FlexGrid for WinForms20210827 更新

グレープシティ株式会社グレープシティ株式会社

FlexGrid for WinForms 4

主な特長 5-6

機能比較 7

FlexGrid の比較 7-9

WinFormsグリッドの比較 9-12

クイックスタート 13-19

設計時サポート 20

タスクメニュー 20-23

エディタ 23-26

データ 27

非連結モード 27

連結モード 27-30

連結モードでの操作 30-35

列 36

基本操作 36-39

ユーザー操作 40-45

エディタ 45-48

チェックボックス 48-50

数値 50-52

日付 52-56

コンボボックス 56-62

マスク 62-63

マップリスト 63-65

セルボタン 65-67

検証 67-70

データ注釈 70-72

スパークライン 72-73

ヘッダとフッタ 73-76

サイズ変更 76-78

行 79

基本操作 79-83

FlexGrid for WinForms

ヘッダ 85-88

行の詳細 88-93

セル 96

基本操作 96-99

セルの書式設定 100-104

グリッド 105

基本操作 105-107

キーボードによる移動 107-109

パフォーマンスの向上 109-114

スクロールバー 115-116

選択 117-119

編集 120

編集モード 120-121

編集の無効化 121-122

並べ替え 123

並べ替えの操作 123-127

並べ替えのインジケータ 127

フィルタ 128

フィルタの操作 128-132

フィルタの種類 132-139

フィルタUI 139-141

検索 142-143

マージ 144

自動マージ 144-147

はみ出して表示されるセルの処理 147-149

カスタムのマージ 149-151

グループ 152-155

集計 156-159

ツリーグリッド 160-172

ノードの操作 172-179

データの操作 179-181

ツリーグリッドのカスタマイズ 181-188

クリップボード 189-192

保存ロードと印刷 193

保存 193-195

ロード 195-197

印刷 197-199

外観とスタイル設定 200

組み込みオプション 200-202

カスタムのスタイル 202-203

グリッドのカスタマイズ 203-204

境界線のカスタマイズ 204-206

テキストのカスタマイズ 206-208

カスタムのグリフ 209

永続的な状態 210-211

NET 5 リファレンス 212

FlexGrid for WinForms is one of the fastest datagrids available in the market that renders and displays large data sets quicker than any other NET datagrid It is a powerfulgrid packed with basic as well as advanced features like in-cell editing sorting filtering merging grouping and much more Moreover it displays the hierarchical dataefficiently using tree grids with multiple columns aggregates subtotals and row details Not just this the control offers robust API and extensive design-time support sothat you can give your end-users a familiar Excel-like experience

The FlexGrid control binds with any of the NET data sources such as ADONET data source objects and custom business objects It also lets you work in the unbound modegiving you the power to manually add each row or column and set the cell values

One of the main strengths of FlexGrid is the ability to customize almost every aspect of appearance of the entire grid and individual cells In addition to standard formatstrings and cell styling FlexGrid goes above and beyond most NET datagrid components by providing complete control over the cell drawing using its OwnerDrawCell event

Besides the main C1FlexGrid control FlexGrid for WinForms also contains a C1FlexGridClassic control derived from C1FlexGrid It provides an object model that is virtuallyidentical to the VSFlexGrid ActiveX control and is mainly targeted for customers who want to migrate their existing VSFlexGrid projects from ActiveX to the latest technology

Not just this if you are developing your own custom grid control you can use C1FlexGridClassic as a reference The C1FlexGridClassic control is a perfect example of customgrid control created with C1FlexGrid control as base class We ship its source code as a product sample named Classic

Release Notes Product Samples

See the version-wise updates for all controls here Product samples are located at DocumentsComponentOne SamplesWinFormsvxxxC1FlexGridCS onyour system if you have installed the samples while installing WinForms Editionusing ComponentOneControlPanelexe

Documentation Blogs

Create your First Application with FlexGrid

FlexGrid at Design-time

Work with Columns and Editors

Filter Grid Data

Enable Merging in FlexGrid

Create Groups

Create a Tree Grid

Financial Data Displays using FlexGrid

FlexGrid Performance Compare WinForms WPF UWP

Creating Custom Styles for FlexGrid

Add Dynamic Grouping to your WinForms Data Grid

Implement responsive columns in a WinForms data grid

Creating a Derived Accordion Control with FlexGrid

Show RadioButton in a ComponentOne FlexGrid Tree

Videos Demo Samples

Meet FlexGrid WinForms and WPF Grid Demo

Note ComponentOne FlexGrid for WinForms is compatible with both NET 452 and NET 5

API Reference

C1WinFlexGrid452 Assembly C1WinFlexGrid5 Assembly

主な特長

Code-free Development

Why write code when a click is enough With rich design-time options beginning from binding to styling whichare accessible through the tasks menu and various editors FlexGrid lets you do a lot even without writing a single lineof code

Advanced Cell Editing

Choose from a variety of built-in editors or just create one for yourself FlexGrid offers various built-in cell editors sothat you can choose from simple text editing drop-down lists combo lists cell buttons masks and so on Not justthis with an option to create your own custom cell editors you can change your cells to accept or display almostany type of data

Work in Bound Mode or Unbound Mode

Bound grid or unbound populate the data seamlessly FlexGrid lets you bind the grid with any of the NET datasources such as ADONET and DataObjects for NET You can also work in unbound mode and let FlexGrid manage thedata itself

Present Hierarchical Data

View data the way that is best for you and your users When FlexGrid is bound to a hierarchical data source eachmaster record can be expanded or collapsed to show or hide the details in child grids which may contain moredetails The result is a data tree similar to the type of grid presented by Microsoft Access when displayinghierarchical data When bound the control detects subordinate data sources and creates additional instances of itselfto display child tables

Summarize Data and Show Aggregates

Get a quick outline of your grid data by summarizing it FlexGrid allows you to summarize data by adding a subtotalrow and display aggregates such as sum average count and so on for the specified column

Make it a Tree

Easily display your hierarchical data by converting your grid into a tree FlexGrid lets you represent your bound orunbound hierarchical data in Tree Grid which is similar to a TreeView control and gives a clean yet accessible structureto the data

Built-in Data Filtering

Let your users filter the data by value by condition or just give them both the options to choose from FlexGridprovides advanced built-in filtering with column filter value filter and condition filter already in place Still does notwork for you Create your own custom filter using rich FlexGrid API

Grouping

Group programmatically or at run-time With FlexGrid both are possible FlexGrid lets you group either through codeand even give your users an option to group at run-time using the FlexGridGroupPanel control or through contextmenu

Instant Search

Search the entire grid in one go and locate entries among millions of records instantly FlexGridprovides FlexGridSearchPanel control which lets the user type in the search box filters the records that match thetyped text and also highlights the search results

Merge Cells

Give your grid a tidy look by merging the cells with the same values FlexGrid lets you merge the contiguous cells withthe same values the way you want With free and restricted auto-merge options the grid can intelligently decidewhich cells to merge

Save and Load Multiple Formats

Back up the grid data or load it back in a jiffy FlexGrid lets you save the grid in your favorite format be it a text fileexcel file or XML You can even load content from these formats Not just this you can also load grid data from a

database using DataReader objects

Show Sparklines

Perk up your grid with the tiny charts FlexGrid allows you to add sparklines to grid columns so that you can easilydisplay trends and fluctuations in a single cell and make your grid data more useful and attractive at the same time

Perform Clipboard Operations

Move your text easily with Ctrl+C and Ctrl+V FlexGrid lets you perform clipboard operations on the grid data andheaders using your favorite keys

Assign Field Names to Columns

No need to remember the index of columns just call them by name FlexGrid automatically assigns column keysto field names when the grid is data-bound or you may assign them through code You can refer to a column using aColIndex(ColKey) syntax later which will retrieve the column you want even if your user has moved it to a differentposition on the grid

Use Data Annotations

Hint the user with data annotations FlexGrid lets you add data annotations in the form of metadata tags to theclasses and other objects to display messages and tips for the users

UI Automation and Support

Enable accessible and rich client applications through UI Automation (UIA) FlexGrid control supports UI Automationusing frameworks such as TestStackWhite You can enable applications such as screen readers coded UI testing toexamine user-interface elements and even simulated user interaction through code

Note UI Automation works only for the 452 version of C1FlexGrid and NET framework 47 or above applicationtarget frameworks

Add Special Drawing Effects

Make your grid look different and attractive with special drawing effects FlexGrid lets you paint special drawingeffects such as lines bitmaps and icons in the grid cells Additionally you can even scale images and addtransparency to them

Display Images in Cells

Need to display images in columns not an issue at all With FlexGrid you can display images along with data You caneven bind grid columns to image lists an easy and efficient way to display graphical information from data sources

Integrated Printing

Print the grid with a single statement FlexGrid gives you control over paper orientation margins header and footertext as well as the dialog boxes to set up the printer or see a preview You can even implement advanced printingoptions such as adding page breaks or custom elements to each page by using printing events

Styling

Use the visual styles or create your own custom styling use the designer or write your own code FlexGrid gives youenormous options to customize the appearance of the grid to match your requirements You can customize everyelement of the FlexGrid starting from headers and icons to borders and subtotal rows

機能比較

This section compares the features of various FlexGrids available across different platforms as well as shows acomparison with MS DataGridView

Topic Content

ComparingFlexGrids

Lists the difference between ActiveX version(VSFlexGrid control) and NET version of the FlexGridcontrol making it easy to migrate your grid from AciveX to NET

VSFlexGrid (ActiveX) and C1FlexGrid (NET)

ComparingWinForms Grids

Shows comparison between features of grids available in ComponentOne WinForms Edition andMS DataGridView

FlexGrid or True DBGridComparing ComponentOne Grids with MS DataGridView

FlexGrid の比較

VSFlexGrid (ActiveX) and C1FlexGrid (NET)ComponentOne provides ActiveX as well as NET version of the FlexGrid control While the ActiveX version is known asVSFlexGrid the NET version is shipped in the name of C1FlexGrid Being a NET version C1FlexGrid came laterinto the picture and instead of porting from the already existing VSFlexGrid we decided to create a brand new gridcontrol written from the ground up in C with the same design principles but with a new object model that is moremodern clean and powerful than the one in the ActiveX control

This section caters to original users of the VSFlexGrid control who want to migrate their applications from ActiveX tothe NET version that is the C1FlexGrid control To facilitate the hassle-free migration and a smooth learning curvethe NET version provides the C1FlexGridClassic control that derives from the C1FlexGrid class and provides an objectmodel that is virtually identical to the VSFlexGrid control The C1FlexGridClassic control is available in the form of aproduct sample Classic so that you may know exactly how to use the new object model This sample can also beused as a reference for creating the custom grid controls based on the C1FlexGrid class

Note The Classic sample is located at DocumentsComponentOne SamplesWinFormsv452C1FlexGridCS onyour system if you have installed the samples while installing WinForms Editionusing ComponentOneControlPanelexe

For users creating new applications we recommend using the new C1FlexGrid control However for the users who areporting their existing applications from ActiveX to NET we recommend using the C1FlexGridClassic control tominimize the programming effort Following table highlights some of the key differences between VSFlexGrid andC1FlexGrid

VSFlexGrid (ActiveX) C1FlexGrid (NET)

RowsCols1 Rows and Cols properties are used to

get or set the number of rows andcolumns

2 VSFlexGrid uses the TextMatrixproperty to represent the rows andcolumns

1 In C1FlexGrid Rows and Cols propertiesreturn the rows and column collectionsThe collections have readwriteproperties that return the number ofelements and fixed elements in eachcollection

For instance in ActiveX you would write

Dim r c c = 1

For r = c1FlexGrid1FixedRows To

c1FlexGrid1Rows - 1

DebugPrint

c1FlexGrid1TextMatrix(rc)

2 C1FlexGrid uses indexers to representrows and columns

For instance in NET you would write

Dim r c c = 1

For r = c1FlexGrid1RowsFixed To

c1FlexGrid1RowsCount - 1

DebugPrint(c1FlexGrid1(r c))

CellCell range The Cell property is one of the mostpowerful elements of the VSFlexGrid objectmodel It allows you to get or set anyproperty of any cell or cell range with asingle command Using a single propertymeans using variants and this prevents thecompiler from catching many subtleproblems in case you make mistakes whilecoding

flexCell(flexcpPicture 5 5

10 10)

= theImage

In C1FlexGrid CellRange object has replacedthe Cell property to expose type-safeproperties and methods for accessing cellrange So if variable theImage contained astring instead of an image you get a compilererror and not a runtime error Also you getcommand-completion when writing the codebecause the types for each property are known

Dim rg As CellRange

c1FlexGrid1GetCellRange(551010)

rgImage = theImage

Typed Columns In the ActiveX version the ColDataTypeproperty allows you to set the type of datathat each column contains This informationis used mainly for sorting columns thatcontain dates or numbers

In the NET version Cols[i]DataType propertydetermines the type of data the column holdsBy default the DataType property for allcolumns is set to object that is you can storeany type of data in any column You can set thedata type to specific types however the gridtries to coerce any data stored in the grid tothe proper type

c1FlexGrid1Cols(2)DataType =

GetType(Integer)

Sets the value to 12

c1FlexGrid1(1 2) = 12

Can not convert hello string to

integer

Fires the GridError event

Retains the original value

c1FlexGrid1(2 2) = hello

Styles In VSFlexGrid you can customize theappearance of individual cells or cell rangesusing the Cell property

Set the backcolor of second row

c1FlexGrid1Cell(flexcpBackColor

In C1FlexGrid cell appearance can becustomized using the CellStyle object

Create a cell style

Dim redStyle As CellStyle =

c1FlexGrid1Styles

c1FlexGrid1Cols-1) = vbRed

Demerit

To change the appearance of all red cellsyou need to clear all styles and start again oryou need to scan for red cells and thenchange their appearance

Add(Red)

redStyleBackColor = ColorRed

c1FlexGrid1Rows(2)Style =

redStyle

The main advantage of this approach is that thenew style is an object that can be changed orassigned to new ranges For instance tochange the fore-color and text font of red cellsyou would write

c1FlexGrid1Styles(Red)ForeColor

= ColorWhite

c1FlexGrid1Styles(Red)Font =

new Font(Arial 9)

The VSFlexGrid control had many propertiesthat affected the way the grid was displayed(eg BackColor BackColorAlternateBackColorBkg BackColorFixedBackColorFrozen BackColorSel and so on)

The C1FlexGrid control replaces all theseproperties with a collection of CellStyle objectsso you can write something likeStylesFixedBackColor orStylesHighlightForeColor This makes theobject model simpler more consistent andmore powerful You can change the built-instyles or define your own and assign them torows columns or arbitrary cell ranges

WinFormsグリッドの比較

FlexGrid or True DBGridComponentOne offers two grid components in WinForms Edition FlexGrid and True DBGrid While both of these are robust and easy-to-usegrids allowing you to browse edit add delete and manipulate tabular data they still have their own strengths and capabilities

Both ComponentOne WinForms Edition grids can be used in bound as well as unbound mode but C1FlexGrid allows you to work more easilyin unbound mode With C1FlexGrid you can customize trees and make use of its cell merging capabilities FlexGrid is also apt for deriving acustomized grid

If you are planning to develop or migrate to NET 5 or higher it is recommended to use C1FlexGrid While we will continue to supportC1TrueDBGrid in NET 5 it no longer receives new enhancements and features like C1FlexGrid

Comparing ComponentOne Grids with MS DataGridViewThis section gives you a quick comparison between the two ComponentOne WinForms Edition grids and the standard MS DataGridViewavailable for WinForms platform For easy navigation we have broadly divided these features into different categories Click on thecorresponding category in the right hand pane or scroll down to know more about availability of a particular feature

Data Binding

Features FlexGrid TrueDBGrid MS DataGridView

Binding Data Sources

Binding Data Sources with hierarchical datarelations

With custom code

Unbound data storage and manipulations

Data Presentation

Hierarchical Styles With custom code

TreeView-like Styles

MultiLine Data View

Grouping

Built-in Drag And Drop

Horizontal and Vertical Interactive Splits

Child grids within master grid support

Drop-Down Objects Support

Drop-Down Multicolumn Object support

Drop-Down Multicolumn Bindable and SortableObject support

Data Exchange

Export Data (Delimited Text XLS and XLSX)

Export Data in other formats (PDF HTML RTFJPG and other)

Load data from Excel files

Enhanced Printing data from grid and PrintPreview support

Cell Manipulations

In-Cell Objects

Enhanced Cell Editing with Custom Editors

Merging Cells and Rows

Customize Cells Merging

Drag And Drop Columns and rows

Automatic Cell Sizing

Fixed Non-scrolling Columns

Excel-style Cell Selection

Customize each Cell Rendering

Zooming Cells

Run-Time CellTips

Data Manipulations with Cell Ranges

Layout and Styling

Visual Styles Support

Dynamic Support of 38 Decoration Themes

Office 2007 and 2010 Styling

Alternating Row Colors

Customizable Cell Border Style

Data-Sensitive Display

Input and Navigation

Input Masking

Simplify Data Input

Automatic Data Translation

Spell Checking support

Customizable Keyboard Navigation and keysbehavior

Right-To-Left navigation

Touch Support

Clipboard support

Rich Scrolling Capabilities

Data Manipulations

Sorting

Multi-column Sorting

Extended and Conditional Filtering

Customizable filter form

Additional Filter Bar row

Multi-language Filtering

AutoSearch

Range Aggregates

Localization

Right-To-Left support

Net localization support

Regional settings support

Other Features

Optimize performance for displaying largeamount of data in bound and unbound mode

Just-In-Time Data Loading

Server-side Data Virtualization withC1DataSource

Automatic Lookup Columns with C1DataSource

Design-time extended support

Assembly size 1508 K 2108 K Part of

SystemWindowsForms

クイックスタート

This quick start will guide you through the steps of creating a simple grid application using the FlexGrid control Follow thesteps below to get started

This section demonstrates how to create a FlexGrid application in NET 452 by binding it to an externaldatasource You can also create a class to supply data to the grid as shown in the NET 5 tab Similarly you can usebelow steps to bind FlexGrid to a datasource in NET 5 However note that some design-time steps may vary in caseof NET 5

Set Up the Application1 Create a new Windows Forms app(NET Framework)2 Configure your project and set the Framework property3 Drag and drop the FlexGrid control from the Visual Studio toolbox onto the form

Observe An empty grid is added to the form at design time

Bind FlexGrid to a Data SourceThere are two ways to bind data with the FlexGrid control either choose to bind at design time or through code atrun time

Binding at Design Time

1 In the design view select the FlexGrid control and click smart tag to open the C1FlexGrid Tasks menu2 Click the Choose Data Source drop down button and select Add Project Data Source option to open the

Data Source Configuration Wizard3 On Choose a Data Source Type page select Database and click Next4 On Choose a Database Model page select Dataset and click Next5 On Choose Your Data Connection page click New Connection to open the Add Connection dialog6 Against the DataSource field click Change button to open the Change Data Source dialog7 Select Microsoft Access Database File and click OK to return to the Add Connection dialog8 Against the Database file name field click Browse and navigate to the database file Provide the User name

and Password if required to connect to the database file This example uses C1NWindmdb file located atthe following location by defaultDocumentsComponentOne SamplesCommon

9 Click Test Connection to make sure that you have successfully connected to the database or server and clickOK

NET 452

10 Click OK again to close the Add Connection dialog box11 Click Next to continue A dialog box will appear asking if you would like to add the data file to your project

and modify the connection string Choose the appropriate option as per your requirement12 Save the connection string in the application configuration file by checking the Yes save the connection as

box and entering a name13 Click Next to switch to the Choose Your Database Objects page14 Choose a table say Products from the Tables node and click Finish15 The above steps add a dataset and connection string to your project Also Visual Studio automatically creates

the following code to fill the datasetC

次のサンプルコードはデータを「c1NWindDataSetProducts」テーブルにロードします必要に応じて

移動または削除できます

thisproductsTableAdapterFill(thisc1NWindDataSetProducts)

次のサンプルコードはデータを「c1NWindDataSetProducts」テーブルにロードします必要に応じて移

動または削除できます

MeProductsTableAdapterFill(Mec1NWindDataSetProducts)

Binding at Run Time

To bind the grid through code first we need to create a database connection string Then use an object of dataadapter (in this case OleDbDataAdapter) to create a query to fetch products from the data table and fill it in thedata table which is assigned to the DataSource property of C1FlexGrid class

グリッドをデータソースに連結します

string conn = GetConnectionString()OleDbDataAdapter da = new OleDbDataAdapter(select from products conn)DataTable dt = new DataTable(Products)daFill(dt)c1FlexGrid1DataSource = dt

Dim conn As String = GetConnectionString()Dim da As OleDbDataAdapter = New OleDbDataAdapter(select from products conn)Dim dt As DataTable = New DataTable(Products)daFill(dt)c1FlexGrid1DataSource = dt

Note that the above sample code uses a custom method named GetConnectionString to create a connection stringwith database

static string GetConnectionString() string path = EnvironmentGetFolderPath(EnvironmentSpecialFolderPersonal) + ComponentOne SamplesCommon string conn = provider=microsoftjetoledb40data source=0c1nwindmdb return stringFormat(conn path)

Private Shared Function GetConnectionString() As String Dim path = EnvironmentGetFolderPath(EnvironmentSpecialFolderPersonal) amp

ComponentOne SamplesCommon Dim conn = provider=microsoftjetoledb40data source=0c1nwindmdb Return StringFormat(conn path)End Function

Configure the FlexGrid controlThis section walks you through the design-time and run-time steps to configure the grid with some basic settingsThese settings and features are explained in detail in the topics below

Configuring Grid at Design Time

Click smart tag to open the C1FlexGrid Tasks MenuClick the Styles option to open C1FlexGrid Styles EditorSelect Fixed from Built-in Styles pane customize some settings such as Backcolor Font and ForeColor andclick OKTo fit the grid to the form click the Dock in Parent Container optionFor customizing a column click the column (say Unit Price column) to open C1FlexGrid Column TasksMenuClick the ellipsis alongside Format field to open the Format String dialogSelect Currency as Format Type and click OK

Configuring Grid at Run Time

Add following code to configure the grid and its columns at run time

c1FlexGrid1StylesFixedForeColor = ColorBluec1FlexGrid1StylesFixedFont = new Font(Microsoft Sans serif 9 FontStyleBold)c1FlexGrid1Dock = DockStyleFillc1FlexGrid1Cols[6]Format = c

c1FlexGrid1StylesFixedForeColor = ColorBluec1FlexGrid1StylesFixedFont = New Font(Microsoft Sans serif 9 FontStyleBold)c1FlexGrid1Dock = DockStyleFillc1FlexGrid1Cols(6)Format = c

This section demonstrates how to create a FlexGrid application in NET 5 by populating its data from a custom classYou can also use an external datasource to supply data to the grid as shown in NET 452 tab However note thatsome design-time steps given in the aforementioned tab may vary in case of NET 5 Similarly you can use belowsteps to bind FlexGrid to an internal datasource in NET 452

Set Up the Application1 Create a new Windows Forms app(NET Framework)2 Configure your project and set the Framework property3 Initialize the FlexGrid control and add it to the form

コントロールを初期化します

C1FlexGrid flexGrid = new C1FlexGrid() フォームにコントロールを追加します

thisControlsAdd(flexGrid)

Dim flexGrid As C1FlexGrid = New C1FlexGrid() フォームにコントロールを追加します

MeControlsAdd(flexGrid)

Bind FlexGrid to a Data Source1 Create a custom class Product to be used as a data source

カスタムクラスProductを作成します

public class Product static Random _rnd = new Random()

static string[] _names = Macko|Surfair|Pocohey|StudebySplit(|) static string[] _lines = Computers|Washers|Stoves|CarsSplit(|) static string[] _colors = Red|Green|Blue|WhiteSplit(|) public Product() Name = _names[_rndNext() _namesLength] Line = _lines[_rndNext() _linesLength] Color = _colors[_rndNext() _colorsLength] Price = 30 + _rndNextDouble() 1000 Cost = 3 + _rndNextDouble() 300 Discontinued = _rndNextDouble() lt 2 Introduced = DateTimeTodayAddDays(_rndNext(-600 0)) public string Name get set public string Color get set public string Line get set public double Price get set public double Cost get set public DateTime Introduced get set public bool Discontinued get set

Public Sub New() Name = _names(_rnd[Next]() Mod _namesLength) Line = _lines(_rnd[Next]() Mod _linesLength) Color = _colors(_rnd[Next]() Mod _colorsLength) Price = 30 + _rndNextDouble() 1000 Cost = 3 + _rndNextDouble() 300 Discontinued = _rndNextDouble() lt 2 Introduced = DateTodayAddDays(_rnd[Next](-600 0)) End Sub

Public Property Name As String Public Property Color As String Public Property Line As String Public Property Price As Double Public Property Cost As Double Public Property Introduced As Date Public Property Discontinued As BooleanEnd Class

2 Initialize a list of type ProductC

Productがクラス型であるProduct型のリストを初期化します

ListltProductgt _products = new ListltProductgt()

Dim _products As List(Of Product) = New List(Of Product)()

3 Initialize a For loop and add products to the list

forループを初期化し製品をリストに追加します

for (int i = 0 i lt100 i++) _productsAdd(new Product())

For i As Integer = 0 To 100 - 1 _productsAdd(New Product())Next

4 Bind FlexGrid to the created data sourceC

FlexGridにデータを連結します flexGridDataSource = _products

Configure the FlexGrid controlAdd following code to configure the grid and its columns at run time

設計時サポート

FlexGrid for WinForms comes with various design time options to make your programming tasks a lot easier In addition to smart tag context menu andproperty grid FlexGrid provides tasks menus and editors as well While C1FlexGrid Tasks menu lets you work on the entire grid in design time the ColumnTasks menu provides options to set some common properties for each column of the grid At the same time various editors such as C1FlexGrid ColumnEditor and C1FlexGrid Style Editor provide detailed properties to customize the columns and styles

This section discusses about various design-time options available in the FlexGrid control

Topic Snapshot Content

Tasks Menus Discusses about the C1FlexGrid Tasks menu the Column Tasks menu and their options

C1FlexGrid Tasks MenuC1FlexGrid Column Tasks Menu

Editors Discusses about the various editors and how to access them

C1FlexGrid Column EditorC1FlexGrid Style EditorCaption Style EditorColumn Style Editor

タスクメニュー

C1FlexGrid Tasks MenuC1FlexGrid Tasks menu provides you an easy access to the commonly used properties of FlexGrid It also providesoptions to open various editors such as C1FlexGrid Column Editor C1FlexGrid Style Editor

To access the C1FlexGrid Tasks menu click the smart tag ( ) in the upper right corner of the grid Following tableexplains various options available through the C1FlexGrid Tasks menu

Option Description

ChooseDataSource

The dropdown opens the list of available data sourcesand gives you Add Project Data Source option to openData Source Configuration Wizard

For more information on how to add a new data sourceto the project see Bound Mode

EnableAddingRows

The checkbox toggles the AllowAddNew propertywhich allows users to add new row to the grid at runtime When checked ON it displays a template row withstar at the bottom of the grid to enter the new record

EnableDeletingRows

The checkbox toggles the AllowDelete property whichallows users to delete the selected rows by pressing theDelete key

EnableEditing

The checkbox toggles the AllowEditing property whichallows users to edit the grid

Enable Column Reordering The checkbox sets the AllowDragging property toColumns which allows users to re-order the columns by draggingthe column headers

Enable Column Filtering The checkbox toggles the FlexGridAllowFiltering property to

enable or disable the filtering on grid columns

VisualStyle The dropdown lets you choose the built-in visual styles availablein the grid By default the value is set to Custom

Designer The option opens C1FlexGrid Column Editor which allows you toset the properties of each column of the grid

Styles The option opens C1FlexGrid Style Editor which allows youto customize the various pre-defined styles or create the newstyles at design time

Display Hidden Columns The checkbox lets you display or hide grid columns in the designview Note that this option is NOT associated with the run-timevisibility of columns Hence even if this checkbox is checked ONcolumns with Visible property set to False still remain hiddenwhen the application is run

Column Tasks The option switches the task menu to C1FlexGrid Column Tasksmenu which provides options to set the properties for theselected column

About C1FlexGrid The option displays a dialog box displaying the information suchas version of the FlexGrid control

Dock in Parent Container This option sets the Dock property of the grid to Fill which resizesthe grid to occupy the whole form space Clicking the option alsoswitches the text and provides option to Undock in ParentContainer which restores the grid to its original size

C1FlexGrid Column Tasks MenuC1FlexGrid Column Tasks menu provides you an easy access to the commonly used properties of grid columns Italso provides options to open editors named Caption Style and Column Style

To access the C1FlexGrid Column Tasks menu double-click header of the column to be configured at design-timeAnother way to open C1FlexGrid Column Tasks menu is to click on the smart tag ( ) in the upper right corner of thegrid and then navigate to the Column Tasks option Following table explains various options available through theC1FlexGrid Column Tasks menu

Option Description

ColumnCaption

The field allows you to specify the value of Captionproperty which sets text in header cell of the column

DataField

The dropdown opens a list of available fields in the datasource to choose from and sets value of Name property ofthe column

DataType

The dropdown opens a list of available data types and letsyou set the data type of the selected column This fieldcorresponds to the DataType property of the column

EditMask

The field lets you specify value of EditMask property whichsets mask for the selected column The ellipsis button onthe right side of the field opens the Input Mask dialog boxwhere you can select from the list of pre-defined masks

FormatString

The field lets you specify the value of Format propertywhich sets format string to display data value from source

ComboList

The field lets you specify the list of multiple values fromwhich user can choose The ellipsis button on the right sideof the field lets you open the Combo List dialog box whereyou can specify the value options

Allow Sorting The checkbox toggles the AllowSorting property to enable ordisable sorting in the column By default sorting is enabled for allcolumns

Allow Editing The checkbox toggles the AllowEditing property to make thecolumn read-only or editable By default editing is enabled for allcolumns

Allow Resizing The checkbox toggles the AllowResizing property which allows usersto adjust the size of column at run time By default resizing isenabled for all columns

Allow Dragging The checkbox toggles the AllowDragging property to enable ordisable re-ordering of the column at run time By default dragging isenabled for all columns

Allow Merging The checkbox toggles the AllowMerging property to enable ordisable merging two adjacent column cells having same values Bydefault merging is disabled for all columns

Allow Filtering The dropdown lets you specify the value of ColumnAllowFilteringproperty and choose the type of filter for each column The availableoptions are Default ByValue ByCondition Custom or None

Visible The checkbox lets you set the visibility of the column in the grid atrun time by toggling value of its Visible property

Caption Style The option opens the Caption Style editor which gives you options tostyle the text alignment background and border for the header cellof column

Column Style The option opens the Column Style editor which gives you options tostyle the text alignment background and border for the column text

C1FlexGrid Tasks The option switches the task menu to C1FlexGrid Tasks menu whichprovides options to set the properties for the entire grid

Dock in Parent Container The option sets the Dock property of the grid to Fill which resizes thegrid to occupy the whole form Clicking the option also switches thetext and provides option to Undock in Parent Container whichrestores the grid to its original size by setting the Dock property toNone

エディタ

Apart from the tasks menu FlexGrid also provides various editors that help you set a number of properties related togrid its columns and their styles

C1FlexGrid Column EditorFlexGrid provides the C1FlexGrid Column Editor making it easy to work with columns at design-time instead ofwriting code The editor lets you set various properties related to columns such as Caption DataTypeAllowFiltering and AllowMerging through its property pane on left hand side Toolbar on the top of this editorgives you options such as reloading data from the data source adding removing and resizing columns You can evenstyle the column text using the options given in this toolbar For further customization of column text you can usethe Column Style editor to access more specific properties

There are three ways in which you can access the C1FlexGrid Column Editor at design time

Smart Tag Click the smart tag ( ) in the upper right corner of the grid and select Designer from theC1FlexGrid Tasks menuProperty Window Select the grid go to the Properties window and click the ellipsis button (hellip) next to theCols propertyContext Menu Right-click the grid and select Designer from the context menu

C1FlexGrid Style EditorFlexGrid provides the C1FlexGrid Style editor which lets you style the grid at design time by customizing the built-instyles and creating the new ones The editor offers a list of styles for specific types of cell on left hand side and aproperty window on right hand side to customize these styles The list of styles is divided into two sections thedefault Built-in Styles and Custom Styles Towards the bottom there are Add and Remove buttons to add anddelete the custom styles and a Clear button to revert the editor to default settings The AutoFormat button in theend opens a secondary dialog C1FlexGrid Auto Format which lists the pre-defined set of styles and also shows apreview in the Preview pane

There are three ways in which you can access the C1FlexGrid Style Editor at design-time

Smart Tag Click the smart tag ( ) in the upper right corner of the grid and select Styles from theC1FlexGrid Tasks menuProperty Window Select the grid go to the Properties window and click the ellipsis button (hellip) next to theStyles propertyContext Menu Right-click the grid and select Styles from the context menu

Caption Style EditorFlexGrid provides the Caption Style editor which allows you to set styling related properties of the column header celland its text The editor comprises of four tabs Text Alignment Border and Background for customizing variousaspects of the header cells

To access the Caption Style editor click smart tag ( ) click the C1FlexGrid Column Tasks option on the task menu toopen column tasks and then go to Caption Style option

Column Style EditorSimilar to Caption Style editor FlexGrid provides another editor the Column Style editor for styling the column textThe editor has got the same options as that of Caption Style editor The only difference is that Caption Style editorcustomizes the column header text while this editor works on the general text in the column cells

To access the Column Style editor click smart tag ( ) click the C1FlexGrid Column Tasks option on the task menu toopen column tasks and then go to Column Style option

データ

This section discusses about various ways to populate data in the FlexGrid control

Unbound Mode Discusses how to populate data in the unbound grid

Bound Mode Discusses ways of populating data in the grid through data binding and various operations on bound grid

Binding at design timeBinding at run time using DataSource propertyBinding at run time using SetDataBinding methodOperations in Bound Mode

非連結モード

As the name suggests in unbound mode grid is not bound to any data source and data is stored in the control itselfIn this case you need to provide data by adding rows and columns either at design time or programmatically throughrow and column collections You can also create an empty grid to let user enter the data

An unbound grid is not a very common scenario as grid does not store the data and hence user needs to manage itmanually However unbound grids suits better to some business scenarios like creation and maintenance of recordsFor instance you can use the grid in unbound mode for recording the date-wise sales data or to maintain the dailyinventory changes Below example demonstrates a grid with data populated through code

In C1FlexGrid you can add empty rows or columns by setting the Count property of row or column objects Also youcan use the Add method of these collections to add the empty rows and columns to a grid To set data in the cellsyou can either use the familiar index notation(Item property) or the SetData method For more information on settingdata in the cells see Storing and Retrieving Data

Use the code below to populate data in unbound FlexGrid for WinForms

連結されていない列を追加しますColumn col = _flexColsAdd()colName = colCaption = Unbound_flex[1 Unbound] = 123

連結されていない列を追加しますDim col As Column = C1FlexGrid1ColsAdd()colName = UnboundcolCaption = Unbound

連結モード

Bound mode as the name suggests refers to a state where grid fetches its data from an underlying data source Databinding also allows multiple data consumers to be connected to a data provider in the synchronized manner

FlexGrid supports data binding to most of the commonly used data sources such as ObservableCollection IListltTgtListltTgt Array BindingSource ADONET objects such as DataSet DataTable etc

There are three ways of binding FlexGrid to a data source

Binding at design timeBinding at run time using DataSource propertyBinding at run time using SetDataBinding method

Binding at Design Time1 In the design view select the FlexGrid control and click smart tag to open the C1FlexGrid Tasks menu2 Click the Choose Data Source drop down button and select Add Project Data Source option to open the

and Password if required to connect to the database file This example uses C1NWindmdb file located at thefollowing location by defaultDocumentsComponentOne SamplesCommon

the following code to fill the dataset

Binding at Run Time Using DataSource PropertyFlexGrid provides the DataSource property to bind the FlexGrid control to a data source at run time You need toassign a data source object to the DataSource property of FlexGrid If the data source object contains more than onetable you can set the DataMember property to table name to specify the target table

Following code uses DataSource property to bind data to the WinForms FlexGrid

Note that the above sample code uses a custom method named GetData to supply data You can set up the datasource as per your requirements Following code shows an example of creating data for WinForms FlexGrid

次のサンプルコードはデータを「c1NWindDataSetProducts」テーブルにロードします必要に応じて移動または削除できます thisproductsTableAdapterFill(thisc1NWindDataSetProducts)

次のサンプルコードはデータを「c1NWindDataSetProducts」テーブルにロードします必要に応じて移動または削除できます MeProductsTableAdapterFill(Mec1NWindDataSetProducts)

c1FlexGrid1BeginUpdate()C1DataCollectionltCustomergt c1DataCollection = new C1DataCollectionltCustomergt(GetData())c1FlexGrid1DataSource = new C1DataCollectionBindingList(c1DataCollection)c1FlexGrid1EndUpdate()

c1FlexGrid1BeginUpdate()Dim c1CollectionView As C1DataCollectionC1DataCollection(Of Customer) = New C1DataCollectionC1DataCollection(Of Customer)(GetData())c1FlexGrid1DataSource = New C1DataCollectionBindingListC1DataCollectionBindingList(c1CollectionView)c1FlexGrid1EndUpdate()

ObservableCollectionltCustomergt GetData() var data = new ObservableCollectionltCustomergt() for (int i = 0 i lt 25 i++)

Binding at Run Time Using SetDataBinding MethodFlexGrid also provides the SetDataBinding method using which you can set DataSource and DataMember propertiesboth using a single call The following code demonstrates an example of rendering a parent table and its child tablesin different grids with the help of the SetDataBinding method

Below code demonstrates how to bind data to WinForms FlexGrid using SetDataBinding method

dataAdd(new Customer()) return data

Private Function GetData() As ObservableCollection(Of Customer) Dim data = New ObservableCollection(Of Customer)()

For i = 0 To 25 - 1 dataAdd(New Customer()) Next

Return dataEnd Function

グリッドにデータセットを連結します_flexCustomersBeginUpdate()_flexCustomersSetDataBinding(ds Customers)_flexCustomersEndUpdate()

_flexOrdersBeginUpdate()_flexOrdersSetDataBinding(ds CustomersCustomerOrders)_flexOrdersEndUpdate()

_flexOrderDetailsBeginUpdate()_flexOrderDetailsSetDataBinding(ds CustomersCustomerOrdersOrderDetails)_flexOrderDetailsEndUpdate()

グリッドにデータセットを連結します_flexCustomersBeginUpdate()_flexCustomersSetDataBinding(ds Customers)_flexCustomersEndUpdate() _flexOrdersBeginUpdate()_flexOrdersSetDataBinding(ds CustomersCustomerOrders)_flexOrdersEndUpdate() _flexOrderDetailsBeginUpdate()_flexOrderDetailsSetDataBinding(ds CustomersCustomerOrdersOrderDetails)_flexOrderDetailsEndUpdate()

連結モードでの操作

Adding Unbound Column in Bound ModeIn the bound mode grid fetches the data from data source and display it as records and bound columns To add a column to

display data that does not exist in the data source you need to add unbound columns at design time or through code

Adding unbound column at design time

1 In the design view select the FlexGrid control and click smart tag to open the C1FlexGrid Tasks menu2 Bind the grid control with a data source For detailed steps about how to bind FlexGrid to a data source see Bound

Mode3 Click the Designer option to open the C1FlexGrid Column Editor4 In the right hand side pane select an existing column from the grid preview5 Click Insert Column options in the toolbar to add a column before or after the selection

Adding unbound column through code

FlexGrid provides Add Insert and InsertRange method of the ColumnCollection class to add an unbound column to the gridWhile Add method adds a column at the end the Insert method lets you specify the position where you want to add a newcolumn Similarly you can add multiple columns at a specified position by using the InsertRange method

Use the code below to add unbound column in a bound WinForms FlexGrid

Set Values in Unbound ColumnTo define values in the unbound column of bound grid you need to usethe SetUnboundValue and GetUnboundValue events of the C1FlexGrid class First create a hash table to store the enteredvalues then use the SetUnboundValue event to set unbound value in the hash table using a unique key to identify therecord and use GetUnboundValue event to get the value stored in the hash table using its unique key and set unboundvalue to be displayed in the cell

Following code shows how to set values in an unbound column added to a bound WinForms FlexGrid

Displaying Data in Fixed ColumnTo set values in the fixed columns you need to set DrawMode property of the C1FlexGrid class to OwnerDraw in the formload event and then create the OwnerDrawCell event to set values in the fixed column cells In this example we are settingrow numbers in the fixed column of a bound WinForms FlexGrid

get value from hashtable using ProductID as keyvoid _flex_GetUnboundValue(object sender C1WinC1FlexGridUnboundValueEventArgs e) DataRowView drv = (DataRowView)_flexRows[eRow]DataSource eValue = _hash[drv[ProductID]]

store value in hashtable using ProductID as keyvoid _flex_SetUnboundValue(object sender C1WinC1FlexGridUnboundValueEventArgs e) DataRowView drv = (DataRowView)_flexRows[eRow]DataSource _hash[drv[ProductID]] = eValue

Private Sub C1FlexGrid1_GetUnboundValue(sender As Object e As C1WinC1FlexGridUnboundValueEventArgs) Handles C1FlexGrid1GetUnboundValue Dim drv As DataRowView = DirectCast(C1FlexGrid1Rows(eRow)DataSource DataRowView) eValue = _hash(drv(ProductID))End Sub

Private Sub C1FlexGrid1_SetUnboundValue(sender As Object e As C1WinC1FlexGridUnboundValueEventArgs) Handles C1FlexGrid1SetUnboundValue Dim drv As DataRowView = DirectCast(C1FlexGrid1Rows(eRow)DataSource DataRowView) _hash(drv(ProductID)) = eValueEnd Sub

Auto-adjust Column WidthFlexGrid provides AutoResize property of the C1FlexGrid class to adjust the width of columns automatically according tothe text length You need to set the property to true before binding it to the data source to load the grid with appropriatecolumn width You can also call AutoSizeCol method to adjust the width of the specified column

Use the code below auto-adjust the column width according to the text in WinForms FlexGrid

Display Bitmap Image in FieldIn most of the scenarios grid directly fetches the images from the data source However if the grid is bound to a databasewhich stores images as OLE objects such as Microsoft Access a little bit of extra processing is required to fetch bitmapimages In such case you need to convert the image data stored as byte array to a memory stream and then usethe OwnerDrawCell event to load the image In the form load event you need to set the DrawMode property toOwnerDraw Also adjust the height of row to display the image properly

Following code demonstrates how to display bitmap image in fields of WinForms FlexGrid

private void C1FlexGrid1_OwnerDrawCell(object sender OwnerDrawCellEventArgs e) if ((eRow gt= thisc1FlexGrid1RowsFixed) amp (eCol == (thisc1FlexGrid1ColsFixed - 1))) eText = eRowToString() または任意のテキスト

Private Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As OwnerDrawCellEventArgs) If eRow gt= Mec1FlexGrid1RowsFixed And eCol Is Mec1FlexGrid1ColsFixed - 1 Then eText = eRowToString() または任意のテキスト End IfEnd Sub

すべての列の幅を自動的に調整します c1FlexGrid1AutoResize = true

4列目の幅を自動調整します c1FlexGrid1AutoSizeColumns(3)

すべての列の幅を自動的に調整します c1FlexGrid1AutoResize = True

private void C1FlexGrid1_OwnerDrawCell(object sender C1WinC1FlexGridOwnerDrawCellEventArgs e) if(eMeasuring ampamp eRowgt=c1FlexGrid1RowsFixed ampamp eCol gt=

Note that the above sample code uses a custom method LoadImage method to convert the images from byte array to amemory stream

c1FlexGrid1ColsFixed) 「Photo」はblob（byte []）に保存された画像です if (c1FlexGrid1Cols[eCol]Name == Picture) mdbからロードしてみてください eImage = LoadImage(c1FlexGrid1[eRow eCol] as byte[])

画像が表示された場合はテキストを入力しないでください if (eImage = null) eText = null

Private Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As C1WinC1FlexGridOwnerDrawCellEventArgs) If Not eMeasuring AndAlso eRow gt= c1FlexGrid1RowsFixed AndAlso eCol gt= c1FlexGrid1ColsFixed Then

「Photo」はblob（byte []）に保存された画像です If c1FlexGrid1Cols(eCol)Name Is Picture Then mdbからロードしてみてください eImage = LoadImage(TryCast(c1FlexGrid1(eRow eCol) Byte()))

画像が表示された場合はテキストを入力しないでください If eImage IsNot Nothing Then eText = Nothing End If End IfEnd Sub

Image LoadImage(byte[] picData) static Image LoadImage(byte[] picData) これが埋め込みオブジェクトであることを確認してください const int bmData = 78 if (picData == null || picDataLength lt bmData + 2) return null if (picData[0] = 0x15 || picData[1] = 0x1c) return null

現在点ではビットマップのみを処理します if (picData[bmData] = B || picData[bmData + 1] = M) return null

画像をロードします Image img = null try MemoryStream ms = new MemoryStream(picData bmData picDataLength - bmData) img = ImageFromStream(ms) catch

画像を返します return img

Private Function LoadImageMethod(ByVal picData As Byte()) As Image

Private Shared Function LoadImage(ByVal picData As Byte()) As Image これが埋め込みオブジェクトであることを確認してください Const bmData As Integer = 78 If picData Is Nothing OrElse picDataLength lt bmData + 2 Then Return Nothing If picData(0) ltgt ampH15 OrElse picData(1) ltgt ampH1c Then Return Nothing

現在点ではビットマップのみを処理します If picData(bmData) ltgt Bc OrElse picData(bmData + 1) ltgt Mc Then Return Nothing

画像をロードします Dim img As Image = Nothing

Try Dim ms As MemoryStream = New MemoryStream(picData bmData picDataLength - bmData) img = ImageFromStream(ms) Catch End Try

画像を返します Return imgEnd Function

A grid control is a collection of rows and columns Columns generally contain a particular type of information through out while rows are used to recorddifferent types of information about a particular item

In FlexGrid the collection of columns is represented by the ColumnCollection class which can be accessed through Cols property of the C1FlexGrid class Thissection discusses the various operations that can be performed on columns

BasicOperations

Discusses about how to perform basic column operations

Set Column CountAdd ColumnDelete ColumnInsert ColumnSet Data TypeSet Fixed ColumnSet Frozen Column

UserInteraction

Discusses about operations that can be performed by the end user at run time

Allow EditingAllow DraggingAllow FreezingAllow SortingAllow FilteringAllow Resizing

Editors Discusses about various built-in editors of FlexGrid and operations related to them Also discusses how to use customeditors in the FlexGrid

CheckBoxNumericDateComboBoxMaskMapped ListCell Button

Validation Discusses how to apply validation and show error information on FlexGrid cells

Sparkline Discusses about how to display Sparkline charts in FlexGrid cells

Header andFooter

Discusses about how to set column header and footer

Set Header TextMerge column headerWrap column header textStyle Column HeaderSet Column Footer

Sizing Discusses about various aspects of column sizing

Set Column WidthAuto-adjust Column WidthSet MinMax Column WidthStar Sizing

基本操作

This topic discusses various basic operations which can be performed on a column

Set Column CountWhen grid is bound to a data source the number of columns is determined by the number of fields available in thedata source However in the case of unbound mode you can set any arbitrary value in the Count property ofthe ColumnCollection class to set the number of columns to be displayed in the grid

Use the code below to set the number of columns to be added to WinForms FlexGrid in unbound mode

Add ColumnFlexGrid provides two ways to add a new column using the ColumnCollection class You can either use Add methodor increment the value of Count property provided by the class to add new columns Also note that if a new columnis added to a bound grid using these methods it is added as an unbound column only

Following are the two approaches to add column to a WinForms FlexGrid

Delete ColumnTo delete a particular column from the grid you can use Remove method of the ColumnCollection class and specifythe column you want to delete as its parameter In the unbound grid you can also reduce the number of columns bychanging the value of Count property This removes columns from the end of the column collection TheColumnCollection class also provides RemoveRange method which allows you to remove a range of columns

列数を設定します c1FlexGrid1ColsCount = 4

列数を設定しますc1FlexGrid1ColsCount = 4

方法1 列コレクションのAddメソッドを使用します C1WinC1FlexGridColumn c c = c1FlexGrid1ColsAdd() cCaption = New Column

方法2 列コレクションのCountプロパティを変更します c1FlexGrid1ColsCount += 1 c1FlexGrid1Cols[c1FlexGrid1ColsCount - 1]Caption = New Column

方法1 列コレクションのAddメソッドを使用します Dim c As C1WinC1FlexGridColumn c = c1FlexGrid1ColsAdd() cCaption = New Column

方法2 列コレクションのCountプロパティを変更します c1FlexGrid1ColsCount += 1 c1FlexGrid1Cols(c1FlexGrid1ColsCount - 1)Caption = New Column

Below code snippet shows all the three approaches to delete column from the WinForms FlexGrid

Insert ColumnTo insert a column in FlexGrid at a specific location you can use Insert method of the ColumnCollection class whichlets you specify the position where columns are to be inserted You can also insert multiple columns in the grid byusing the InsertRange method These methods add the unbound columns only even if the grid is a bound grid

Use any of the following approaches to insert a column in the WinForms FlexGrid at the specified location

方法1 列コレクションのRemoveメソッドを使用して2番目の列を削除します c1FlexGrid1ColsRemove(2)

方法2 Countプロパティを変更して最後の列を削除します c1FlexGrid1ColsCount -= 1

方法3 RemoveRangeメソッドを使用して2番目から始まる4つの列を削除します c1FlexGrid1ColsRemoveRange(2 4)

C1WinC1FlexGridColumn c

方法1 Insertメソッドを使用して2番目の位置に列を挿入します c = c1FlexGrid1ColsInsert(2) cCaption = Inserted Column

方法2 InsertRangeメソッドを使用して2番目の位置に3つの列を挿入します c1FlexGrid1ColsInsertRange(2 3)

Dim c As C1WinC1FlexGridColumn 方法1 Insertメソッドを使用して2番目の位置に列を挿入します c = c1FlexGrid1ColsInsert(2) cCaption = Inserted Column 方法2 InsertRangeメソッドを使用して2番目の位置に3つの列を挿入します c1FlexGrid1ColsInsertRange(2 3)

Set Data TypeIn case of a bound FlexGrid data type of each bound column is automatically picked from the data source dependingon the data However in the case of unbound mode you can set the data type of columns by specifyingthe DataType property of Column class You can also set the Data Type property at design time by using theColumn Tasks menu For more information on tasks menus see Tasks Menus Note that when a particular data type isset to a FlexGrid column its cells accept the user input of keys accepted by the data type only For instance you cannot input alphabets in a Numeric type cell

Set the data type of an unbound column in WinForms FlexGrid as shown in the code below

Set Fixed ColumnFixed columns refer to the columns with non-editable cells which are always visible in the left hand side of the grideven if user scrolls the grid horizontally In FlexGrid fixed columns can be set using Fixed property ofthe ColumnCollection class This property accepts an integer value that specifies the number of columns to be fixed

Use the code below to set one column as fixed in the WinForms FlexGrid

Set Frozen ColumnFrozen columns similar to fixed columns are non-scrollable but can be edited by the user In FlexGrid frozen columnscan be set by using Frozen property provided by the ColumnCollection class

To set frozen columns in the WinForms FlexGrid use the code below

最初の列のデータ型を設定します c1FlexGrid1Cols[1]DataType = typeof(int)

最初の列のデータ型を設定しますc1FlexGrid1Cols(1)DataType = GetType(Integer)

1つの列を固定列として設定しますc1FlexGrid1ColsFixed = 1

最初の4列を静止として設定しますc1FlexGrid1ColsFrozen = 4

ユーザー操作

This topic discusses how you can let end users interact with the FlexGrid columns

Allow EditingBy default FlexGrid allows to edit all columns of the grid However you can choose to disable editing of a particularcolumn by setting AllowEditing property of the Column object to false You can also disable editing of the whole gridby setting the C1FlexGridAllowEditing property to false For more information on editing see Edit

Following code shows how to disable editing of WinForms FlexGrid while keeping only one column editable

Allow DraggingFlexGrid by default allows user to reorder columns by dragging a column header and dropping it to the targetposition However you can change this behavior by using the FlexGridAllowDragging propertyand ColumnAllowDragging property To disable dragging of a particular column you can set theColumnAllowDragging property of that column to false On the other hand setting the FlexGridAllowDraggingproperty to either Rows or None disables the column reordering at grid level This property accepts the valuesfrom AllowDraggingEnum You can also disable column reordering at design time by checking off the Enable ColumnReordering checkbox in the C1FlexGrid Tasks menu For more information on tasks menus see Tasks Menus

グリッド全体で編集を無効にしますc1FlexGrid1AllowEditing = false

3列目でのみ編集を有効にしますc1FlexGrid1Cols[3]AllowEditing = true

グリッド全体で編集を無効にしますc1FlexGrid1AllowEditing = False

3列目でのみ編集を有効にしますc1FlexGrid1Cols(3)AllowEditing = True

Below code demonstrates how to enable dragging of columns in WinForms FlexGrid

Allow FreezingTo allow end user to freeze the columns at runtime you can use the AllowFreezing property of the C1FlexGrid classwhich accepts values from AllowFreezingEnum When this property is set to Columns or Both a lock sign appearswhen mouse is hovered over the edge of header column User can click and drag the lock sign to freeze the columns

Following code shows how to allow users to freeze the columns in WinForms FlexGrid

Allow PinningFlexGrid lets you allow your users to pin a particular column or column range at run time by using the AllowPinningproperty of the C1FlexGrid class Setting the property adds a Pin button( ) in the column header which allows usersto pin columns at run-time so they remain in view as the user scrolls the grid horizontally The property accepts itsvalues from AllowPinning enumeration which lets you set pinning for a single column or a column range Whenproperty is set to ColumnRange user can pin or unpin all the columns starting from left till the clicked column in onego

グリッド全体ですべての列のドラッグを許可します c1FlexGrid1AllowDragging = C1WinC1FlexGridAllowDraggingEnumColumns

特定の列のドラッグを無効にしますc1FlexGrid1Cols[3]AllowDragging = false

特定の列のドラッグを無効にします c1FlexGrid1Cols(3)AllowDragging = False

実行時に列のフリーズを許可します c1FlexGrid1AllowFreezing = C1WinC1FlexGridAllowFreezingEnumColumns

実行時に列のフリーズを許可しますc1FlexGrid1AllowFreezing = C1WinC1FlexGridAllowFreezingEnumColumns

Use the code below to let user pin multiple columns in the WinForms FlexGrid

Allow SortingIn FlexGrid column sorting is enabled for the whole grid by default and value of AllowSorting property of theC1FlexGrid class is set to Auto In this mode user can sort a single column by clicking the column header andmultiple columns by holding the CTRL key while clicking the column headers On sorting multiple columns the gridshows sort index in the column header next to the sort direction glyph You can also choose to prevent sorting orsimply change the way the columns are sorted through AllowSortingEnum enumeration The AllowSortingEnumenumeration allows you to choose whether to auto sort columns sort single column multiple columns or columnrange or just prevent sorting

You can enable multi-column sorting in the WinForms FlexGrid using the code below When AllowSorting propertyis set to MultiColumn user may sort multiple columns by simply clicking on their headers one after the other

ユーザーが列範囲を固定できるようにしますc1FlexGrid1AllowPinning = C1WinC1FlexGridAllowPinningColumnRange

グリッドで複数列の並べ替えを有効にしますc1FlexGrid1AllowSorting = C1WinC1FlexGridAllowSortingEnumMultiColumn

1列のみの並べ替えを無効にしますc1FlexGrid1Cols[1]AllowSorting = false

1列のみの並べ替えを無効にしますc1FlexGrid1Cols(1)AllowSorting = False

To disable sorting on a particular column you need to set the ColumnAllowSorting property of that column to falseFor more information on sorting see Sort

Allow FilteringFlexGrid doesnt allow filtering at runtime by default However you can enable it by settingthe C1FlexGridAllowFiltering property to true To define the type of filter you want to apply on a particularcolumn you can use the ColumnAllowFiltering property which accepts following values from the AllowFilteringenumeration

AllowFiltering Values Description

Default The grid automatically creates a filter of type ColumnFilter This filteris the combination of a value filter and a condition filter

ByValue The grid automatically creates a filter of type ValueFilter This filteroffers a checkbox list of values to choose from Values that are notchecked in the list are excluded from the filter output

ByCondition The grid automatically creates a filter of type ConditionFilter Thisfilter provides several options such as Equals is Greater thanContains Begins with etc to create conditions You can also combinetwo conditions by using the And and Or operators available in thefilter

Custom The grid does not create a filter automatically and allows you to defineyour own filter and then explicitly assign it to Filter property of theColumn class

None Filtering is disabled for the column

For more information on filtering see Filter

Following code shows how to enable filtering in the WinForms FlexGrid and how to apply filters

Allow ResizingBy default FlexGrid allows resizing of all columns of the grid To change this behavior you can use AllowResizingproperty of the C1FlexGrid class This property accepts values from the AllowResizingEnum enumeration which letsyou resize columns rows both or none The enumeration also gives you options to uniformly resize the rows columnsor both that is if you resize one of the columns or rows the grid automatically resizes rest of the columns or rows as

グリッドレベルでのフィルタリングを許可します c1FlexGrid1AllowFiltering = true

最初の列に条件フィルターを適用します c1FlexGrid1Cols[1]AllowFiltering = C1WinC1FlexGridAllowFilteringByCondition

グリッドレベルでのフィルタリングを許可しますc1FlexGrid1AllowFiltering = True

最初の列に条件フィルターを適用しますc1FlexGrid1Cols(1)AllowFiltering = C1WinC1FlexGridAllowFilteringByCondition

well FlexGrid also provides ColumnAllowResizing property which is a Boolean type property and lets you enable ordisable resizing of a particular row or column

Below code shows how to allow users to resize columns of WinForms FlexGrid

Enable Context MenuFlexGrid provides support for column context menu at run-time to facilitate quick actions related to columnoperations To enable the column context menu on right-click you need to set ColumnContextMenuEnabled propertyprovided by the C1FlexGrid class to true By default this property is set to false

The column context menu provides following options

Option Description

Sort Ascending Sorts the column in ascending order

Sort Descending Sorts the column in descending order

Group by This Groups the grid data based on column under mouse pointer

列と行のサイズを均一に変更できますc1FlexGrid1AllowResizing = C1WinC1FlexGridAllowResizingEnumBoth

最初の列のサイズ変更のみを無効にしますc1FlexGrid1Cols[1]AllowResizing = false

最初の列のサイズ変更のみを無効にしますc1FlexGrid1Cols(1)AllowResizing = False

Column

Ungroup Removes grouping from the grid data The option displays only when grid is in groupedstate

Hide this Column Hides the column under mouse pointer

Auto size Resizes the column according to the length of longest value

Auto size (allcolumns)

Resizes all columns according to the length of longest value in each of them

列のコンテキストメニューを有効にしますc1FlexGrid1ColumnContextMenuEnabled = true

列のコンテキストメニューを有効にしますc1FlexGrid1ColumnContextMenuEnabled = True

Option Description

エディタ

This topic discusses various built-in editors of FlexGrid and operations related to them The topic also takes you through thesteps to apply custom editors in the FlexGrid columns

Built-in EditorsFlexGrid provides several built-in editors to enable efficient in-cell editing The grid uses TextBox control as its default editorHowever other built-in editors such as numeric date checkbox and combo box are also supported These editors areautomatically assigned generally based on the value of some specific properties such as DataType property of the column Thetable below summarizes the built-in editors provided by FlexGrid their brief description and the example codes demonstratingthem For more information about built-in editors and their customization click the corresponding hyperlink

Built-inEditor

Snapshot Description Sample Code

Checkbox Gets enabledautomatically whenDataType propertyof the Columnobject is set to

c1FlexGrid1Cols[colIndex]DataType =

typeof(Boolean)

Boolean

Numeric Gets enabledautomatically whenDataType propertyis set to a numericdata type such asInt or Decimal

typeof(Int32)

Date Gets enabledautomatically if theDataType propertyof column is set toDate or DateTime

typeof(DateTime)

ComboBox Gets enabled bysetting multiplevalues separated bypipe inthe ComboListproperty

c1FlexGrid1Cols[colIndex]ComboList =

Red|Green|Blue|Red|White

Mask Gets enabled whenthe EditMaskproperty of columnis set

c1FlexGrid1Cols[colIndex]EditMask =

(999) 999-9999

Mappedlist

Gets enabled whenthe DataMapproperty is set to anIDictionary objectwhich establishesmapping betweenvalues stored in thegrid and thosevisible to a user

ListDictionary customerNames = new

ListDictionary()

customerNamesAdd(AJK18F Sam

Anders)

customerNamesAdd(BBK21D Daneil)

customerNamesAdd(AEF25N Henry

Hussain)

customerNamesAdd(BZD42S Owen

Romanov)

customerNamesAdd(AKC16G Serena

Nguyen)

c1flexGrid1Cols[Name]DataMap =

customerNames

c1flexGrid1ShowButtons =

ShowButtonsEnumWithFocus

Cell Button Gets enabled whenthe ComboListproperty is set to anellipsis() whichautomaticallydisplays a cellbutton in editmode You can then

c1flexGrid1Cols[colIndex]ComboList

c1flexGrid1CellButtonClick +=

C1flexGrid1_CellButtonClick

capturethe CellButtonClickevent either toshow a dialog boxor to perform anyother operation

Custom EditorsFlexGrid control provides most of the commonly used editing options through the above-mentioned built-in editors However inaddition you can also use external controls as editors to meet the specialized editing needs Any control that derives from thebase Control class can be easily used as an editor This can be done at design time as well as through code In the examplebelow we are setting the C1ColorPicker control as a cell editor

At Design Time

1 Add the C1FlexGrid control and C1ColorPicker control to the form2 Select Designer option from the C1FlexGrid Tasks menu to open the C1FlexGrid Column Editor3 Select a column and switch to Properties pane on left hand side4 Navigate to the Editor property and set its value to instance of the C1ColorPicker control

At Run Time

To set an external control as editor through code create an instance of the control and assign it to the Editor property ofthe Column object

See the code below to know how to set an external control as editor in WinForms FlexGrid column

カスタムエディタとして使用するC1ColorPickerコントロールのインスタンスを作成します C1WinC1InputC1ColorPicker customeditor = new C1WinC1InputC1ColorPicker() カスタムエディタにEditorプロパティを割り当てます c1FlexGrid1Cols[1]Editor = customeditor

For controls which are not derived from the Control base class it is still possible to use them as editors usingIC1EmbeddedEditor interface You can even use the UITypeEditor classes as grid editors This way the FlexGrid control canuse virtually any control as a cell editor For more information about the implementation see the product sample named CustomEditors

Note The abovementioned product sample is located at DocumentsComponentOneSamplesWinFormsvxxxC1FlexGridCS on your system if you have installed the samples while installing WinForms Editionusing ComponentOneControlPanelexe

カスタムエディタとして使用するC1ColorPickerコントロールのインスタンスを作成します Dim customeditor As C1WinC1InputC1ColorPicker = New C1WinC1InputC1ColorPicker()

カスタムエディタにEditorプロパティを割り当てます c1FlexGrid1Cols(1)Editor = customeditor

チェックボックス

Display Checkbox for Boolean ValuesFlexGrid by default uses the checkbox editor for representing the Boolean values That is when the DataTypeproperty of a Row or Column object is set to Bool type a checkbox appears in the cells and user can toggle the valueof an editable cell simply by clicking it

To disable this default behavior and display text value instead of a checkbox in a Bool type you can set the Formatproperty of Row or Column object to string values

Default Checkbox Checkbox with Text Checkbox with Non-Boolean Value Three-state Checkbox

Use the code below to set checkbox type editor in a WinForms FlexGrid column and configure it further

データ型をブール値に設定します（チェックボックスを自動的に表示します）c1FlexGrid1Cols[Verified]DataType = typeof(Boolean)

チェックボックスを表示する代わりに文字列値を表示しますc1flexGrid1Cols[Verified]Format = YesNo ブール列のチェックボックスの横にあるテキストを有効にしますc1flexGrid1Cols[Verified]ImageAndText = true

データ型をブール値に設定します（チェックボックスを自動的に表示します）c1FlexGrid1Cols(Verified)DataType = GetType(Boolean)

チェックボックスを表示する代わりに文字列値を表示しますc1flexGrid1Cols(Verified)Format = YesNo

ブール列のチェックボックスの横にあるテキストを有効にしますc1flexGrid1Cols(Verified)ImageAndText = True

Display Checkbox for Non-Boolean ValuesIn unbound mode you can display a checkbox along with any non-boolean text as well You can use the SetCellCheckmethod to add checkbox to any kind of cells Along with row and column index this method takes valueof CheckEnum enumeration as one of its parameters to specify the state of checkbox at the time of rendering

Following code demonstrates how you can display checkbox for non-boolean values

Set Checkbox AlignmentTo set position of checkbox in the cell you need to use ImageAlign property of the Row or Column object Thisproperty accepts values from the ImageAlignEnum enumeration which lets you hide tile stretch or position the image

Align the checkbox to display in center of a WinForms FlexGrid column using the code below

Change the Checkbox ImageTo change icon image of different states of checkbox you can use the GlyphEnum which can be accessed usingthe Glyphs property For more information about changing glyphs see Custom Glyphs

You can change the images to be used for various checkbox states in WinForms FlexGrid using the code below

チェックオン状態のセル（32）に2つの状態のチェックボックスを設定します c1flexGrid1SetCellCheck(3 2 CheckEnumChecked)

チェックオン状態のセル（32）に2つの状態のチェックボックスを設定しますc1flexGrid1SetCellCheck(3 2 CheckEnumChecked)

チェックボックスをセルの右中央に揃えますc1flexGrid1Cols[Verified]ImageAlign = ImageAlignEnumRightCenter

チェックボックスをセルの右中央に揃えますc1flexGrid1Cols(Verified)ImageAlign = ImageAlignEnumRightCenter

カスタム画像をチェックボックスアイコンとして設定します Image imgChk = new Bitmap(ResourcesImagescheckedpng) Image imgUnchk = new Bitmap(ResourcesImagesuncheckedpng) Image imgGray = new Bitmap(ResourcesImagesnullpng) c1flexGrid1Glyphs[GlyphEnumChecked] = imgChk c1flexGrid1Glyphs[GlyphEnumUnchecked] = imgUnchk c1flexGrid1Glyphs[GlyphEnumGrayed] = imgGray

カスタム画像をチェックボックスアイコンとして設定します Dim imgChk As Image = New Bitmap(ResourcesImagescheckedpng) Dim imgUnchk As Image = New Bitmap(ResourcesImagesuncheckedpng)

Use Three State CheckboxIn addition to usual two state checkbox FlexGrid lets you create three state checkbox as well The simplest way ofenabling the third state is through the CheckEnum While a Boolean checkbox togglesbetween CheckEnumChecked and CheckEnumUnchecked states the three states of a three state checkbox arerepresented by CheckEnumTSChecked CheckEnumTSUnchecked and CheckEnumTSGrayed However in thiscase by default user can not go back to null after switching to checked or unchecked state once In order to cycle acheckbox between three states you need to handle the ValidateEdit event

Use the code below to create a three state checkbox in the WinForms FlexGrid

Dim imgGray As Image = New Bitmap(ResourcesImagesnullpng) c1flexGrid1Glyphs(GlyphEnumChecked) = imgChk c1flexGrid1Glyphs(GlyphEnumUnchecked) = imgUnchk c1flexGrid1Glyphs(GlyphEnumGrayed) = imgGray

private void c1FlexGrid1_ValidateEdit(object sender ValidateEditEventArgs e) if (c1FlexGrid1Cols[eCol]Name == Done) eCancel = true if (c1FlexGrid1[eRow eCol]Equals(false)) c1FlexGrid1[eRow eCol] = true else if (c1FlexGrid1[eRow eCol]Equals(true)) c1FlexGrid1[eRow eCol] = DBNullValue else if (c1FlexGrid1[eRow eCol]Equals(DBNullValue)) c1FlexGrid1[eRow eCol] = false

Private Sub c1FlexGrid1_ValidateEdit(ByVal sender As Object ByVal e As ValidateEditEventArgs) If c1FlexGrid1Cols(eCol)Name Is Done Then eCancel = True

If c1FlexGrid1(eRow eCol)Equals(False) Then c1FlexGrid1(eRow eCol) = True ElseIf c1FlexGrid1(eRow eCol)Equals(True) Then c1FlexGrid1(eRow eCol) = DBNullValue ElseIf c1FlexGrid1(eRow eCol)Equals(DBNullValue) Then c1FlexGrid1(eRow eCol) = False End If End IfEnd Sub

数値

FlexGrid by default uses the numeric editor to edit the numeric data that is when the data type is set to any of the numeric types such as Int and Decimal Thisbehavior of FlexGrid is controlled by the EditOptions property which provides various editing options through the EditFlags enumeration One of the flagsprovided is UseNumericEditor As the default value of EditOptions property is All UseNumericEditor flag is always ON and hence grid automatically enablesthe numeric editor while editing the numeric data You can access the EditOptions property at design time as well as through code

Numeric Editor Numeric Editor with Format = C0 Numeric Editor with Spin Button Numeric Editor with Calculator

At Design Time

To enable or disable the numeric editor at design time you can access the EditOptions property from the Properties window

At Run Time

At run-time you need to set the UseNumericEditor flag On in the EditOptions property Use the code below to set EditOptions property in the WinFormsFlexGrid

Format Numeric CellTo format the data in a numeric cell FlexGrid provides the Format property of Column as well as Row object In case of the formats that support decimal valuessuch as numeric currency and exponential FlexGrid displays values up to two decimal places by default However you can specify the number of decimals todisplay by appending the value of Format property with that number For instance in order to display values up to three decimal places in a Number type cellyou specify value of Format property as N3 or n3

Note This property doesnt have any effect on the stored value but only on how value is displayed at the run time You can access the formatted valueof a cell using GetDataDisplay(Int32 Int32) method of the C1FlexGrid class

You can set the Format property at design time as well as through code Following table lists the commonly used formats for numeric cells

Format Value Description

Number N or n Specifies the formatting for simple numeric values

Currency C or c Specifies the formatting for monetary values

Exponential or Scientific E or e Specifies the formatting for values using scientific notations

Percentage P or p Specifies the formatting for percentage values

Custom User-defined Takes the value of format string from user

A custom string might require handling in the code

At Design Time

1 In design view click on the FlexGrid smart tag to open the C1FlexGrid Tasks menu2 Click the Column Tasks option and navigate to Format String property3 Click ellipsis button to open the Format String dialog

すべてのフラグをオンに設定します c1FlexGrid1EditOptions = C1WinC1FlexGridEditFlagsAll

UseNumericEditorフラグのみを設定します c1FlexGrid1EditOptions = C1WinC1FlexGridEditFlagsUseNumericEditor

すべてのフラグをオンに設定しますc1FlexGrid1EditOptions = C1WinC1FlexGridEditFlagsAll

4 Select the required format from the list box on left say Currency5 Set the format specific properties on the right hand side of the dialog Decimal places in this case

At Run Time

To specify the format of a particular numeric type column set the Format property to any of the above mentioned values In this example we have set theformat of column 3 as currency without decimals

Following code shows how to set the format of a WinForms FlexGrid column

Input using Spin ButtonTo create a numeric editor which uses a spin button for input you need to assign instance of an external control such as NumericUpDown to the Editorproperty

Use the code below to create a numeric editor with spin button in the WinForms FlexGrid

Input using CalculatorTo allow user to give input using a calculator in a numeric editor you can use the C1NumericEdit control of C1Input library as an editor So just add thereference to C1WinC1Input and assign an instance of C1NumericEdit control to the Editor property For more information about using an external controlas editor see Custom Editors

To create a numeric editor with calculator use the code below

小数点なしの通貨形式を設定します c1FlexGrid1Cols[3]Format = C0

小数点なしの通貨形式を設定しますc1FlexGrid1Cols(3)Format = C0

NumericUpDownコントロールを2番目の列のエディタとして割り当てますc1flexGrid1Cols[2]Editor = new NumericUpDown()

NumericUpDownコントロールを2番目の列のエディタとして割り当てますc1flexGrid1Cols(2)Editor = New NumericUpDown()

NumericUpDownコントロールを2番目の列のエディタとして割り当てますc1flexGrid1Cols[2]Editor = new C1NumericEdit()ShowUpDownButtons=false

NumericUpDownコントロールを2番目の列のエディタとして割り当てますc1flexGrid1Cols(2)Editor = New C1NumericEdit() With ShowUpDownButtons = False

日付

FlexGrid by default uses the Date editor for all the Date and DateTime type of data The Date editor consists of adropdown which opens a calendar when clicked and user can select the desired date by navigating through it Usercan also change the date month or year by simply selecting the corresponding part in the editor and pressing the upand down arrow keys

Default Date Editor Date Editor Without Calendar Date Editor with Spin Button

Use the code below to create a Date editor in a WinForms FlexGrid column

Input without Displaying CalendarAs mentioned earlier in FlexGrid a DateTime type cell automatically displays a dropdown calendar to receive theinput from user However in order to get a date input from user without displaying a calendar you can set a maskusing the EditMask property and then validate the input value using the ValidateEdit event

Following code demonstrates how to create a Date editor without calendar in WinForms FlexGrid

For more information about cell masks and validation see topics Mask and Validation respectively Another way ofhiding the calendar is to get user input using the spin buttons

Input using Spin ButtonBelow code shows how to create Date editor with spin button

To display spin buttons in a Date editor use the SetupEditor event to convert the editor into DateTimePicker and setits ShowUpDown property to true

Set the data type property to DateTime c1FlexGrid1Cols[1]DataType = typeof(DateTime)

Set the data type property to DateTimec1FlexGrid1Cols(1)DataType = GetType(Date)

Set a mask on column c1flexGrid1Cols[3]EditMask = 00000000

Set a mask on columnc1flexGrid1Cols(3)EditMask = 00000000

private void C1flexGrid1_SetupEditor(object sender RowColEventArgs e)

Set Date FormatTo set the format in a Date type column you need to set the Format property of the Column object

Following table lists the pre-defined formats

Format Value Example

Short Date d 11192003

Long Date D Friday November 19 2003

Short Time t 1215 AM

Long Time T 121530 AM

You can also create a custom format using the various custom format specifiers supported in the Net framework Fordetails see Custom date and time format strings on Microsoft website

Use the following code to create a custom date format in WinForms FlexGrid column

if (c1flexGrid1Cols[eCol]Name == DOB) Cast FlexGrids current cell editor var dateEditor = c1flexGrid1Editor as DateTimePicker

Show UpDown button (replacing the drop-down button for calendar) dateEditorShowUpDown = true

Private Sub C1flexGrid1_SetupEditor(ByVal sender As Object ByVal e As RowColEventArgs) If c1flexGrid1Cols(eCol)Name Is DOB Then Cast FlexGrids current cell editor Dim dateEditor = TryCast(c1flexGrid1Editor DateTimePicker)

Show UpDown button (replacing the drop-down button for calendar) dateEditorShowUpDown = True End IfEnd Sub

Set a pre-defined format c1FlexGrid1Cols[DOB]Format = d Set a custom format c1FlexGrid1Cols[OrderDate]Format = ddMMyyyy

Set a pre-defined format c1FlexGrid1Cols(DOB)Format = d

Set a custom format c1FlexGrid1Cols(OrderDate)Format = ddMMyyyy

Display Country-specific Date FormatAlthough abovementioned formats are the most commonly used date formats but there are cultures which preferusing their specific calendar and date formats in some cases such as Japan You can display those specific calendarsand date formats by using OwnerDrawCell event of the C1FlexGrid class and the SystemGlobalization namespaceThe namespace provides various classes to define culture related information including calendars and date formatsFor instance to display Japanese calendar and Japanese date format you can leveragethe SystemGlobalizationJapaneseCalendar class Similarly you can also display other calendars such as GregorianHebrew Hijri and Korean

Set the country specific date format in WinForms FlexGrid using the code below

Set MinMax DateTo set a range of valid values you can use the DateTimePicker control as editor and set its MinDate and MaxDate

c1flexGrid1Cols[DOB]Format = ddMMyyyy c1flexGrid1DrawMode = DrawModeEnumOwnerDraw c1flexGrid1OwnerDrawCell += C1flexGrid1_OwnerDrawCell private void C1flexGrid1_OwnerDrawCell(object sender OwnerDrawCellEventArgs e) if (c1flexGrid1Cols[eCol]DataType == typeof(DateTime) ampamp eRow gt= c1flexGrid1RowsFixed) eText = DateTimeParse(eText)ToString(yyyy年MM月dd日(dddd) c)

C1FlexGrid1Cols(DOB)Format = ddMMyyyy C1FlexGrid1DrawMode = DrawModeEnumOwnerDraw

AddHandler C1FlexGrid1OwnerDrawCell AddressOf C1flexGrid1_OwnerDrawCell

Private Sub C1flexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As OwnerDrawCellEventArgs) If C1FlexGrid1Cols(eCol)DataType = GetType(DateTime) AndAlso eRow gt= C1FlexGrid1RowsFixed Then eText = DateTimeParse(eText)ToString(yyyy年MM月dd日(dddd) c) End If End Sub

property

Use the code below to set a range of valid dates in WinForms FlexGrid

DateTimePicker dateTimePicker = new DateTimePicker() dateTimePickerFormat = DateTimePickerFormatShort

Sets Max and Min dates dateTimePickerMinDate = new DateTime(2015 05 01) dateTimePickerMaxDate = DateTimeToday

Assigns DateTimePicker control as editor for FirstOrderDate(date) column c1flexGrid1Cols[FirstOrderDate]Editor = dateTimePicker

Dim dateTimePicker As DateTimePicker = New DateTimePicker() dateTimePickerFormat = DateTimePickerFormat[Short]

Sets Max and Min dates dateTimePickerMinDate = New DateTime(2015 05 01) dateTimePickerMaxDate = DateToday

Assigns DateTimePicker control as editor for FirstOrderDate(date) column c1flexGrid1Cols(FirstOrderDate)Editor = dateTimePicker

コンボボックス

ComboBox cell is a common way of providing the user with a well-defined list of possible values in the form of a drop-down list FlexGrid providesthis multi-option editor in various forms such as dropdown list dropdown combo ellipsis button or a textbox with ellipsis button

Default ComboBox Multi-column ComboBox ComboBox with custom BackColor ComboBox with Images

Display Dropdown List or ComboIn FlexGrid you can create a dropdown list by creating a string containing all the choices separated by pipe characters (for exampleTrue|False|Dont know) and assign it to the ComboList property of Row or Column object This causes the grid to display a drop-down buttonnext to the cell The user can click the dropdown button (or press F2) to display the list of choices available for that cell

Another common situation is where cells have a list of common values but users should be allowed to type a custom value as well This can beaccomplished with drop-down combos a combination of text box and drop-down list In FlexGrid you can create combos by starting the choicelist with a pipe character (for example |True|False|Dont know) and then assign it to the ComboList property

Following code shows how to create a dropdown list or combo editor in the WinForms FlexGrid

The ComboList property can also be set using the Combo List dialog at design time To access the Combo List dialog

1 Open the Column Tasks menu for column for which editor is to be set2 Go to the Combo List option and click the ellipsis button on the right hand side of the field3 Combo List dialog opens where you can specify the option values each in a new line4 You can also choose whether you want to display these values as a Dropdown List or Dropdown Combo Note that it also lets you create

cell button using Ellipsis Button or Textbox amp Ellipsis Button option

Display Multi-column ComboBoxIn FlexGrid you can also display multiple columns in a ComboBox using the MultiColumnDictionary class This class implementsthe IC1MultiColumnDictionary interface and has multiple overloads These overloads let you specify the data source object the key columncolumns that are to be displayed in multiple columns and the column to be displayed when ComboBox is closed

Display a multi-column combobox in a WinForms FlexGrid column using the code below

Note that the above code uses the data source object dt to supply data to the grid You can set up the data source as per your requirements

ドロップダウンリストとしてCustomerIDを割り当てますc1flexGrid1Cols[CustomerID]ComboList = AJK18F|BBK21D|AEF25N|BZD42S|AKC16G

ドロップダウンリストとしてCustomerIDを割り当てますc1flexGrid1Cols(CustomerID)ComboList = AJK18F|BBK21D|AEF25N|BZD42S|AKC16G

string[] columnRange = new string[] City Country c1FlexGrid1Cols[City]DataMap = new MultiColumnDictionary(dt City columnRange 0)

Dim columnRange = New String() City Countryc1FlexGrid1Cols(City)DataMap = New MultiColumnDictionary(dt City columnRange 0)

DataTable dt = new DataTable() dtColumnsAdd(CustomerID typeof(int)) dtColumnsAdd(ContactName typeof(string)) dtColumnsAdd(Designation typeof(string)) dtColumnsAdd(City typeof(string)) dtColumnsAdd(Country typeof(object))

サンプルデータ

Set Mapped Data in the ComboBoxTo set a ComboBox having display values different from the actual values you need to use the C1ComboBox as editor and leverageits ItemsDisplayMember and ItemsValueMember properties For instance the example below uses country names as display values while actualvalue is the dialing code of the corresponding country

Following code shows how to set the mapped data in combobox column of the WinForms FlexGrid

dtRowsAdd(1 Maria Anders Sales Representative Madrid Spain ) dtRowsAdd(2 Ana Trujillo Sales Associate Monterrey Mexico ) dtRowsAdd(3 Antonio Moreno Owner Dublin Ireland) dtRowsAdd(4 Thomas Hardy Sales Representative Bristol UK) dtRowsAdd(5 Patricio Simpson Marketing Manager Munich Germany) dtRowsAdd(6 Paolo Accorti Sales Representative Barcelona Spain) dtRowsAdd(7 Martine Ranceacute Owner Puebla Mexico) dtRowsAdd(8 Elizabeth Brown Marketing Manager London UK) dtRowsAdd(9 Jaime Yorres Order Administrator Vienna Austria) dtRowsAdd(10 Yvonne Moncada Marketing Manager Mexico Mexico) dtRowsAdd(11 Helen Bennett OwnerMarketing Cork Ireland) dtRowsAdd(12 Sergio Gutieacuterrezy Order Administrator Sao Paulo Brazil)

c1FlexGrid1DataSource = dt

Dim dt As DataTable = New DataTable()dtColumnsAdd(CustomerID GetType(Integer))dtColumnsAdd(ContactName GetType(String))dtColumnsAdd(Designation GetType(String))dtColumnsAdd(Country GetType(Object))dtColumnsAdd(City GetType(String))

サンプルデータdtRowsAdd(1 Maria Anders Sales Representative Spain Madrid)dtRowsAdd(2 Ana Trujillo Sales Associate Mexico Monterrey)dtRowsAdd(3 Antonio Moreno Owner Ireland Dublin)dtRowsAdd(4 Thomas Hardy Sales Representative UK Bristol)dtRowsAdd(5 Patricio Simpson Marketing Manager Germany Munich)dtRowsAdd(6 Paolo Accorti Sales Representative Spain Barcelona)dtRowsAdd(7 Martine Ranceacute Owner Mexico Puebla)dtRowsAdd(8 Elizabeth Brown Marketing Manager UK London)dtRowsAdd(9 Jaime Yorres Order Administrator Austria Vienna)dtRowsAdd(10 Yvonne Moncada Marketing Manager Mexico Mexico)dtRowsAdd(11 Helen Bennett OwnerMarketing Ireland Cork)dtRowsAdd(12 Sergio Gutieacuterrezy Order Administrator Brazil Sao Paulo)c1FlexGrid1DataSource = dt

private void Form1_Load(object sender EventArgs e) 顧客データを取得します Customers = GetCustomers()

FlexGridにデータを入力します c1FlexGrid1DataSource = Customers

国とその国コードのコレクションを作成します ObservableCollectionltCountrygt countries = new ObservableCollectionltCountrygt() countriesAdd(new Country(1 USA)) countriesAdd(new Country(91 India)) countriesAdd(new Country(7 Russia))

Set ComboBox DimensionsTo set the height and width of combo box dropdown you need to assign an instance of ComboBox as an editor and then setthe DropDownHeight and DropDownWidth property of that instance

countriesAdd(new Country(54 Argentina)) countriesAdd(new Country(81 Japan)) countriesAdd(new Country(380 Ukraine)) countriesAdd(new Country(98 Iran)) countriesAdd(new Country(45 Denmark)) countriesAdd(new Country(84 Vietnam)) countriesAdd(new Country(49 Germany)) BindingSource countryBS = new BindingSource() countryBSDataSource = countries

C1Comboboxコントロールをインスタンス化して設定します C1ComboBox countryCodeCombo = new C1ComboBox() countryCodeComboItemsDataSource = countryBS

region Mapped Data using C1Combobox

国コードと国名をマッピングするためにプロパティを設定します countryCodeComboItemsDisplayMember = CountryName countryCodeComboItemsValueMember = CountryCode countryCodeComboTextDetached = true countryCodeComboTranslateValue = true

C1ComboboxをDiallingCode列のエディタとして設定します c1FlexGrid1Cols[DiallingCode]Editor = countryCodeCombo endregion

Private Sub Form1_Load(ByVal sender As Object ByVal e As EventArgs) 顧客データを取得します Customers = GetCustomers()

国とその国コードのコレクションを作成します Dim countries As ObservableCollection(Of Country) = New ObservableCollection(Of Country)() countriesAdd(New Country(1 USA)) countriesAdd(New Country(91 India)) countriesAdd(New Country(7 Russia)) countriesAdd(New Country(54 Argentina)) countriesAdd(New Country(81 Japan)) countriesAdd(New Country(380 Ukraine)) countriesAdd(New Country(98 Iran)) countriesAdd(New Country(45 Denmark)) countriesAdd(New Country(84 Vietnam)) countriesAdd(New Country(49 Germany)) Dim countryBS As BindingSource = New BindingSource() countryBSDataSource = countries

C1Comboboxコントロールをインスタンス化して設定します Dim countryCodeCombo As C1ComboBox = New C1ComboBox() countryCodeComboItemsDataSource = countryBS

国コードと国名をマッピングするためにプロパティを設定します countryCodeComboItemsDisplayMember = CountryName countryCodeComboItemsValueMember = CountryCode countryCodeComboTextDetached = True countryCodeComboTranslateValue = True

C1ComboboxをDiallingCode列のエディタとして設定します c1FlexGrid1Cols(DiallingCode)Editor = countryCodeComboEnd Sub

Use the code below to specify the height and width of the combobox to be displayed in the WinForms FlexGrid

Change Background Color or Font ColorTo change the background color or font color of the ComboBox list create an instance of ComboBox to assign it as editor Then set the BackColorand ForeColor property of that instance

Customize combobox in the WinForms FlexGrid by using the code below

Display Image in the ListTo display images in the ComboBox list you need to use the C1ComboBox as an editor and leverage its ItemsImageList property This property isof type ImageList class that acts as a container for the images which are stored in its Images collection First access the images stored in theproject resources through the ResourceManagerGetResourceSet method and create a collection of mapping between images and itscorresponding names The collection acts as a data source for ComboBox Now create an instance of the ImageList class add images to itsImages collection from data source and assign that instance of ImageList class to the ItemsImageList property to render images in the ComboBoxlist

Following code shows how to display images in the combobox lists of WinForms FlexGrid

ComboBox cb = (ComboBox)c1flexGrid1Editor cbDropDownWidth = 250 cbDropDownHeight = 200

Dim cb As ComboBox = CType(c1flexGrid1Editor ComboBox) cbDropDownWidth = 250 cbDropDownHeight = 200

ComboBox comboBox = new ComboBox() comboBoxBackColor = ColorBlack comboBoxForeColor = ColorWhite

Dim comboBox As ComboBox = New ComboBox() comboBoxBackColor = ColorBlack comboBoxForeColor = ColorWhite

コンボボックスに画像を入力します var itemsSource = new ListltFlaggt() ImageList imgFlag = new ImageList() imgFlagImagesClear() var rsrSet = ResourcesResourceManagerGetResourceSet(CultureInfoCurrentCulture true true)

foreach(DictionaryEntry entry in rsrSet) var img = entryValue as Image itemsSourceAdd(new Flag(entryKeyToString() img)) itemsSourceSort(new CompareFlag())

foreach (Flag entry in itemsSource) imgFlagImagesAdd(entryCountryName entryCountryFlag)

countryComboItemsImageList = imgFlag

Set Number of Displayed ItemsTo set the number of items to be displayed in a combo box you can use ComboBoxMaxDropDownItems property

Use the code below to limit the number of items to be displayed in combobox list of the WinForms FlexGrid

Sort the ComboBox ListTo sort the items in the ComboBox dropdown list you can use the C1ComboBox as editor and call the Sort method to sort the dropdown itemsgetting displayed in the ComboBox

To display sorted items in comboboxlist of the WinForms FlexGrid use the code below

countryComboItemMode = ComboItemModeHtmlPattern countryComboHtmlPattern = ltdiv ltdiv style=padding0pxgtltimg src=CountryName style=padding-right14pxgtCountryNameltdivgt

コンボボックスに画像を入力します Dim itemsSource = New List(Of Flag)()Dim imgFlag As ImageList = New ImageList()imgFlagImagesClear()Dim rsrSet = ResourcesResourceManagerGetResourceSet(CultureInfoCurrentCulture True True)

For Each entry As DictionaryEntry In rsrSet Dim img = TryCast(entryValue Image) itemsSourceAdd(New Flag(entryKeyToString() img))Next

itemsSourceSort(New CompareFlag())

For Each entry In itemsSource imgFlagImagesAdd(entryCountryName entryCountryFlag)Next

countryComboItemsImageList = imgFlagcountryComboItemMode = ComboItemModeHtmlPatterncountryComboHtmlPattern = ltdiv ltdiv style=padding0pxgtltimg src=CountryName style=padding-right14pxgtCountryNameltdivgt

コンボボックスのドロップダウンに表示する国の数を設定します countryComboMaxDropDownItems = 10

コンボボックスのドロップダウンに表示する国の数を設定しますcountryComboMaxDropDownItems = 10

C1ComboBox countryCombo = new C1ComboBox() countryComboDropDownStyle = DropDownStyleDropDownList Listltstringgt countries = new Listltstringgt USA Canada India Russia Japan Germany countriesSort() countryComboItemsDataSource = countries

C1ComboboxをCountry列のエディタとして設定します c1FlexGrid1Cols[Country]Editor = countryCombo

Get the Selected IndexTo get the selected index or value of the selected item you can use the SelectedIndex property or SelectedItem property of the ComboBoxEditorclass The example below uses the ComboCloseUp event to show a message box displaying the selected index and the selected item

Use the code below to fetch the index and value of selected item in combobox list of the WinForms FlexGrid

Dim countryCombo As C1ComboBox = New C1ComboBox() countryComboDropDownStyle = DropDownStyleDropDownList Dim countries As List(Of String) = New List(Of String) From USA Canada India Russia Japan Germany countriesSort() countryComboItemsDataSource = countries

C1ComboboxをCountry列のエディタとして設定します c1FlexGrid1Cols(Country)Editor = countryCombo

private void C1FlexGrid1_ComboCloseUp(object sender C1WinC1FlexGridRowColEventArgs e) MessageBoxShow(Selected Index + c1FlexGrid1ComboBoxEditorSelectedIndex + n + Selected Item + c1FlexGrid1ComboBoxEditorSelectedItem)

Private Sub C1FlexGrid1_ComboCloseUp(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs) MessageBoxShow(Selected Index amp c1FlexGrid1ComboBoxEditorSelectedIndex amp vbLf amp Selected Item + c1FlexGrid1ComboBoxEditorSelectedItem)End Sub

マスク

Mask editor refers to pre-defined templates for getting input from users which also automatically validates the userinput as it is typed Mask strings have two types of characters literal characters and template characters While literalcharacters are the ones which become part of the input the template characters serve as placeholders for charactersbelonging to specific categories (for example digits or alphabets) For example the code below assigns a (999) 999-9999 editing mask to the first column which holds phone numbers Here special characters such as braces (()) andhyphen (-) are the literals and the digit 9 is a placeholder that stands for any digit

The FlexGrid control supports masked editing through the EditMask property which can be used with regular textfields and with drop-down combo fields To apply different masks within the same column you can trap the BeforEditevent and set the EditMask property to appropriate value

You can also set the EditMask property at design time using the Input Mask dialog You can access the dialog byclicking the ellipsis button against Edit Mask field in Column Tasks menu It also means that the Edit Mask field isspecific to the column selected at that time

Note that when the EditMask property is set to a non-empty string the grid uses the masked editor even if thecolumn contains DateTime values Usually grid uses the built-in Date editor to edit DateTime type cells

電話番号の編集マスクを設定します c1FlexGrid1Cols(1)EditMask = (999) 999-9999

マップリスト

Mapped lists refer to the mapping of data stored in the grid to the values visible to the user Such mapping is oftenused to display user-friendly values when actual data stored in the grid is either encoded or difficult to understand bythe user For instance in an employee record table it would be more convenient for administrative executive to seenames of the employees while database stores the employee IDs

Display Data MappingIn FlexGrid data mapping can be achieved by using the DataMap property This property contains reference to anIDictionary object that establishes mapping between database values and values to be displayed in the gridHashTable ListDictionary and SortedList are some examples of IDictionary objects which provide valid data maps

Following code demonstrates how to display the data mapped list in the WinForms FlexGrid

There is a difference in how HashTable ListDictionary and SortedList classes order the items So when these tables areused with editable columns the order of items rendering in the mapped list also differs depending upon the keys andclass used to create the list

Note that the keys in the data map must be of the same type as the cells being edited For example if a columncontains short integers (Int16) then any data maps associated with the column should have short integer keys

Display Image MappingTo display image mapping in a FlexGrid column you need to set the ImageMap property of Row or Column object toan IDictionary object that establishes mapping between images and the corresponding text values For example if acolumn contains country names you can use this property to display the corresponding flags You can controlwhether to show only images or images with text by using the ImageAndText property of the object

Create an image mapping in the WinForms FlexGrid using the code below

データマップを作成しますListDictionary customerNames = new ListDictionary()customerNamesAdd(AJK18F Sam Anders)customerNamesAdd(BBK21D Daneil)customerNamesAdd(AEF25N Henry Hussain)customerNamesAdd(BZD42S Owen Romanov)customerNamesAdd(AKC16G Serena Nguyen)

データマップをflexgrid列に割り当てますc1flexGrid1Cols[Name]DataMap = customerNames

データマップを作成しますDim customerNames As ListDictionary = New ListDictionary()customerNamesAdd(AJK18F Sam Anders)customerNamesAdd(BBK21D Daneil)customerNamesAdd(AEF25N Henry Hussain)customerNamesAdd(BZD42S Owen Romanov)customerNamesAdd(AKC16G Serena Nguyen)

データマップをflexgrid列に割り当てますc1flexGrid1Cols(Name)DataMap = customerNames

Hashtable ht = new Hashtable() foreach (Row row in c1flexGrid1Rows) htAdd(row[CustomerID] LoadImage(row[Photo] as byte[])) ImageMapをPhoto列に割り当てます c1flexGrid1Cols[Photo]ImageMap = ht

アスペクト比を維持しながら画像をセルに合わせます c1flexGrid1Cols[Photo]ImageAlign = ImageAlignEnumScale c1flexGrid1Cols[Photo]Width = 80

Dim ht As Hashtable = New Hashtable()

For Each row As Row In c1flexGrid1Rows htAdd(row(CustomerID) LoadImage(TryCast(row(Photo) Byte()))) Next

ImageMapをPhoto列に割り当てます c1flexGrid1Cols(Photo)ImageMap = ht

アスペクト比を維持しながら画像をセルに合わせます c1flexGrid1Cols(Photo)ImageAlign = ImageAlignEnumScale c1flexGrid1Cols(Photo)Width = 80

セルボタン

Cell button editor refers to a cell with an ellipsis button This editor comes to use when you need to get an operationdone or open a dialog on a button click Such dialogs generally contain multiple different options or settings for a userto choose from

Default Cell Button Cell Button with Text Cell Button with Custom Image

Display Cell ButtonIn FlexGrid you can display a cell button by setting the ComboList property to an ellipsis character You can alsouse a pipe character before ellipsis button to display an ellipsis with text box to let user enter his inputThe CellButtonClick event is fired when user clicks the cell button You can capture this event to implement thedesired operation or display a dialog of your choice

By default the cell button gets displayed when cell enters the edit mode However you can set the ShowButtonsproperty to Always to display the cell button even in non-edit mode

Use the code below to display cell button in a WinForms FlexGrid column

Mark列のComboListプロパティを設定してセルボタンを表示するようにします c1flexGrid1Cols[Mark]ComboList = セルボタンを常に表示できるようにします c1flexGrid1Cols[Mark]ShowButtons = ShowButtonsEnumAlways

エンドユーザーがセルボタンをクリックしたときに処理します c1flexGrid1CellButtonClick += C1flexGrid1_CellButtonClick

Mark列のComboListプロパティを設定してセルボタンを表示するようにしますc1flexGrid1Cols(Mark)ComboList =

1 Open the Column Tasks menu for column for which editor is to be set2 Go to the Combo List option and click the ellipsis button on the right hand side of the field3 Combo List dialog opens where you can specify the option values each in a new line4 You can also choose whether you want to display these values as an Ellipsis Button or Textbox amp Ellipsis

Button Note that it also gives you options to create Dropdown List and Dropdown Combo

The example below demonstrates change in back color and fore color of the current row on click of the cell buttonSimilarly you can perform the desired operation in the CellButtonClick event

セルボタンを常に表示できるようにしますc1flexGrid1Cols(Mark)ShowButtons = ShowButtonsEnumAlways

エンドユーザーがセルボタンをクリックしたときに処理しますc1flexGrid1CellButtonClick += C1flexGrid1_CellButtonClick

private void C1flexGrid1_CellButtonClick(object sender RowColEventArgs e) 次のコードは色を変更して現在の行をマークします if (c1flexGrid1Rows[eRow]StyleDisplayBackColor == ColorFromName(Window)) c1flexGrid1Rows[eRow]StyleNewBackColor = ColorGreen c1flexGrid1Rows[eRow]StyleNewForeColor = ColorWhite c1flexGrid1Rows[eRow]StyleNewBackColor = ColorFromName(Window) c1flexGrid1Rows[eRow]StyleNewForeColor = ColorFromName(WindowText)

Change Image of Cell ButtonBy default cell button displays an ellipsis However you can change the image of cell button usingthe CellButtonImage property

Set the image of cell button in the WinForms FlexGrid as shown in the code below

Private Sub C1flexGrid1_CellButtonClick(ByVal sender As Object ByVal e As RowColEventArgs) 次のコードは色を変更して現在の行をマークします If c1flexGrid1Rows(eRow)StyleDisplayBackColor Is ColorFromName(Window) Then c1flexGrid1Rows(eRow)StyleNewBackColor = ColorGreen c1flexGrid1Rows(eRow)StyleNewForeColor = ColorWhite End If

If True Then c1flexGrid1Rows(eRow)StyleNewBackColor = ColorFromName(Window) c1flexGrid1Rows(eRow)StyleNewForeColor = ColorFromName(WindowText) End IfEnd Sub

CellButtonImageプロパティを設定してセルボタンの画像を定義しますImage imgCellBtn = new Bitmap(ResourcesImagesbuttonpng)c1flexGrid1CellButtonImage = imgCellBtn

CellButtonImageプロパティを設定してセルボタンの画像を定義しますDim imgCellBtn As Image = New Bitmap(ResourcesImagesbuttonpng)c1flexGrid1CellButtonImage = imgCellBtn

検証

Data validation lets you control the data that a user can enter into a column cell There are various ways in which adata can be validated such as restricting invalid input keys showing the error or warning information or revert thevalue to original on getting an invalid input from the user

To implement validations such as specifying the range of acceptable values or defining the minimum string length ofinput FlexGrid provides EditorValidation property of the Column class The property is oftype ValidationRuleCollection class which consists of pre-defined rules for implementing enhanced data validation inFlexGrid columns For instance the sample code below demonstrates StringLength and Required validation rulesapplied to the Customer column using the EditorValidation property

Refer the code below to know how to add validation rules in WinForms FlexGrid columns

private void SetupGridColumns() var customerNameColumn = _flexCols[CustomerName] customerNameColumnCaption = Customer customerNameColumnEditorValidationAdd(new RequiredRule()) customerNameColumnEditorValidationAdd(new StringLengthRule() MinimumLength = 2 ) var customerIDColumn = _flexCols[CustomerID] customerIDColumnVisible = false var frequencyColumn = _flexCols[Frequency] frequencyColumnFormat = 0 frequencyColumnAllowEditing = false var ageColumn = _flexCols[Age] ageColumnEditorValidationAdd(new RequiredRule()) ageColumnEditorValidationAdd(new RangeRule() Minimum = 10 Maximum = 90 )

Another way of applying validation is by capturing the ValidateEdit event and checking the value of EditorTextproperty If value obtained is invalid set the Cancel parameter to true to keep the grid in editing mode until userenters a valid value Such validation can be used in scenarios such as setting the range of valid values validating thecurrent cell value based on another cell value For example the below sample code validates input into a currencycolumn to ensure that values entered are between 1000 and 10000

Use ValidateEdit event to check for valid values during edit mode of the WinForms FlexGrid cell as shown in the codebelow

Private Sub SetupGridColumns() Dim customerNameColumn = _flexCols(CustomerName) customerNameColumnCaption = Customer customerNameColumnEditorValidationAdd(New RequiredRule()) customerNameColumnEditorValidationAdd(New StringLengthRule() With MinimumLength = 2 ) Dim customerIDColumn = _flexCols(CustomerID) customerIDColumnVisible = False Dim frequencyColumn = _flexCols(Frequency) frequencyColumnFormat = 0 frequencyColumnAllowEditing = False Dim ageColumn = _flexCols(Age) ageColumnEditorValidationAdd(New RequiredRule()) ageColumnEditorValidationAdd(New RangeRule() With Minimum = 10 Maximum = 90 )End Sub

private void _flex_ValidateEdit( object sender ValidateEditEventArgs e) 金額を検証します if (_flexCols[eCol]DataType == typeof(Decimal)) try Decimal dec = DecimalParse(_flexEditorText) if ( dec lt 1000 || dec gt 10000 ) MessageBoxShow(Value must be between 1000 and 10000) eCancel = true catch MessageBoxShow(Value not recognized as a Currency) eCancel = true

Private Sub _flex_ValidateEdit(ByVal sender As Object ByVal e As ValidateEditEventArgs)

金額を検証します If _flexCols(eCol)DataType Is GetType(Decimal) Then

Try Dim dec As Decimal = DecimalParse(_flexEditorText)

If dec lt 1000 OrElse dec gt 10000 Then MessageBoxShow(Value must be between 1000 and 10000) eCancel = True End If

Catch MessageBoxShow(Value not recognized as a Currency) eCancel = True End Try End IfEnd Sub

データ注釈

Data annotation means adding meaningful metadata tags to the classes and other objects making it easier to bridgethe gap between models and views by performing data validation and displaying appropriate messages to the endusers For example you may use data annotations to specify how items should be formatted what their captionsshould be whether they should be editable or not

FlexGrid supports multiple data annotation attributes used for customizing data classes displaying data from sourceand setting validation rules To use the attributes in your project you need to add a reference to theSystemComponentModelDataAnnotations assembly and then add the attributes to your data objects in the code

Note The C1FlexGrid supports the annotations defined in NET 4SystemComponentModelDataAnnotations should be version 4000 or higher

Listed below are some of the major annotation attributes that are supported in FlexGrid control Cilck herefor complete list of DataAnnotation attributes

Attribute Name Functionality in FlexGrid

Association Specifies that an entity member represents a data relationship such as a foreignkey relationship

Display Provides a general-purpose attribute that lets you specify localizable strings fortypes and members of entity partial classes

DisplayFormat Specifies how data fields are displayed and formatted by ASPNET Dynamic Data

DisplayColumn Specifies the column that is displayed in the referred table as a foreign-keycolumn

Editable Indicates whether a data field is editable

Key Denotes one or more properties that uniquely identify an entity

Validation

RequiredAttributeStringLengthAttributeRangeAttributeRegularExpressionAttributeMinLengthAttributeMetaDataAttributeMaxLengthAttributeEmailAddressAttributeCompareAttributeDataTypeAttribute

The data annotation validation attributes are used as validation rules in FlexGridoperations

The following code example shows how data annotation feature works in WinForms FlexGrid control

自動生成されたCustomerName列ヘッダに「Customer」と表示されますこの列には少なくとも2つの記号の長さが最小の空でない文字列も必要です[Display(Name = Customer)][Required][StringLength(intMaxValue MinimumLength = 2)]

public string CustomerName get set 自動生成されたCustomerID列は非表示になります[Display(AutoGenerateField = false)]public int CustomerID get set

自動生成された「Frequency」列にはパーセンテージで書式設定された値が表示されますまた編集を許可しません[DisplayFormat(DataFormatString = 0)][Editable(false)]public double Frequency get set

自動生成された「Age」列は事前定義された範囲の値を許可します[Required][Range(10 90)]public int Age get set サンプルデータを作成しますpublic static BindingListltDatagt GetSampleData(int cnt) var list = new BindingListltDatagt() var rnd = new Random()

for (int i = 0 i lt cnt i++) var item = new Data() itemCustomerName = _firstNames[rndNext(0 _firstNamesLength)] + + _lastNames[rndNext(0 _lastNamesLength)] itemCustomerID = i itemFrequency = rndNextDouble() itemAge = rndNext(10 91) listAdd(item) return list

自動生成されたCustomerName列ヘッダに「Customer」と表示されますこの列には少なくとも2つの記号の長さが最小の空でない文字列も必要です ltDisplay(Name=Customer)gt ltRequiredgt ltStringLength(IntegerMaxValue MinimumLength=2)gt Public Property CustomerName As String 自動生成されたCustomerID列は非表示になります ltDisplay(AutoGenerateField=False)gt Public Property CustomerID As Integer 自動生成された「Frequency」列にはパーセンテージで書式設定された値が表示されますまた編集を許可しません ltDisplayFormat(DataFormatString=0)gt ltEditable(False)gt Public Property Frequency As Double 自動生成された「Age」列は事前定義された範囲の値を許可します ltRequiredgt ltRange(10 90)gt Public Property Age As Integer

サンプルデータを作成します Public Shared Function GetSampleData(ByVal cnt As Integer) As BindingList(Of Data) Dim list = New BindingList(Of Data)() Dim rnd = New Random()

For i As Integer = 0 To cnt - 1 Dim item = New Data() itemCustomerName = _firstNames(rnd[Next](0 _firstNamesLength)) amp + _lastNames(rnd[Next](0 _lastNamesLength)) itemCustomerID = i itemFrequency = rndNextDouble() itemAge = rnd[Next](10 91) listAdd(item) Next

Return list End Function

スパークライン

Sparklines are the miniature charts visually representing a series of values to show trends such as periodic fluctuationsor to highlight maximum or minimum values of the data series In grids sparklines are specially useful as they easily fitin a single cell and can help identify the data patterns at a glance

FlexGrid for WinForms lets you display sparklines in columns by setting ShowSparkline property of the Column classto true You can also set the type of sparkline using SparklineType property of the Sparkline class FlexGrid supportsthree types of sparklines which are

Line Similar to line chart line sparkline indicates change in values over a period of time with the help of a lineColumn Similar to column charts column sparkline uses vertical columns to demonstrate pattern acrossdifferent categoriesWinLoss Similar to column sparkline winloss sparkline uses vertical columns to represent values However itdoes not indicate the magnitude and is generally used to indicate the binary data

To display the data markers on sparkline you can set the ShowMarkers property to true The Sparkline class alsoprovides properties to highlight the first last highest lowest or negative data points by displaying them in differentformat You can even style the sparklines using the Styles property

Below code shows how to add sparkline to the WinForms FlexGrid columns

WinLossSparklineを表示するようにプロパティを設定します c1FlexGrid1Cols[2]ShowSparkline = true c1FlexGrid1Cols[2]SparklineSparklineType = SparklineTypeWinLoss c1FlexGrid1Cols[2]SparklineStylesSeriesColor = ColorGreen c1FlexGrid1Cols[2]SparklineShowNegative = true

WinLossSparklineを表示するようにプロパティを設定します c1FlexGrid1Cols(2)ShowSparkline = True c1FlexGrid1Cols(2)SparklineSparklineType = SparklineTypeWinLoss c1FlexGrid1Cols(2)SparklineStylesSeriesColor = ColorGreen c1FlexGrid1Cols(2)SparklineShowNegative = True

ヘッダとフッタ

Column header refers to the fixed rows on the top of the grid which contains a caption string sort glyph etc

In FlexGrid by default the top row with zero index is allocated for the column header However you can span the header to other rows aswell by specifying them as fixed To set more than one rows as fixed you need to set the Fixed property of RowCollection class to an integergreater than 1

Set Header TextFlexGrid when in bound mode reads the field names from the data source and renders them as column header text However youcan explicitly set Caption property of the Row class to overwrite field name string from the data source In case of unbound grid as well theCaption property specifies the header text Note that this property sets the value of cells in the default header row at zero index To setvalue in the other fixed row cells you need to use the usual value allocation ways of FlexGrid For more information on how to set cellvalues see Set Value in Cell

Specify the header rows and set the header text in WinForms FlexGrid using the code below

Merge Column HeaderFlexGrid provides the AllowMerging property for Row object which specifies whether it is allowed to merge cells in a particular row (in thiscase the header row) or not Once you have allowed merging in the header row set either AllowMerging or AllowMergingFixed propertyof C1FlexGrid class to FixedOnly Availability of these two properties in the FlexGrid control offers you more flexibility to implement multiplelogics related to merging For more information on merging cells see Merge

Use the code below to merge column headers in the WinForms FlexGrid

Wrap Column Header Text

2つの行を列ヘッダ行として設定しますc1FlexGrid1RowsFixed = 2 最初の列のヘッダとサブヘッダを設定しますc1FlexGrid1Cols [1] Caption = Column Header 1c1FlexGrid1 [11] = Column Sub-header 1

2つの行を列ヘッダー行として設定します c1FlexGrid1RowsFixed = 2

最初の列のヘッダとサブヘッダを設定します c1FlexGrid1Cols(1)Caption = Column Header 1 c1FlexGrid1(1 1) = Column Sub-header 1

ヘッダ行でのマージを許可しますc1FlexGrid1Rows[0]AllowMerging = true

グリッドのAllowMergingまたはAllowMergingFixedプロパティを設定して固定行のみを結合します c1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumFixedOnlyc1FlexGrid1AllowMergingFixed = C1WinC1FlexGridAllowMergingEnumFixedOnly

ヘッダ行でのマージを許可しますc1FlexGrid1Rows(0)AllowMerging = True

To wrap the text in column header access the CellStyle item Fixed of the CellStyleCollection class and set its WordWrap property totrue Note that to view the wrapped text properly you need to adjust the row height or just call the AutoSizeRow() method to automaticallyresize the row according to the text length

Use the code below to wrap header text of the WinForms FlexGrid columns

Style Column HeaderTo style the column header you can access the CellStyle item Fixed of the CellStyleCollection class and set various styling relatedproperties for same such as Font ForeColor and TextEffect

Customize column header of the WinForms FlexGrid using the code below

Set Column FooterColumn Footer refers to the last row of the grid which displays additional information about the whole column Most common use ofcolumn footer is to show the summary of column data

In FlexGrid you can create the column footer by using Footers property of the C1FlexGrid class FlexGrid lets you choose whether toscroll the footer along with rows or keep it fixed at the bottom of the grid by using Fixed property of the Footers class This class alsoprovides the Descriptions property which accesses the FooterDescription collection to set the additional information such as Caption Todisplay aggregate result in the column footer through various aggregate functions you must access the AggregateDefinition collection

列のキャプションを設定しますc1FlexGrid1Cols[3]Caption = Large Text for Column Header Text Wrapping

行の高さを設定しますc1FlexGrid1Rows[0]Height = 50

固定の行と列のワードラップを設定しますc1FlexGrid1Styles[Fixed]WordWrap = true

列のキャプションを設定しますc1FlexGrid1Cols(3)Caption = Large Text for Column Header Text Wrapping

行の高さを設定しますc1FlexGrid1Rows(0)Height = 50

固定の行と列のワードラップを設定しますc1FlexGrid1Styles(Fixed)WordWrap = True

ヘッダテキストのフォントを設定しますc1FlexGrid1Styles[Fixed]Font = new Font(Tahoma 10 FontStyleBold) ヘッダテキストの前色を設定しますc1FlexGrid1Styles[Fixed]ForeColor = ColorAqua ヘッダーテキストの背景色を設定しますc1FlexGrid1Styles[Fixed]BackColor = ColorBlue

ヘッダテキストにテキスト効果を適用しますc1FlexGrid1Styles[Fixed]TextEffect = C1WinC1FlexGridTextEffectEnumRaised

ヘッダテキストのフォントを設定します c1FlexGrid1Styles(Fixed)Font = New Font(Tahoma 10 FontStyleBold)

ヘッダテキストの前色を設定します c1FlexGrid1Styles(Fixed)ForeColor = ColorAqua

ヘッダーテキストの背景色を設定します c1FlexGrid1Styles(Fixed)BackColor = ColorBlue

ヘッダテキストにテキスト効果を適用します c1FlexGrid1Styles(Fixed)TextEffect = C1WinC1FlexGridTextEffectEnumRaised

using Aggregates property of the FooterDescription class Aggregate functions can be specified using the Aggregate property whichaccepts values from AggregateEnum enumeration

Following code shows how to add a column footer in the WinForms FlexGrid

列にフッタを追加しますc1FlexGrid1FootersDescriptionsAdd(new C1WinC1FlexGridFooterDescription() Caption = Total ) フッタに集計を適用しますc1FlexGrid1FootersDescriptions[0]AggregatesAdd(new C1WinC1FlexGridAggregateDefinition() Column = 4 Aggregate = C1WinC1FlexGridAggregateEnumSum )

列にフッタを追加しますc1FlexGrid1FootersDescriptionsAdd(New C1WinC1FlexGridFooterDescription() With Caption = Total )

フッタに集計を適用しますc1FlexGrid1FootersDescriptions(0)AggregatesAdd(New C1WinC1FlexGridAggregateDefinition() With Column = 4 Aggregate = C1WinC1FlexGridAggregateEnumSum )

サイズ変更

Set Column WidthFlexGrid provides the DefaultSize property of ColumnCollection class to set the column width across the grid You canalso specify the width of a particular column by setting the Width property of the Column class Default value ofWidth property is -1 which indicates that the column is taking width specified by the DefaultSize property The Widthproperty is also available at design time through the C1FlexGrid Column Editor For more information on columneditor see Editors

Use the code below to set the default width of a column of the WinForms FlexGrid

Auto-adjust Column WidthTo adjust the column width according to the text length FlexGrid provides the AutoSizeCol() and AutoSizeCols()methods While AutoSizeCol() method automatically adjusts width of the specified column the AutoSizeCols()method is used for cell ranges

Following code shows how you can auto adjust the column widths according to the text length in the WinFormsFlexGrid

すべての列のデフォルト幅を設定しますc1FlexGrid1ColsDefaultSize = 110最初の列の幅を設定しますc1FlexGrid1Cols [1] Width = 30

すべての列のデフォルト幅を設定します c1FlexGrid1ColsDefaultSize = 110最初の列の幅を設定します c1FlexGrid1Cols（1）Width = 30

Set MinMax Column WidthFlexGrid allows you to set bounds to the column width by using the MinSize and MaxSize propertiesof ColumnCollection This feature is especially useful in scenarios such as when AllowResizing property is set to trueor while using the AutoSizeCol or AutoSizeCols method

Specify the bounds of column width in the WinForms FlexGrid using the code below

Star SizingStar sizing refers to proportional sizing of grid columns to occupy the available space so that layout of grid remainssame even on resizing For instance consider a grid with 5 columns whose star sizes are specified as 3 2 and In this case first fourth and fifth column always take the same width and grid allocates thrice the width of firstcolumn to the second and twice the width to third column

テキストの長さに応じて最初の列の幅を自動調整しますc1FlexGrid1AutoSizeCol(1) 列の幅を1番目から4番目まで自動調整しますc1FlexGrid1AutoSizeCols(1 4 2)

すべての列の幅を自動調整します c1FlexGrid1AutoSizeCols()

テキストの長さに応じて最初の列の幅を自動調整しますc1FlexGrid1AutoSizeCol(1)

列の幅を1番目から4番目まで自動調整しますc1FlexGrid1AutoSizeCols(1 4 2)

列コレクションの最小幅を設定します c1FlexGrid1ColsMinSize = 20 列コレクションの最大幅を設定します c1FlexGrid1ColsMaxSize = 60

列コレクションの最小幅を設定します c1FlexGrid1ColsMinSize = 20

列コレクションの最大幅を設定します c1FlexGrid1ColsMaxSize = 60

FlexGrid provides the StarWidth property of Column class to specify the star sizes of columns To restrict the widthsfrom getting too narrow or too wide you can set the MinWidth and MaxWidth properties These properties are alsoavailable through the C1FlexGrid Column Editor For more information on column editor see Editors

Set star sizing or proportional sizing in the WinForms FlexGrid columns using the code below

列のスターサイズを設定しますc1FlexGrid1Cols[1]StarWidth = c1FlexGrid1Cols[2]StarWidth = 3c1FlexGrid1Cols[3]StarWidth = 2c1FlexGrid1Cols[4]StarWidth = c1FlexGrid1Cols[5]StarWidth =

列が狭くなりすぎないようにMinWidthプロパティを設定しますc1FlexGrid1Cols[1]MinWidth = 50

列のスターサイズを設定しますc1FlexGrid1Cols(1)StarWidth = c1FlexGrid1Cols(2)StarWidth = 3c1FlexGrid1Cols(3)StarWidth = 2c1FlexGrid1Cols(4)StarWidth = c1FlexGrid1Cols(5)StarWidth =

列が狭くなりすぎないようにMinWidthプロパティを設定しますc1FlexGrid1Cols(1)MinWidth = 50

In FlexGrid the collection of rows is represented by the RowCollection class which can be accessed through Rows property of the C1FlexGrid class Thissection discusses the various operations that can be performed on rows

Basic Operations Discusses about how to perform basic row operations

Set Row CountAdd RowDelete RowInsert RowSet Data TypeSet Fixed RowSet Frozen Row

User Interaction Discusses about operations that can be performed by the end-user at run time

Allow AddingAllow DeletingAllow DraggingAllow FreezingAllow Resizing

Header Discusses about how to set row header and perform other related operations

Set Header TextMerge Row HeaderWrap Row Header TextStyle Row Header

Row Detail Discusses how to display additional information using row detail feature

In-form EditingHierarchical ViewCustom Row Details

Sizing Discusses about various aspects of row sizing

Set Row HeightAuto-adjust Row HeightSet MinMax Row Height

基本操作

This topic discusses various basic operations which can be performed on a row

Set Row CountWhen grid is bound to a data source the number of rows is determined by the number of records available in thedata source However in the case of unbound mode you can set any integer value in Count property ofthe RowCollection class to set the number of rows to be displayed in the grid

Use the code below to set row count in the WinForms FlexGrid

Set row count c1FlexGrid1RowsCount = 15

Add RowFlexGrid provides various ways to add a new row at runtime You can either use Add method of the RowCollectionclass or AddItem method of the C1FlexGrid class to add a new record In the unbound mode you can also incrementthe value of Count property to add new rows Note that all these ways add rows towards the end of the grid To inserta row at a specific location see Insert Row Also note that an exception is thrown if a new row is added to a boundgrid using Count property

Add a row to WinForms FlexGrid using any of these approaches shown in the code below

Delete RowTo delete a particular row from the grid you can use Remove method of the RowCollection class and specify the rowyou want to delete as its parameter The RowCollection class also provides RemoveRange method which allows you

Set row countc1FlexGrid1RowsCount = 15

Approach1 Use the RowCollectionAdd method to add row C1WinC1FlexGridRow r r = c1FlexGrid1RowsAdd() Set data r[1] = New Row 2

Approach2 Use AddItem method to add row and set data c1FlexGrid1AddItem( + t + New Row 1) Approach3 Use the RowCollectionCount property to add row c1FlexGrid1RowsCount += 1 Set data c1FlexGrid1[c1FlexGrid1RowsCount - 1 1] = New Row 3

Approach1 Use the RowCollectionAdd method to add row Dim r As C1WinC1FlexGridRow r = c1FlexGrid1RowsAdd()

Set data r(1) = New Row 2

Approach2 Use AddItem method to add row and set data c1FlexGrid1AddItem( amp vbTab amp New Row 1)

Approach3 Use the RowCollectionCount property to add row c1FlexGrid1RowsCount += 1

Set data c1FlexGrid1(c1FlexGrid1RowsCount - 1 1) = New Row 3

to remove a range of rows using a single call Similarly you can also use RemoveItem method of the C1FlexGridclass to remove a specific row In the unbound grid you can reduce the number of rows by changing the value ofCount property

Following code gives different approaches to delete row from the WinForms FlexGrid

Insert RowTo insert a row in FlexGrid at a specific location you can use Insert method of the RowCollection class which lets youspecify the position where rows are to be inserted You can also insert multiple rows in the grid by usingthe InsertRange method

Below code demonstrates how to insert a row at a particular position in the WinForms FlexGrid

Approach1 Remove second row using RowCollectionRemove methodc1FlexGrid1RowsRemove(2)

Approach1 Remove second row using the RemoveItem methodc1FlexGrid1RemoveItem(2)

Approach3 Remove 3 rows starting from second using the RemoveRange methodc1FlexGrid1RowsRemoveRange(2 3) Approach4 Remove last row using the RowCollectionCount property c1FlexGrid1RowsCount -= 1

Approach1 Remove second row using RowCollectionRemove method c1FlexGrid1RowsRemove(2)

Approach1 Remove second row using the RemoveItem method c1FlexGrid1RemoveItem(2)

Approach3 Remove 3 rows starting from second using the RemoveRange method c1FlexGrid1RowsRemoveRange(2 3)

Approach4 Remove last row using the RowCollectionCount property c1FlexGrid1RowsCount -= 1

C1WinC1FlexGridRow r Approach1 Use the Insert method to insert row at second position r = c1FlexGrid1RowsInsert(2) r[1] = Inserted row Approach2

Set Data TypeIn case of a bound FlexGrid data type of each bound column is automatically picked from the data source dependingon the data However in the case of unbound mode you can set the data type of rows or columns by specifyingthe DataType property of Row or Column class respectively Note that when data type is set for both rows andcolumns column settings take preference over row settings

Use the code below to set data type of a WinForms FlexGrid row

Set Fixed RowFixed rows refer to the rows with non-editable cells which are always visible on top of the grid even when user scrollsdown the grid In FlexGrid fixed rows can be set using Fixed property of the RowCollection class This propertyaccepts an integer value that specifies the number of rows to be fixed

Set fixed rows in the WinForms FlexGrid using the code below

Set Frozen RowFrozen rows similar to fixed rows are non-scrollable but can be edited by the user In FlexGrid frozen rows can be set

Use the InsertRange method to add three rows at second position c1FlexGrid1RowsInsertRange(2 3)

Dim r As C1WinC1FlexGridRow Approach1 Use the Insert method to insert row at second position r = c1FlexGrid1RowsInsert(2) r(1) = Inserted row

Approach2 Use the InsertRange method to add three rows at second position c1FlexGrid1RowsInsertRange(2 3)

C1WinC1FlexGridRow r r = c1FlexGrid1RowsAdd() rDataType = typeof(int)

Dim r As C1WinC1FlexGridRow r = c1FlexGrid1RowsAdd() rDataType = GetType(int)

Set three rows as fixed c1FlexGrid1RowsFixed = 3

Set three rows as fixedc1FlexGrid1RowsFixed = 3

by using Frozen property provided by the RowCollection class

Use the code below to set frozen rows in the WinForms FlexGrid

Set first two rows as frozen c1FlexGrid1RowsFrozen = 2

ユーザー操作

This topic discusses how you can let end-users interact with the FlexGrid rows

Allow AddingBy default FlexGrid does not allow end-user to add new row to the grid To provide an option to add rows at runtimeyou can set AllowAddNew property of the C1FlexGrid class to true FlexGrid also provides a design-time optionEnable Adding Rows in C1FlexGrid Tasks menu to allow adding new row by the end-user For more information ontask menus see Tasks Menus Moreover you can also set watermark text to be displayed in the new row templatethrough NewRowWatermark property

Use the code below to allow users to add rows in WinForms FlexGrid at run-time

Allow user to add rows c1FlexGrid1AllowAddNew = true Set watermark in the template new row c1FlexGrid1NewRowWatermark = Add new row

Allow user to add rows c1FlexGrid1AllowAddNew = True

Set watermark in the template new row

Allow DeletingFlexGrid by default does not allow end-user to delete rows from the grid However if your application requires youcan let the end-user delete the selected rows through Delete key by setting AllowDelete property to true You canalso enable row deletion by checking ON the Enable Deleting Rows checkbox on the C1FlexGrid Tasks menu

Following code shows how to allow users to delete rows from WinForms FlexGrid at run-time

Allow DraggingFlexGrid by default does not allow user to rearrange rows by dragging However you can change this behavior inunbound grid by using the FlexGridAllowDragging property and RowAllowDragging property To enable dragging ofgrid rows you can set the FlexGridAllowDragging property to either Rows or Both This property accepts the valuesfrom AllowDraggingEnum You can also disable dragging of a particular row by setting the RowAllowDraggingproperty to false

Note As moving a row is not allowed in bound mode the bound grid throws an exception on dragging arow To implement dragging in bound mode see the blog Drag and Drop Rows in C1Flexgrid

Let users drag the rows in an unbound WinForms FlexGrid at run-time by using the code below

Allow FreezingTo allow end user to freeze the rows at runtime you can use AllowFreezing property of the C1FlexGrid class whichaccepts values from AllowFreezingEnum When this property is set to Rows or Both a lock sign appears when mouseis hovered over the edge of header row End-user can click and drag the lock sign to freeze the rows

Use the code below to allow your users to freeze the WinForms FlexGrid rows at run-time

c1FlexGrid1NewRowWatermark = Add new row

Allow user to delete rowsc1FlexGrid1AllowDelete = true

Allow user to delete rowsc1FlexGrid1AllowDelete = True

Allow dragging of all rows across the grid c1FlexGrid1AllowDragging = C1WinC1FlexGridAllowDraggingEnumRows Disable dragging of a particular row c1FlexGrid1Rows[3]AllowDragging = false

Allow dragging of all rows across the grid c1FlexGrid1AllowDragging = C1WinC1FlexGridAllowDraggingEnumRows

Disable dragging of a particular row c1FlexGrid1Rows(3)AllowDragging = False

Allow ResizingBy default FlexGrid does not give option to resize the rows To change this behavior you can use AllowResizingproperty of the C1FlexGrid class This property accepts values from the AllowResizingEnum enumerationwhich enables end-user to change size of columns rows or both The enumeration also gives you options touniformly resize the rows columns or both that is if you resize one of the columns or rows the grid automaticallyresizes rest of the columns or rows as well FlexGrid also provides RowAllowResizing property which is Boolean typeand lets you enable or disable resizing of a particular row

Following code shows how to allow users to resize the WinForms FlexGrid rows at run-time

Allow freezing of rows at runtimec1FlexGrid1AllowFreezing = C1WinC1FlexGridAllowFreezingEnumRows

Allow user to resize rows c1FlexGrid1AllowResizing = C1WinC1FlexGridAllowResizingEnumRows Stop user from resizing second row c1FlexGrid1Rows[2]AllowResizing = false

Allow user to resize rows c1FlexGrid1AllowResizing = C1WinC1FlexGridAllowResizingEnumRows

Stop user from resizing second row c1FlexGrid1Rows(2)AllowResizing = False

ヘッダ

Row header refers to the fixed rows on the left hand side of the grid which may or may not contain the caption string

In FlexGrid by default the left most column with zero index is allocated for the row header However you can span theheader to other columns as well by specifying them as fixed To set more than one column as fixed you need toset the Fixed property of ColumnCollection class to an integer greater than 1

Set Header TextTo set the row header text you can set Caption property of the Row class Note that this property sets the value of cellsin the default header column at zero index To set value in the other fixed column cells you need to use the usual valueallocation ways of FlexGrid For more information on how to set cell values see Set Value in Cell

Specify the header column and set the header text in WinForms FlexGrid using the code below

Merge Row HeaderFlexGrid provides AllowMerging property of the Column class which specifies whether it is allowed to merge cells in aparticular column (in this case the header column) or not Once you have allowed merging in the header columnset either AllowMerging or AllowMergingFixed property of the C1FlexGrid class to FixedOnly Availability of these twoproperties in the FlexGrid control offers you more flexibility to implement multiple logics related to merging For moreinformation on merging cells see Merge

Set header for first rowc1FlexGrid1Rows[1]Caption = Row 1

Set header for all rowsfor (int i = c1FlexGrid1RowsFixed i lt c1FlexGrid1RowsCount i++) c1FlexGrid1[i 0] = Row + iToString()

Set column widthc1FlexGrid1Cols[0]Width = 85

Set header for first row c1FlexGrid1Rows(1)Caption = Row 1

Set header for all rows For i As Integer = c1FlexGrid1RowsFixed To c1FlexGrid1RowsCount - 1 c1FlexGrid1(i 0) = Row amp iToString() Next

Set column width c1FlexGrid1Cols(0)Width = 85

Use the code below to merge row headers in the WinForms FlexGrid

Wrap Row Header TextTo wrap the text in row header access the CellStyle item Fixed of the CellStyleCollection class and set its WordWrapproperty to true Note that to view the wrapped text properly you need to adjust height of FlexGrid rows or just callthe AutoSizeRow() method to automatically resize the rows according to the length of text

Use the code below to wrap header text of the WinForms FlexGrid rows

Style Row HeaderTo style the row header you can access the CellStyle item Fixed of the CellStyleCollection class and set variousstyling related properties for same such as Font ForeColor and TextEffect

Allow merging on the header columnc1FlexGrid1Cols[0]AllowMerging = true

Set AllowMerging or AllowMergingFixed property of the grid to merge fixed rowcolumns only c1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumFixedOnlyc1FlexGrid1AllowMergingFixed = C1WinC1FlexGridAllowMergingEnumFixedOnly

Allow merging on the header columnc1FlexGrid1Cols(0)AllowMerging = True

Set row captionc1FlexGrid1Rows[3]Caption = Large text to display text wrapping and mergingc1FlexGrid1Rows[4]Caption = Large text to display text wrapping and merging Set row heightc1FlexGrid1Rows[3]Height = 35c1FlexGrid1Rows[4]Height = 35

Set word wrapping for fixed rows and columnsc1FlexGrid1Styles[Fixed]WordWrap = true

Set row captionc1FlexGrid1Rows(3)Caption = Large text to display text wrapping and mergingc1FlexGrid1Rows(4)Caption = Large text to display text wrapping and merging

Set row heightc1FlexGrid1Rows(3)Height = 35c1FlexGrid1Rows(4)Height = 35

Set word wrapping for fixed rows and columnsc1FlexGrid1Styles(Fixed)WordWrap = True

Customize row header of the WinForms FlexGrid using the code below

Set font of the header textc1FlexGrid1Styles[Fixed]Font = new Font(Tahoma 10 FontStyleBold) Set forecolor of the header textc1FlexGrid1Styles[Fixed]ForeColor = ColorPaleVioletRed Set backcolor of the header textc1FlexGrid1Styles[Fixed]BackColor = ColorLemonChiffon Apply text effect on the header textc1FlexGrid1Styles[Fixed]TextEffect = C1WinC1FlexGridTextEffectEnumInset

Set font of the header text c1FlexGrid1Styles(Fixed)Font = New Font(Tahoma 10 FontStyleBold)

Set forecolor of the header text c1FlexGrid1Styles(Fixed)ForeColor = ColorPaleVioletRed

Set backcolor of the header text c1FlexGrid1Styles(Fixed)BackColor = ColorLemonChiffon

Apply text effect on the header text c1FlexGrid1Styles(Fixed)TextEffect = C1WinC1FlexGridTextEffectEnumInset

行の詳細

Row detail is a feature to provide additional information related to a row or record in the form of another expandablelayer In such case row which is the first layer contains the basic information while the second layer contains the detailedinformation This feature is specially useful when the additional information is too large to be displayed in the availablescreen space or it is not consistent for every record

FlexGrid provides the row detail feature using IC1FlexGridRowDetail interface which is implemented by the detail controls tobe hosted on detail row In addition FlexGrid also provides a separate assembly C1WinC1FlexGridRowDetails452dllto provide template user controls InputPanel and FlexGrid ready to be used in detail row You can add details section toany row in FlexGrid which enables you to group data in a template which is visible optionally This allows users to viewadditional data related to a row by simply selecting the row The grid also provides built-in expand or collapse buttons tocontrol the visibility of data within the expandable row

Some common use case scenarios of row detail feature are

1 In-form editing where an InputPanel control is hosted to get input from the user to fill information in a record2 Hierarchical grid which contains a master grid and a detail grid to show additional information about the record3 Custom row details where any control can be used to create row detail template

Detailed implementation of these scenarios is given in their respective sections below

In-form EditingFlexGrid supports in-form editing by hosting InputPanel control in detail row The InputPanel control contains data fieldswhere user can enter or edit the values like a form Once user finishes editing fields those values get reflected in theselected row

In FlexGrid you can implement in-form editing by adding reference to C1WinC1FlexGridRowDetails452dll and usingthe C1InputPanelRowDetail class which already implements the IC1FlexGridRowDetail interface The instance of this classis then assigned to RowDetailProvider property of the C1FlexGrid class which adds the InputPanel control to detail rowand enables the in-form editing

Hierarchical ViewHierarchical view refers to master-detail model where top level grid is the master grid and nested grid is the detail gridwhich displays additional information about expanded row of the master grid For instance example below demonstratesthe master-detail structure using Customer and Order tables respectively with CustomerID as common data element todefine a relation

flexGridRowDetailProvider = (g r) =gt new C1InputPanelRowDetail()flexGridRowDetailsVisibilityMode = RowDetailsVisibilityModeVisibleWhenSelected

flexGridRowDetailProvider = Function(g r) New C1InputPanelRowDetail()flexGridRowDetailsVisibilityMode = RowDetailsVisibilityModeVisibleWhenSelected

In FlexGrid you can implement hierarchical grid by adding reference to C1WinC1FlexGridRowDetails452dll and usingthe C1FlexGridRowDetail class which already implements the IC1FlexGridRowDetail interface The instance of this class isthen assigned to RowDetailProvider property of the C1FlexGrid class to nest another grid in the detail row which enablesthe hierarchical grid interface

private void FlexGrid_Load(object sender EventArgs e) string conn = UtilGetConnectionString() var ds = new DataSet() string[] tables = Customers OrdersSplit() foreach (string tableName in tables) UtilFillTable(ds tableName conn) Defining relation between master and detail grid dsRelationsAdd(Customers_Orders dsTables[Customers]Columns[CustomerID] dsTables[Orders]Columns[CustomerID]) flexGridDataSource = ds flexGridDataMember = Customers flexGridRowDetailProvider = (g r) =gt new C1FlexGridRowDetail() flexGridAreRowDetailsFrozen = false

Private Sub FlexGrid_Load(ByVal sender As Object ByVal e As EventArgs) Dim conn As String = UtilGetConnectionString() Dim ds = New DataSet() Dim tables As String() = Customers OrdersSplit(c)

For Each tableName As String In tables UtilFillTable(ds tableName conn) Next Defining relation between master and detail grid dsRelationsAdd(Customers_Orders dsTables(Customers)Columns(CustomerID) dsTables(Orders)Columns(CustomerID))

Custom Row DetailsIn addition to the InputPanel and FlexGrid control you can also host a custom control in the detail row of a grid Forinstance in the example below a text label control is attached to the row to enlist the additional information withoutaffecting the dimensions of the grid

To implement the custom row details in FlexGrid you need to create a user control which implementsthe IC1FlexGridRowDetail interface For instance here we have created a class named CustomRowDetail which representsthe text label control to be hosted in the detail row You then need to assign an object of this class to RowDetailProviderproperty of the C1FlexGrid class to enable the custom control to display additional information in the detail row

flexGridDataSource = ds flexGridDataMember = Customers flexGridRowDetailProvider = Function(g r) New C1FlexGridRowDetail() flexGridAreRowDetailsFrozen = False End Sub

private void CustomSample_Load(object sender EventArgs e) flexGridDataSource = DemoDataSource(Employees) flexGridRowDetailProvider = (g r) =gt new CustomRowDetail() flexGridRowDetailsVisibilityMode = RowDetailsVisibilityModeVisibleWhenSelected flexGridCols[Notes]Visible = false

Custom row detail class which shows label with notes about employee public class CustomRowDetail C1Label IC1FlexGridRowDetail Used to setup control before showing the FlexGrid detail control void IC1FlexGridRowDetailSetup(C1FlexGrid parentGrid int rowIndex) var bs = new BindingSource(parentGridDataSource parentGridDataMember) bsPosition = parentGridRows[rowIndex]DataIndex DataField = Notes DataSource = bs

Used to update size of the FlexGrid detail control void IC1FlexGridRowDetailUpdateSize(C1FlexGrid parentGrid int rowIndex Size proposedSize) var srSz = parentGridScrollableRectangleSize var sz = TextRendererMeasureText(Text Font srSz TextFormatFlagsWordBreak) szWidth = MathMax(szWidth srSzWidth) Size = sz

Private Sub CustomSample_Load(ByVal sender As Object ByVal e As EventArgs) flexGridDataSource = DemoDataSource(Employees) flexGridRowDetailProvider = Function(g r) New CustomRowDetail() flexGridRowDetailsVisibilityMode = RowDetailsVisibilityModeVisibleWhenSelected flexGridCols(Notes)Visible = False End Sub

Custom row detail class which shows label with notes about employee Public Class CustomRowDetail Inherits C1Label Implements IC1FlexGridRowDetail

Used to setup control before showing the FlexGrid detail control Private Sub Setup(ByVal parentGrid As C1FlexGrid ByVal rowIndex As Integer) Dim bs = New BindingSource(parentGridDataSource parentGridDataMember) bsPosition = parentGridRows(rowIndex)DataIndex DataField = Notes DataSource = bs End Sub

Used to update size of the FlexGrid detail control Private Sub UpdateSize(ByVal parentGrid As C1FlexGrid ByVal rowIndex As Integer ByVal proposedSize As Size) Dim srSz = parentGridScrollableRectangleSize Dim sz = TextRendererMeasureText(Text Font srSz TextFormatFlagsWordBreak) szWidth = MathMax(szWidth srSzWidth) Size = sz End Sub End Class

サイズ変更

Set Row HeightFlexGrid provides DefaultSize property of the RowCollection class to set row height across the grid You can alsospecify the height of a particular row by setting Height property of the Row class Default value of the Heightproperty is -1 which indicates that the row is taking height specified by the DefaultSize property

Use the code below to set the default height of a row of the WinForms FlexGrid

Set the default size of all rowsc1FlexGrid1RowsDefaultSize = 50

Auto-adjust Row HeightTo adjust the row height according to text length and word wrapping options FlexGrid provides the AutoSizeRow()and AutoSizeRows() methods While AutoSizeRow() method automatically adjusts height of the specified row theAutoSizeRows() method is used for cell ranges

Following code shows how you can auto adjust the row height according to the text length in the WinForms FlexGrid

Set MinMax Row HeightFlexGrid allows you to set bounds to the row height by using the MinSize and MaxSize propertiesof the RowCollection class This feature is especially useful in scenarios such as when AllowResizing property is set totrue or while using the AutoSizeRow() or AutoSizeRows() method

Specify the bounds of row height in the WinForms FlexGrid using the code below

Set the height of a particular rowc1FlexGrid1Rows[1]Height = 55

Set the height of a particular rowc1FlexGrid1Rows(1)Height = 55

Adjust the height of fourth row automaticallyc1FlexGrid1AutoSizeRow(4) Adjust the height of all rows automatically c1FlexGrid1AutoSizeRows() Adjust the height of cell range automaticallyc1FlexGrid1AutoSizeRows(2 4 5 6 10 C1WinC1FlexGridAutoSizeFlagsNone)

Adjust the height of fourth row automatically c1FlexGrid1AutoSizeRow(4)

Adjust the height of all rows automatically c1FlexGrid1AutoSizeRows()

Adjust the height of cell range automatically c1FlexGrid1AutoSizeRows(2 4 5 6 10 C1WinC1FlexGridAutoSizeFlagsNone)

Set the maximum height of rowc1FlexGrid1RowsMaxSize = 50 Set the minimum height of rowc1FlexGrid1RowsMinSize = 20

Set the maximum height of rowc1FlexGrid1RowsMaxSize = 50

Set the minimum height of row c1FlexGrid1RowsMinSize = 20

セル

Cell is the smallest unit of a grid Although in most common scenarios we prefer working on row or column levelthere are some operations which are required to be carried out on the cell level Getting setting or removing data arefew to name

Basic Operations Discusses how to perform basic operations related to a cell

Set Value in CellSet Values in Cell RangeClear Value from Cell (Range)Set Image in CellDisplay Tooltip in CellRetrieve Cell Values

Cell Format Discusses how to format cell or cell data in various scenarios

Cell ContentCell AppearanceConditional FormattingOwner Drawn Cell

基本操作

Set Value in CellFlexGrid provides two ways to set values in cell You can either use Item property (indexer) or SetData method of the C1FlexGrid class

Use the code below to set a value in the WinForms FlexGrid cell

Set Values in Cell RangeTo set values in a cell range you can either use Data property of the CellRange class or SetData method of the C1FlexGrid class

Following code shows how to set values in a cell range in WinForms FlexGrid

インデックスを使用してデータを設定しますc1FlexGrid1[2 3] = 2nd col 3rd row SetDataメソッドを使用してデータを設定しますc1FlexGrid1SetData(2 4 2nd col 4th row)

インデックスを使用してデータを設定します c1FlexGrid1(2 3) = 2nd col 3rd row

SetDataメソッドを使用してデータを設定します c1FlexGrid1SetData(2 4 2nd col 4th row)

セル範囲を取得しますC1WinC1FlexGridCellRange cr = c1FlexGrid1GetCellRange(2 3 5 6) 方法1dataプロパティを使用してセル範囲にデータを設定しますcrData = Cell Range

Clear Value from Cell (Range)There are two ways by which contents of cell or cell range can be cleared You can either chose to do it programmatically by setting thecontent of cell to an empty string using indexer or SetData method Or you can set the AutoClipboard property to true so that user candelete the values by pressing the Delete key

Below code demonstrates how to allow keyboard operations so that user can clear values from WinForms FlexGrid cells

Set Image in CellTo set image in a cell you can use SetCellImage method of the C1FlexGrid class You can also set an image in a cell range by using Imageproperty of the CellRange class By default text and image both are displayed in the cell However you can choose to display only image bysetting the ImageAndText property to false

Use the code below to set image in a WinForms FlexGrid cell

方法2SetDataメソッドを使用してセル範囲にデータを設定します c1FlexGrid1SetData(cr Cell Range)

セル範囲を取得します Dim cr As C1WinC1FlexGridCellRange = c1FlexGrid1GetCellRange(2 3 5 6)

方法1dataプロパティを使用してセル範囲にデータを設定します crData = Cell Range

ユーザーがDeleteキーを押してセルの内容をクリアするなどのキーボード操作を実行できるようにしますc1FlexGrid1AutoClipboard = true

コードを介して特定のセルのデータをクリアしますc1FlexGrid1SetData(3 4 )

ユーザーがDeleteキーを押してセルの内容をクリアするなどのキーボード操作を実行できるようにします c1FlexGrid1AutoClipboard = True

コードを介して特定のセルのデータをクリアします c1FlexGrid1SetData(3 4 )

セル（36）に画像を設定しますc1FlexGrid1SetCellImage(3 6 ImageFromFile(masterpng))

Display Tooltip in CellTo display partially hidden content of cells as tooltip FlexGrid provides ShowCellLabels property of the C1FlexGrid class You can also showadditional information in the form of a tooltip by using the MouseEnterCell and MouseLeaveCell event

Below code shows how to display a tooltip on a WinForms FlexGrid cell

セル範囲（126）から（146）に画像を設定しますC1WinC1FlexGridCellRange crcr = c1FlexGrid1GetCellRange(12 6 14 6)crImage = ImageFromFile(amexjpg)

テキストなしで画像を表示しますc1FlexGrid1Rows[3]ImageAndText = false

セル（36）に画像を設定します c1FlexGrid1SetCellImage(3 6 ImageFromFile(masterpng))

セル範囲（126）から（146）に画像を設定します Dim cr As C1WinC1FlexGridCellRange cr = c1FlexGrid1GetCellRange(12 6 14 6) crImage = ImageFromFile(amexjpg)

テキストなしで画像を表示します c1FlexGrid1Rows(3)ImageAndText = False

private void Form1_Load(object sender EventArgs e) このコードはデータを「c1NWindDataSetEmployees」テーブルにロードします必要に応じて移動または削除できます thisemployeesTableAdapterFill(thisc1NWindDataSetEmployees) for (int i = c1FlexGrid1RowsFixed i lt c1FlexGrid1RowsCount i++) c1FlexGrid1Rows[i]UserData = Employee + c1FlexGrid1[i 2] + + c1FlexGrid1[i 3] private void C1FlexGrid1_MouseEnterCell(object sender C1WinC1FlexGridRowColEventArgs e) if (eRow gt= c1FlexGrid1RowsFixed) string tip tip = c1FlexGrid1Rows[eRow]UserDataToString() ツールチップを表示します toolTip1SetToolTip(c1FlexGrid1 tip)

private void C1FlexGrid1_MouseLeaveCell(object sender C1WinC1FlexGridRowColEventArgs e) ツールチップを非表示にします toolTip1SetToolTip(c1FlexGrid1 )

Retrieve Cell ValuesThere are numerous ways using which you can fetch the value of FlexGrid cells depending on your requirement Below tablediscusses several scenarios such as fetching the raw data or formatted data from a single cell or a cell range

Requirement MethodProperty Usage

Get the raw data Item property (indexer) ExampleCode

var data = c1FlexGrid1[1 1] SystemDiagnosticsDebugWriteLine($Cell data data)

GetData() method ExampleCode

var data1 = c1FlexGrid1GetData(1 1) SystemDiagnosticsDebugWriteLine($Cell data data1)

Get the formatted data GetDataDisplay() method ExampleCode

var data2 = c1FlexGrid1GetDataDisplay(1 1) SystemDiagnosticsDebugWriteLine($Display data data2)

Get values of a cell range Clip property ExampleCode

var data3 = c1FlexGrid1Clip SystemDiagnosticsDebugWriteLine($Clip data data3)

GetCellRange method ExampleCode

var data4 = c1FlexGrid1GetCellRange(1 1) SystemDiagnosticsDebugWriteLine($Cell Range data data4Clip)

Private Sub Form1_Load(ByVal sender As Object ByVal e As EventArgs) このコードはデータを「c1NWindDataSetEmployees」テーブルにロードします必要に応じて移動または削除できます MeemployeesTableAdapterFill(Mec1NWindDataSetEmployees)

For i As Integer = c1FlexGrid1RowsFixed To c1FlexGrid1RowsCount - 1 c1FlexGrid1Rows(i)UserData = Employee amp c1FlexGrid1(i 2) amp + c1FlexGrid1(i 3) Next End Sub

Private Sub C1FlexGrid1_MouseEnterCell(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs) If eRow gt= c1FlexGrid1RowsFixed Then Dim tip As String tip = c1FlexGrid1Rows(eRow)UserDataToString() ツールチップを表示します toolTip1SetToolTip(c1FlexGrid1 tip) End If End Sub

Private Sub C1FlexGrid1_MouseLeaveCell(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs) ツールチップを非表示にします toolTip1SetToolTip(c1FlexGrid1 ) End Sub

セルの書式設定

Cell ContentTo control how content of the cells is formatted and displayed set the Format property of Row or Column object toformat string similar to the ones that are used with StringFormat property in the NET framework For instance thesample code below formats the third column as Date and fourth column as Currency

FlexGrid also provides design time option to set the Format property through the Format String dialog You canaccess the Format String dialog by clicking Ellipsis button against the Format String field in Column Tasks menu Oryou can also use the Format property in C1FlexGrid Column Editor

短い日付形式を設定しますc1FlexGrid1Cols[3]Format = D 通貨形式を設定しますc1FlexGrid1Cols[4]Format = c

短い日付形式を設定しますc1FlexGrid1Cols(3)Format = D

通貨形式を設定しますc1FlexGrid1Cols(4)Format = c

Note that Format String dialog is specific to column and changes the Format property of the selected column only

Cell AppearanceFlexGrid provides CellStyle objects to handle the appearance aspects of cells such as alignment font colors bordersand so on The grid has Styles property that holds the collection of styles used to format the grid This collection hassome built-in members that define the appearance of grid elements such as fixed and scrollable cells selection focuscell and so on You can change these styles to modify the appearance of grid

Although changing the built-in styles is the simplest way to change appearance of the grid you can also create yourown custom styles and assign them to cells rows or columns

Use the code below to change appearance of the WinForms FlexGrid cells

組み込みのスタイルをカスタマイズしますCellStyle cs = c1FlexGrid1StylesFocus

Conditional FormattingTo format a cell according to its content you need to create a new style and apply it to the cells satisfying a particularcondition using SetCellStyle() method For instance to highlight the values greater than a specified value you canformat the cells containing them using different style

Following code shows how to apply conditional formatting on WinForms FlexGrid cells

csFont = new Font(c1FlexGrid1Font FontStyleBold)csForeColor = ColorGreencsBackColor = ColorRed

カスタムスタイルを作成します CellStyle cs1 = c1FlexGrid1StylesAdd(NewStyle)cs1BackColor = ColorAquacs1ForeColor = ColorBlue

カスタムスタイルを割り当てますc1FlexGrid1Cols[3]Style = cs1

Dim cs As CellStyle = c1FlexGrid1StylesFocus csFont = New Font(c1FlexGrid1Font FontStyleBold) csForeColor = ColorGreen csBackColor = ColorRed

Dim cs1 As CellStyle = c1FlexGrid1StylesAdd(NewStyle) cs1BackColor = ColorAqua cs1ForeColor = ColorBlue

c1FlexGrid1Cols(3)Style = cs1

CellStyle cs 大きな値のカスタムスタイルを作成しますcs = c1FlexGrid1StylesAdd(LargeValue)csFont = new Font(Font FontStyleItalic)

Owner Drawn CellThe above sections explain how you can customize FlexGrid cells to change the appearance of grid using CellStyleobjects However for further customization of grid cells such as rendering gradient background custom graphics etcyou can use DrawMode property and OwnerDrawCell event of the C1FlexGrid class

The DrawMode property determines whether or not the OwnerDrawCell event is fired The event allows you tooverride every visual aspect of the cell You can change the text and image to be displayed in the cell by setting theeText and eImage parameters in the event handler You can also change the style that is used to display the cell bysetting the eStyle property

Note that you should not modify properties of the Style parameter as it might affect other cells Instead assign a newCellStyle object to the Style parameter For example instead of setting eStyleForeColor = ColorRed assign a wholenew style to the parameter using eStyle = c1FlexGrid1Styles[RedStyle]

You can also use your own drawing code to draw into the cell and even combine your custom code with calls to theeDrawCell method For example you can paint the cell background using GDI calls and then call eDrawCell todisplay the cell borders and content

In the example below WinForms FlexGrid uses a gradient brush to paint the background of the selected cell rangeFirst the sample code sets the DrawMode property to OwnerDraw and then declares a LinearGradientBrushobject

csBackColor = ColorGold

for (int row = 1 row lt c1FlexGrid1RowsCount row++)if (ConvertToDouble(c1FlexGrid1[row 4]) gt 80000)c1FlexGrid1SetCellStyle(row 4 cs)

Dim cs As CellStyle

cs = c1FlexGrid1StylesAdd(LargeValue) csFont = New Font(Font FontStyleItalic) csBackColor = ColorGold

For row As Integer = 1 To c1FlexGrid1RowsCount - 1

If ConvertToDouble(c1FlexGrid1(row 4)) gt 80000 Then c1FlexGrid1SetCellStyle(row 4 cs) End If Next

SystemDrawingDrawing2DLinearGradientBrush m_GradientBrushprivate void Form1_Load(object sender EventArgs e)

所有者描画セルで使用するブラシ m_GradientBrush = new SystemDrawingDrawing2DLinearGradientBrush(ClientRectangle ColorSteelBlue ColorWhite 45)

グラデーションを追加するにはowner-drawを使用します c1FlexGrid1DrawMode = C1WinC1FlexGridDrawModeEnumOwnerDraw

private void C1FlexGrid1_OwnerDrawCell(object sender C1WinC1FlexGridOwnerDrawCellEventArgs e) グラデーションブラシを使用して選択したセルの背景を描画します if (c1FlexGrid1SelectionContains(eRow eCol)) 背景を描きますeGraphicsFillRectangle(m_GradientBrush eBounds)

グリッドにコンテンツを描画させますeDrawCell(C1WinC1FlexGridDrawCellFlagsContent)

このセルの描画は完了ですeHandled = true

Private m_GradientBrush As DrawingDrawing2DLinearGradientBrush

Private Sub Form1_Load(ByVal sender As Object ByVal e As EventArgs) 所有者描画セルで使用するブラシ m_GradientBrush = New DrawingDrawing2DLinearGradientBrush(ClientRectangle ColorSteelBlue ColorWhite 45)

グラデーションを追加するにはowner-drawを使用します c1FlexGrid1DrawMode = C1WinC1FlexGridDrawModeEnumOwnerDrawEnd Sub

Private Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As C1WinC1FlexGridOwnerDrawCellEventArgs) グラデーションブラシを使用して選択したセルの背景を描画します If c1FlexGrid1SelectionContains(eRow eCol) Then 背景を描きます eGraphicsFillRectangle(m_GradientBrush eBounds)

グリッドにコンテンツを描画させます eDrawCell(C1WinC1FlexGridDrawCellFlagsContent)

このセルの描画は完了です eHandled = True End IfEnd SubEnd IfEnd Sub

グリッド

This section discusses about various operations that can be performed on the grid

Basic Operations Discusses about basic operations that can be performed on the grid

Transpose Data in GridDisplay Context Menu

Keyboard Navigation Discusses about supperted keys and their operations in

Non-edit ModeEdit Mode

Improve Performance Provides tips and tricks to get best out of your grid by improving its performance

Use Data VirtualizationUse BeginUpdate and EndUpdate MethodsKeep AutoResize Property to False (default)Assign Styles DynamicallyAvoid Modifying Styles in the OwnerDrawCell EventShow Ellipses in a Single ColumnShow Multi-line Text in a CellRetrieve Data Sorting When Bound to a Data TableSpecify Character Limit for Column

基本操作

This topic discusses about various operations that require handling at the grid level

Transpose Data in GridTransposing data refers to swapping column data and row data In WinForms FlexGrid this can be achieved usingTranspose() method of the C1FlexGrid class as shown in the code below

Note that data can be transposed only in the case of unbound grid Also if grid has sorting applied on a column theTranspose() method removes sorting before transposing the data

Display Context MenuContext menus can be helpful to user as they provide shortcuts for actions that are frequently used In FlexGrid therecan be two scenarios to display a context menu

Display context menu in non-edit modeDisplay context menu in edit mode

Display Context Menu in Non-edit Mode

To display context menu when grid is in non-edit mode you need to create an instance of ContextMenuStrip controladd the menu items and assign the instance to ContextMenuStrip property of the Control class

c1FlexGrid1Transpose()

C1FlexGrid1Transpose()

Refer to the code below to see how to display a context menu in WinForms FlexGrid in non-edit mode

Display Context Menu in Edit Mode

To display context menu in edit mode you need to display the context menu on editor by using StartEdit event ofthe C1FlexGrid class In the StartEdit event instantiate the editor and the ContextMenuStrip add menu items andthen assign it to ContextMenuStrip property of the editor

Create an instance of ContextMenuStrip controlContextMenuStrip cm = new ContextMenuStrip()

Add menu items to the context menucmItemsAdd(Add Above)cmItemsAdd(Add Below)cmItemsAdd(Add Left)cmItemsAdd(Add Right)

Assign the instance to ContextMenuStrip property c1FlexGrid1ContextMenuStrip = cm

Create an instance of ContextMenuStrip controlDim cm As ContextMenuStrip = New ContextMenuStrip()

Use the code below to display context menu in WinForms FlexGrid in edit mode

private void C1FlexGrid1_StartEdit(object sender C1WinC1FlexGridRowColEventArgs e) TextBox tb = (TextBox)c1FlexGrid1Editor

Create context menu ContextMenuStrip cm2 = new ContextMenuStrip() cm2ItemsAdd(Cut) cm2ItemsAdd(Copy) cm2ItemsAdd(Paste) Set context menu tbContextMenuStrip = cm2

Private Sub C1FlexGrid1_StartEdit(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs) Dim tb As TextBox = CType(c1FlexGrid1Editor TextBox)

Create context menu Dim cm2 As ContextMenuStrip = New ContextMenuStrip() cm2ItemsAdd(Cut) cm2ItemsAdd(Copy) cm2ItemsAdd(Paste)

Set context menu tbContextMenuStrip = cm2End Sub

キーボードによる移動

With built-in keyboard support FlexGrid lets you perform the basic navigation operations such as moving the focusentering or exiting the edit mode etc with a perfect ease just by using keys Below tables list the supported keys andtheir corresponding operations in non-edit as well as in edit mode of the cell

Non-edit Mode

Key Sequence Key Action

larr rarr

Moves focus to the adjacent cell in direction indicated by the arrow key

Shift + ArrowSelects adjacent cells in direction indicated by the arrow key

F2Grid is editable Toggles the cell to edit mode If a value exists in the cell it getsselected Else the grid simply displays a cursor in the cell

Grid is not editable No action

EnterGrid is editable Toggles the cell to edit mode If a value exists in the cell it getsselected Else the grid simply displays a cursor in the cell

Grid is not editable Moves the selection down to the next visible row

You can also change default behavior of Enter key press by using the KeyActionEnterproperty

HomeMoves focus to the first cell of row

EndMoves focus to the last cell of row

Ctrl + HomeMoves focus to the first cell of column

Ctrl + EndMoves focus to the last cell of column

TabBy default grid ignores the Tab key press and lets it cycle through the controls on theform However you can define the action to be performed on Tab key press by usingthe KeyActionTab property

Ctrl + C

Ctrl + X

Ctrl + V

Performs usual clipboard operations that is copy(Ctrl+C) cut(Ctrl+X) and paste(Ctrl+V)when AutoClipboard property is set to true (Default value is false)

Edit Mode

Moves focus to the adjacent cell in the direction indicated by arrow key

larr rarrMoves cursor by one character in the direction indicated by arrow key When cursor is onthe first or last character moves focus to the adjacent cell in the direction of arrow key

EnterToggles the cell to non-edit mode and moves focus to the cell below You can also changedefault behavior of Enter key press by using the KeyActionEnter property

EscCancels editing and exits the edit mode

パフォーマンスの向上

Use Data VirtualizationTo efficiently render large data sets FlexGrid supports data vitualization in which data is fetched in pages as the user scrolls down The gridknows the total number of rows but only loads and displays those that are visible to the user For instance you can use C1DataCollectionpackage to implement virtualizable data source Create a class inherited from the C1VirtualDataCollection and implement GetPageAsyncmethod which returns one page of data from data source you have assigned The following GIF shows how FlexGrid appears in the virtualscrolling mode

public class VirtualModeCollectionView C1VirtualDataCollectionltCustomergt public int TotalCount get set = 1_000 protected override async TaskltTupleltint IReadOnlyListltCustomergtgtgt GetPageAsync(int pageIndex int startingIndex int count IReadOnlyListltSortDescriptiongt sortDescriptions = null FilterExpression filterExpression = null CancellationToken cancellationToken = default(CancellationToken)) await TaskDelay(500 cancellationToken)Simulates network traffic return new Tupleltint IReadOnlyListltCustomergtgt(TotalCount EnumerableRange(startingIndex count)Select(i =gt new Customer(i))ToList())

Public Class VirtualModeCollectionView

Use BeginUpdate and EndUpdate MethodsThe BeginUpdate and EndUpdate methods are used to optimize the performance of the grid Call BeginUpdate before making extensivechanges and call EndUpdate when done to suspend repainting This reduces flicker and increases performance This optimization is especiallyeffective when adding large number of rows to the grid because it needs to recalculate ranges and update scrollbars each time a row is added

The code below shows how to add a large number of rows to the WinForms FlexGrid efficiently Note how the EndUpdate method is calledinside a finally block to ensure repainting is properly restored

Keep AutoResize Property to False (default)In case of bound grid if AutoResize property is set to true the control automatically resizes its columns to fit the widest entry every time newdata is read from the data source If the data source contains a large number of rows and columns the automatic resizing may take a relativelylong time In such cases you should consider setting AutoResize to false and setting the column widths directly in code

Assign Styles DynamicallyFlexGrid allows you to create cell styles and assign them to rows columns and arbitrary cell ranges You can use this feature to format the gridcells conditionally Usually you do this by using the SetCellStyle() method However in that case you have to update the style whenever the cellvalue changes Also if the grid is bound to a data source styles are lost whenever data source is reset after operations such as sorting andfiltering A better alternative in these cases is to use the OwnerDraw feature and select styles dynamically based on the cell values For example

Inherits C1VirtualDataCollection(Of Customer)

Public Property TotalCount As Integer = 1_000

Protected Overrides Async Function GetPageAsync(ByVal pageIndex As Integer ByVal startingIndex As Integer ByVal count As Integer ByVal Optional sortDescriptions As IReadOnlyList(Of SortDescription) = Nothing ByVal Optional filterExpression As FilterExpression = Nothing ByVal Optional cancellationToken As CancellationToken = DirectCast(Nothing CancellationToken)) As Task(Of Tuple(Of Integer IReadOnlyList(Of Customer))) Await TaskDelay(500 cancellationToken) Simulates network traffic Return New Tuple(Of Integer IReadOnlyList(Of Customer))(TotalCount EnumerableRange(CInt(startingIndex) CInt(count))[Select](Function(i) New Customer(i))ToList()) End FunctionEnd Class

void UpdateGrid(C1FlexGrid c1FlexGrid1) try c1FlexGrid1BeginUpdate() suspend painting to avoid flicker c1FlexGrid1RowsCount = 1 for (int i = 1 i lt 10000 i++) c1FlexGrid1AddItem(Row + iToString()) finally c1FlexGrid1EndUpdate() always restore painting

Private Sub UpdateGrid(ByVal c1FlexGrid1 As C1FlexGrid) Try c1FlexGrid1BeginUpdate() suspend painting to avoid flicker c1FlexGrid1RowsCount = 1

For i As Integer = 1 To 10000 - 1 c1FlexGrid1AddItem(Row amp iToString()) Next

Finally c1FlexGrid1EndUpdate() always restore painting End TryEnd Sub

the sample code shows how to display negative values in red color and values above 1000 in green color in the WinForms FlexGrid

Avoid Modifying Styles in the OwnerDrawCell EventAnother way to improve performance is not to modify the CellStyle object passed as a parameter in the OwnerDrawCell event Instead assign anew value to the eStyle parameter This is important because the CellStyle passed to the event handler is often used by other cells Forexample you could unintentionally change a normal style of the WinForms FlexGrid which would affect other similar cells as well in the grid

private void Form1_Load(object sender EventArgs e) Fill a column with random values c1FlexGrid1Cols[1]DataType = typeof(int) Random rnd = new Random() for (int r = 1 r lt c1FlexGrid1RowsCount r++) c1FlexGrid1[r 1] = rndNext(-10000 10000) Create style used to show negative values c1FlexGrid1StylesAdd(Red)ForeColor = ColorRed Enable OwnerDraw by setting the DrawMode property c1FlexGrid1DrawMode = C1WinC1FlexGridDrawModeEnumOwnerDraw c1FlexGrid1OwnerDrawCell += new C1WinC1FlexGridOwnerDrawCellEventHandler(C1FlexGrid1_OwnerDrawCell)

private void C1FlexGrid1_OwnerDrawCell(object sender OwnerDrawCellEventArgs e) if(eMeasuring) Check that the row and column contain integer data if (eRow gt 0 ampamp c1FlexGrid1Cols[eCol]DataType == typeof(int)) Apply the style Red eStyle = c1FlexGrid1Styles[Red]

Private Sub Form1_Load(ByVal sender As Object ByVal e As EventArgs) Fill a column with random values c1FlexGrid1Cols(1)DataType = GetType(Integer) Dim rnd As Random = New Random()

For r As Integer = 1 To c1FlexGrid1RowsCount - 1 c1FlexGrid1(r 1) = rnd[Next](-10000 10000) Next

Create style used to show negative values c1FlexGrid1StylesAdd(Red)ForeColor = ColorRed

Enable OwnerDraw by setting the DrawMode property c1FlexGrid1DrawMode = C1WinC1FlexGridDrawModeEnumOwnerDraw c1FlexGrid1OwnerDrawCell += New C1WinC1FlexGridOwnerDrawCellEventHandler(AddressOf C1FlexGrid1_OwnerDrawCell) End Sub

Private Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As OwnerDrawCellEventArgs) If Not eMeasuring Then

Check that the row and column contain integer data If eRow gt 0 AndAlso c1FlexGrid1Cols(eCol)DataType Is GetType(Integer) Then Apply the style Red eStyle = c1FlexGrid1Styles(Red) End If End If End Sub

Show Ellipses in a Single ColumnThe Trimming property should be used to show ellipses in a single column of the grid To determine how long strings are trimmed to fit the cellthe Trimming property can be set to either None Character Word EllipsisCharacter EllipsisWord or EllipsisPath For more information ontrimming see Display Trimmed Text

The following code sets the Trimming property to show ellipses at the end of the second WinForms Flexgrid column with the text trimmed tothe nearest character

Show Multi-line Text in a CellWhen showing multiple lines of text in a cell use the WordWrap and Height properties The WordWrap property determines whether the gridshould automatically break long strings that contain spaces and display them in multiple lines Strings that contain hard line breaks (vbCrLf ornr) are always displayed in multiple lines Multiple line text can be displayed in both fixed and scrollable cells For more information on wordwrapping see Wrap Text

Refer to code below to see how a multi-line text should be effectively displayed in the WinForms FlexGrid

CORRECT APPROACHprivate void C1FlexGrid1_OwnerDrawCell(object sender C1WinC1FlexGridOwnerDrawCellEventArgs e) Select style to use when painting this cell eStyle = MyStyleSelector(eRow eCol) WRONG APPROACHprivate void C1FlexGrid1_OwnerDrawCell(object sender C1WinC1FlexGridOwnerDrawCellEventArgs e) Select style to use when painting this cell This is wrong because changing any CellStyle objects invalidates the grid which would cause this event handler to be called over and over again eStyleColor = MyColorSelector(eRow eCol)

CORRECT APPROACHPrivate Sub C1FlexGrid1_OwnerDrawCellMethod(ByVal sender As Object ByVal e As C1WinC1FlexGridOwnerDrawCellEventArgs) Select style to use when painting this celleStyle = MyStyleSelector(eRow eCol)End Sub

WRONG APPROACHPrivate Sub C1FlexGrid1_OwnerDrawCell(ByVal sender As Object ByVal e As C1WinC1FlexGridOwnerDrawCellEventArgs) Select style to use when painting this cell This is wrong because changing any CellStyle objects invalidates the grid which would cause this event handler to be called over and over againeStyleColor = MyColorSelector(eRow eCol)End Sub

c1FlexGrid1Cols[1]StyleNewTrimming =StringTrimmingEllipsisCharacter

c1FlexGrid1Cols(1)StyleNewTrimming = StringTrimmingEllipsisCharacter

Set the WordWrap property

Retrieve Data Sorting When Bound to a Data TableTo maintain the way the grid is sorted when data is refreshed you can use the default views Sort property and a sort expression The Sortproperty uses a string containing the column name followed by ASC(default) or DESC to sort the column in ascending or descending orderrespectively Multiple columns can be sorted by specifying each column name separated by a comma A sort expression can include names ofgrid columns or a calculation Setting the sort expression at run time immediately reflects the changes in the data view

Below code shows how to use the sort expression with Sort property in the WinForms FlexGrid

Specify Character Limit for ColumnTo set the maximum number of characters a user can enter for any given column use the SetupEditor event You must declare an externaleditor such as C1TextBox in the StartEdit event of the C1FlexGrid class Then in the SetupEditor event you can set the maximum number ofcharacters that are allowed in a column cell

Use the code below to set the character limit for a WinForms FlexGrid column

c1FlexGrid1Styles[Normal]WordWrap = true Set the row heightc1FlexGrid1Rows[1]Height = 2 fgRowsDefaultSize Add text to the cellc1FlexGrid1[1 2] = This is the first line rn This is the second line

Set the WordWrap property c1FlexGrid1Styles(Normal)WordWrap = True

Set the row height c1FlexGrid1Rows(1)Height = 2 fgRowsDefaultSize

Add text to the cell c1FlexGrid1(1 2) = This is the first line amp vbCrLf amp This is the second line

Sort the data by the UnitsInStock column then by the ProductID column thisproductsBindingSourceSort = UnitsInStock ASC ProductID ASC

Sort the data by the UnitsInStock column then by the ProductID columnMeproductsBindingSourceSort = UnitsInStock ASC ProductID ASC

private void C1FlexGrid1_StartEdit(object sender C1WinC1FlexGridRowColEventArgs e) c1FlexGrid1Editor = c1TextBox private void C1FlexGrid1_SetupEditor(object sender RowColEventArgs e) Set the 3rd column to allow 20 characters and the rest only 10 if (eCol == 2) c1TextBoxMaxLength = 20 else c1TextBoxMaxLength = 10

Private Sub C1FlexGrid1_StartEdit(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs)

c1FlexGrid1Editor = c1TextBox End Sub

Private Sub C1FlexGrid1_SetupEditor(ByVal sender As Object ByVal e As RowColEventArgs)

Set the 3rd column to allow 20 characters and the rest only 10 If eCol = 2 Then c1TextBoxMaxLength = 20 Else c1TextBoxMaxLength = 10 End If End Sub

スクロールバー

Display or Hide the Scroll BarIn FlexGrid you can manage the display of scroll bars using the ScrollBars property which lets you choose whether todisplay horizontal vertical both or no scroll bar through the ScrollBars enumeration

Below code shows how to always display both the scrollbars in the WinForms FlexGrid

Set Scroll PositionTo scroll FlexGrid to a specified location you can set TopRow and LeftCol property of the C1FlexGrid class TopRowproperty scrolls the grid vertically while LeftCol sets the horizontal scroll position of the grid The maximum value ofthese properties depends on the total number of rows or columns and the count that can be displayed in the gridThis feature is really useful in scenarios like synchronized scrolling of multiple grids

Use the code below to set scroll position of the WinForms FlexGrid

水平および垂直スクロールバーを表示しますc1FlexGrid1ScrollBars = ScrollBarsBoth 常にスクロールバーを表示しますc1FlexGrid1ScrollOptions = ScrollFlagsAlwaysVisible

水平および垂直スクロールバーを表示しますc1FlexGrid1ScrollBars = ScrollBarsBoth

常にスクロールバーを表示しますc1FlexGrid1ScrollOptions = ScrollFlagsAlwaysVisible

スクロール位置を設定しますc1FlexGrid1TopRow = 3c1FlexGrid1LeftCol = 2

スクロール位置を設定しますc1FlexGrid1TopRow = 3

Other Scroll OptionsFlexGrid also provides more options to handle various aspects of displaying a scroll bar through ScrollOptionsproperty This property accepts the values from ScrollFlags enumeration which lets you customize the scroll baroptions as described in the table below

Value Scroll Operation

AlwaysVisible Displays the scroll bar even when they are disable or there is no scrollable area

DelayedScroll Scrolls the content only after user has released the scrollbar thumb

KeepMergedRangePosition Can not set scroll position to the first cell of a merged range

None Uses the default scrolling behavior

ScrollByRowColumn Scrolls the content in units of rows or columns instead of scrolling by pixels

ShowScrollTips Fires the ShowScrollTip event and displays a tooltip next to the vertical scrollbarwhile scrolling vertically

Following code shows how to scroll the WinForms FlexGrid by rows or columns only

c1FlexGrid1LeftCol = 2

行や列単位でスクロールします c1FlexGrid1ScrollOptions = ScrollFlagsScrollByRowColumn

行や列単位でスクロールしますc1FlexGrid1ScrollOptions = ScrollFlagsScrollByRowColumn

選択

Selection ModesFlexGrid by default allows to select a continuous batch of cells using mouse or keyboard and entire row or column by clicking thecorresponding header However the default behavior can be changed to allow selection in units of cell row column etc byusing SelectionMode property of the C1FlexGrid class The property accepts values from the SelectionModeEnumenumeration Below table gives a quick snapshot of how selection looks like in each of these modes

Value Description Snapshot

Default Allows selection of continuous batch of cells using mouse orkeyboard Also lets the user select entire row or column onclicking the respective header

Cell Allows selection of single cell at a time

CellRange Allows selection of continuous batch of cells using mouse orkeyboard

Column Allows selection of single column at a time

ColumnRange Allows selection of multiple contiguous columns at a time

ListBox Allows selection of multiple non-contiguous rows using the Ctrlkey

Row Allows selection of single row at a time

RowRange Allows selection of multiple contiguous rows at a time

Set SelectionFlexGrid provides various ways to set the selection through code You can use any of these methods depending on the requirementsuch as selecting the single cell cell range or rows

Selection MethodProperty Sample code

Single cell Set the Row and Col property Default value of both of theseproperties is 1 Hence by default selection is set to the firstscrollable cell on top left of the grid

Example Title

c1FlexGrid1Row = 2c1FlexGrid1Col = 1

Call the Select(rowIndex colIndex) method to select a singlecell

Example Title

c1FlexGrid1Select(2 1)

Cell range Set the RowSel and ColSel property These properties set theselection starting from value set in Row and Col property tothe specified row and column Note that to specify a blockselection you must set Row and before setting RowSel andColSel

Example Title

c1FlexGrid1Row = 2c1FlexGrid1Col = 1c1FlexGrid1RowSel = 4c1FlexGrid1ColSel = 3

Call the Select(CellRange Boolean) method to select a cellrange in a single call

Example Title

CellRange cellRange = new CellRange()cellRanger1 = 2cellRanger2 = 4cellRangec1 = 1cellRangec2 = 3c1FlexGrid1Select(cellRange)

(If SelectionModes =

SelectionModesEnum

ListBox)

Set the RowSelected property to true for individual rowobjects to select the non-continuous rows

Example Title

c1FlexGrid1SelectionMode = SelectionModeEnumListBoxc1FlexGrid1Rows[1]Selected = truec1FlexGrid1Rows[4]Selected =

Get Selection To get selected range of the WinForms FlexGrid you can use Selection property of the C1FlexGrid class

Select Text on Double ClickBy default double click on a grid cell changes the cell state to edit mode and shows the cursor at position of the mouse pointerHowever you can change this behavior and select the cell value on double click of a cell This can be done by detecting anddisabling the double click in BeforeDoubleClick event Then call the StartEditing method to enter the edit mode change theeditor to a TextBox and call the SelectAll method to select the cell value

Following code shows how you can select text of the WinForms FlexGrid cell on a double click

private void Button1_Click(object sender EventArgs e) C1WinC1FlexGridCellRange cr cr = c1FlexGrid1Selection MessageBoxShow(Selected rangen + crr1 + + crc1 + to + crr2 + + crc2)

Private Sub Button1_Click(ByVal sender As Object ByVal e As EventArgs) Dim cr As C1WinC1FlexGridCellRange cr = c1FlexGrid1Selection MessageBoxShow(Selected range amp vbLf amp crr1 amp + crc1 amp to + crr2 amp + crc2)End Sub

private void C1FlexGrid1_BeforeDoubleClick(object sender BeforeMouseDownEventArgs e) デフォルトのダブルクリックを無効にします eCancel = true 編集モードに入ります c1FlexGrid1StartEditing() TextBoxクラスに変換しSelectAllメソッドを使用して選択します TextBox tb = (TextBox)c1FlexGrid1Editor tbSelectAll()

Private Sub C1FlexGrid1_BeforeDoubleClick(ByVal sender As Object ByVal e As BeforeMouseDownEventArgs) デフォルトのダブルクリックを無効にします eCancel = True 編集モードに入ります c1FlexGrid1StartEditing() TextBoxクラスに変換しSelectAllメソッドを使用して選択します Dim tb As TextBox = CType(c1FlexGrid1Editor TextBox) tbSelectAll()End Sub

編集

This topic discusses about various events and methods which are related to editing and also about how to disableediting

Topic Content

Edit Mode Discusses various events and methods related to editing

Disable Editing Discusses how to disable editing in grid at various levels

Disable Grid EditingDisable Row or Column EditingDisable Cell Editing

編集モード

In FlexGrid edit mode can be invoked at runtime using mouse click or even keyboard To determineprogrammatically whether the grid is in edit mode you can read the value of Editor property If the grid is in editmode the property returns a reference to the control that is being used as editor such as TextBox or ComboBoxHowever if the grid is not in edit mode the property returns null

To put the grid in edit mode programmatically you can use the StartEditing method and to finish editing you can callthe FinishEditing method You can also retain the state of edit mode in grid while navigating through the cells byusing the PreserveEditMode property

In addition FlexGrid fires various events to facilitate better control on the editing process Below table lists thesequence of events which are fired by the grid during the editing process

Event Name Description

BeforeEdit The event fires whenever an editable cell is selected It allows you to prevent the cell from beingedited by setting the events Cancel parameter to true You can also modify the ComboList propertyso the appropriate drop-down button gets painted in the cell Note that the user might not actuallystart editing after this he could simply move the selection to a different cell or control

StartEdit The event is similar to BeforeEdit except the user has actually typed a key or clicked the dropdownbutton in the cell and really is about to start editing You can still cancel the editing at this point Notethat the Editor property is still null at this point because the control hasnt yet determined the typeof editor that should be used You can assign custom editors to the Editor property at this point

ChangeEdit The event is a wrapper of editorTextChanged event The event fires when the contents of the editorchange You can use this event to keep track of the current content in editor

SetupEditor The event fires after the editor control has been created and configured to edit the cell but before itis displayed You can change the editor properties at this point (for example set the maximum lengthor password character to be used in a TextBox editor) You can also attach your own event handlers tothe editor

ValidateEdit The event fires when the user is done editing before the editor value gets copied back into the gridYou can examine the original value by retrieving it from the grid (the event provides the coordinatesof the cell) You can examine the new value about to be assigned to the grid through the Editorproperties (for example EditorText) If the new value is not valid for the cell set the Cancel parameterto true and the grid remains in edit mode If instead of keeping the cell in edit mode you wouldrather restore the original value and leave edit mode set Cancel parameter to true and then call theFinishEditing method

LeaveEdit This event fires after the grid control leaves edit mode You can use this event to approve or deny the

new cell content or to change the editor content about to be committed

AfterEdit This event fires after the new value has been applied to the cell and the editor has been deactivatedYou can use this event to update anything that depends on the cell value (for example subtotals orsorting)

Also there are few events which are related to keyboard operations and are fired when a key is pressed They aresimilar to their counterparts from SystemWindowsFormsControl class apart from the fact that they occur when thegrid is in edit mode

Event Description

KeyDownEdit This event fires when grid is in edit mode and a key is pressed You can use this event toperform an action once or even multiple times while the key is held down such as movinga cursor

KeyPressEdit This event fires when grid is in edit mode and a character key is pressed You can use thisevent to perform any operation related to typing such as handling input in the cell editor

KeyUpEdit This event fires when grid is in edit mode and key is released You can use this event toplace a logic that executes after KeypressEdit logic has taken effect

編集の無効化

FlexGrid by default allows end-user to edit the cell values at runtime However with FlexGrid you can easily managehow much control you want to give to the end-users using various properties provided by the FlexGrid

Disable Grid EditingTo disable editing of the whole WinForms FlexGrid you need to set AllowEditing property of the C1FlexGrid class tofalse as shown in the code below

Disable Row or Column EditingTo disable the editing of a particular row or column of the WinForms FlexGrid you can set the AllowEditing propertyof Row or Column object to false as shown in the code below

グリッドで編集を無効にします c1FlexGrid1AllowEditing = false

グリッドで編集を無効にしますc1FlexGrid1AllowEditing = False

3行目の編集を無効にしますc1FlexGrid1Rows[3]AllowEditing = false 3列目の編集を無効にしますc1FlexGrid1Cols[3]AllowEditing = false

Disable Cell EditingTo disable editing of a particular cell you can use the BeforeEdit event and set the Cancel parameter for thatparticular cell to true

3行目の編集を無効にしますc1FlexGrid1Rows(3)AllowEditing = False

3列目の編集を無効にしますc1FlexGrid1Cols(3)AllowEditing = False

セル編集を無効にしますprivate void C1FlexGrid1_BeforeEdit(object sender RowColEventArgs e) if ((eCol == 4) ampamp (eRow == 2)) eCancel = true

セル編集を無効にしますPrivate Sub C1FlexGrid1_BeforeEdit(ByVal sender As Object ByVal e As RowColEventArgs) If eCol = 4 AndAlso eRow = 2 Then eCancel = True End IfEnd Sub

並べ替え

Sorting is one of the basic features a grid must have and FlexGrid provides you complete control on how data can besorted in ascending or descending order for easier data analysis This topic discusses about sorting in FlexGrid andother related operations

Sort Operations Discusses various operations related to sorting

Sorting through CodeSort Multiple ColumnsRevertUndo SortingDisable Sort on a Particular ColumnSort OrderCustom Sorting

Sort Indicator Discusses how to hide position and customize sort indicator

HideDisplay Sort IndicatorPosition Sort IndicatorCustomize Sort Indicator

並べ替えの操作

FlexGrid by default allows end-users to apply sorting on a single column by clicking the column header in ascending ordescending order However the grid also provides you flexibility so that you can sort your data according to yourrequirement Below sections take you through the ways to perform various operations related to sorting

Sorting through CodeYou can apply sorting through code by calling Sort method of the C1FlexGrid class The method takes SortFlagsenumeration as its parameter which lets you provide the various sort options such as setting the sort order and ignorecasing The method has various overloads which gives you flexibility to apply sorting either on a column or a range ofcells rows or columns

Use the code below to sort columns and apply sorting options through code in the WinForms FlexGrid

Sort Multiple ColumnsTo apply sorting on multiple columns through code you can use the Sort property of Column class and then call theSort() method with SortFlags set to UseColSort The Sort property accepts values from SortFlags enumeration

Following code shows how to sort multiple columns of the WinForms FlexGrid through code

To allow user to sort multiple columns at runtime set AllowSorting property of the C1FlexGrid class to MultiColumn Theproperty accepts values from the AllowSortingEnum enumeration

Following code shows how to let user sort multiple columns of the WinForms FlexGrid at run-time

方法1 2番目の列を降順で並べ替えますc1FlexGrid1Sort(C1WinC1FlexGridSortFlagsDescending 2) 方法 2SortFlagを使用して複数の並べ替えオプションを指定しますC1WinC1FlexGridSortFlags order = C1WinC1FlexGridSortFlagsAscending | C1WinC1FlexGridSortFlagsIgnoreCase Sortメソッドを呼び出しますc1FlexGrid1Sort(order 2)

方法1 2番目の列を降順で並べ替えますc1FlexGrid1Sort(C1WinC1FlexGridSortFlagsDescending 2)

方法2 SortFlagを使用して複数の並べ替えオプションを指定しますDim order As C1WinC1FlexGridSortFlags = C1WinC1FlexGridSortFlagsAscending Or C1WinC1FlexGridSortFlagsIgnoreCase

Sortメソッドを呼び出しますc1FlexGrid1Sort(order 2)

複数列を並べ替えますc1FlexGrid1Cols[2]Sort = SortFlagsAscendingc1FlexGrid1Cols[3]Sort = SortFlagsDescending Sortメソッドを呼び出しますc1FlexGrid1Sort(SortFlagsUseColSort 2 3)

複数列を並べ替えますc1FlexGrid1Cols(2)Sort = SortFlagsAscendingc1FlexGrid1Cols(3)Sort = SortFlagsDescending

Sortメソッドを呼び出しますc1FlexGrid1Sort(SortFlagsUseColSort 2 3)

グリッドの複数の列での並べ替えを許可します c1FlexGrid1AllowSorting = AllowSortingEnumMultiColumn

RevertUndo SortingTo remove sorting from the grid you can set SortDefinition property of the C1FlexGrid class to an empty string

Below code how to remove sorting from the WinForms FlexGrid

Disable Sort on a Particular ColumnTo disable sorting on a particular column you need to set the AllowSorting property of that Column object to false

Use the code below to disable sorting on a particular column of the WinForms FlexGrid

Sort OrderOrder of sorting usually varies in case of bound and unbound mode When a column header is clicked in case of boundmode sorting is done same as DefaultViewSort property of the data table However in case of unbound mode columnis sorted either according to StringCompare method or by differentiating the lower and upper case according to theculture

Refer to the code below to specify sorting order of a WinForms FlexGrid column

グリッドの複数の列での並べ替えを許可しますc1FlexGrid1AllowSorting = AllowSortingEnumMultiColumn

並べ替えを削除します c1FlexGrid1SortDefinition = stringEmpty

並べ替えを削除しますc1FlexGrid1SortDefinition = StringEmpty

グリッドの特定の列での並べ替えを無効にしますc1FlexGrid1Cols[2]AllowSorting = false

グリッドの特定の列での並べ替えを無効にしますc1FlexGrid1Cols(2)AllowSorting = False

C1WinC1FlexGridSortFlags order = C1WinC1FlexGridSortFlagsAscending | C1WinC1FlexGridSortFlagsIgnoreCase c1FlexGrid1Sort(order 2)

Dim order As C1WinC1FlexGridSortFlags = C1WinC1FlexGridSortFlagsAscending Or C1WinC1FlexGridSortFlagsIgnoreCasec1FlexGrid1Sort(order 2)

Custom SortingFlexGrid provides several sorting options which are required for most commonly used scenarios such as ignore case usethe display value etc However if you need to have more flexibility and control over sort operation you can even writeyour own custom logic using the IComparer class For instance the example below sorts the Name column by fileextensions In the sample code custom logic to sort by file extension is implemented in the FileNameComparer class whichis then passed as parameter to Sort() method of the C1FlexGrid class

The code below demonstrates how to apply custom sorting on the WinForms FlexGrid columns

c1FlexGrid1Sort(new FileNameComparer(c1FlexGrid1 eOrder)) class FileNameComparer IComparer C1FlexGrid c1FlexGrid1 bool _desc

ctor public FileNameComparer(C1FlexGrid flex SortFlags order) c1FlexGrid1 = flex _desc = ((order amp SortFlagsDescending) = 0) IComparer public int Compare(object r1 object r2) ファイル名を取得します string s1 = (string)c1FlexGrid1[((Row)r1)Index Name] string s2 = (string)c1FlexGrid1[((Row)r2)Index Name]

拡張機能を比較します int icmp = stringCompare(PathGetExtension(s1) PathGetExtension(s2) true)

並べ替え順（昇順または降順）を返します return (_desc) -icmp icmp

C1FlexGrid1Sort(New FileNameComparer(C1FlexGrid1 SortFlagsAscending))

Public Class FileNameComparer Implements IComparer

Private c1FlexGrid1 As C1FlexGrid Private _desc As Boolean

Public Sub New(ByVal flex As C1FlexGrid ByVal order As SortFlags) c1FlexGrid1 = flex _desc = ((order And SortFlagsDescending) ltgt 0) End Sub

Public Function Compare(r1 As Object r2 As Object) As Integer Implements IComparerCompare Dim s1 As String = CStr(c1FlexGrid1((CType(r1 Row))Index Name)) Dim s2 As String = CStr(c1FlexGrid1((CType(r2 Row))Index Name)) Dim icmp As Integer = StringCompare(PathGetExtension(s1) PathGetExtension(s2) True) Return If((_desc) -icmp icmp) End Function

For detailed implementation of custom sorting see the product sample named Custom Sort

Note The abovementioned product sample is located at DocumentsComponentOneSamplesWinFormsvxxxC1FlexGridCS on your system if you have installed the samples while installing WinFormsEdition using ComponentOneControlPanelexe

並べ替えのインジケータ

FlexGrid displays sort indicator a small triangular arrow sign to indicate the direction of sorting The grid alsoprovides flexibility to hide display position or customize the indicator

Hide or Display Sort IndicatorFlexGrid by default displays the sort indicator when a column header is clicked to sort the columns However you canhide the indicator by setting the ShowSortPosition property to None The property accepts valuesfrom ShowSortPositionEnum enumeration

Use the code below to hide the sort indicator displayed on the sorted WinForms FlexGrid column

Position Sort IndicatorSort indicator by default gets displayed towards the right side of the header cell However when the filtering isapplied on a column the sort indicator displays on top of the header cell to give place to the filtering icon You can fixthe position of sort indicator by setting value of ShowSortPosition property to Top or Right

Customize the position of column sort indicator in WinForms FlexGrid using the code below

Customize Sort IndicatorFlexGrid provides the GlyphEnum enumeration which lets you specify the image to be used for sort indicator Formore information on the GlyphEnum and glyph customization see Custom Glyphs

並べ替えインジケータを非表示にしますc1FlexGrid1ShowSortPosition = ShowSortPositionEnumNone

並べ替えインジケータの位置を上に変更しますc1FlexGrid1ShowSortPosition = ShowSortPositionEnumTop

フィルタ

Grid filtering lets you narrow down display records according to a specified condition applied on a column It is especially useful in case of large data sets asit lets you easily analyze data by displaying a specific type of records only

This section discusses about the process types and customization of filters

Filter Operations Discusses about how to enable or apply filtering and other related operations

Allow FilteringFiltering through CodeCustom FilteringRemove FilteringTypes of Filters

Filter UI Discusses about filtering icon its customization and how to set the filter language

Show Filter IconUse Custom IconsChange Filter Language

フィルタの操作

Data filtering in a grid can be performed in two ways

Header-based Filter

In header-based filtering an icon is displayed in the header cell of column which gives you options to specify the filter in a drop-down and alsoindicates if the filter is applied on a particular column In FlexGrid this behavior can be achieved by simply using AllowFiltering property of the gridIn this case filter does not require any extra real estate on the screen This approach also gives you flexibility to customize and create better filtereditors More details about same is given in the sections below

Filter Row

Filter row is a row dedicated for displaying the filtering criteria and appears just below the column header So in this case user can always see thefiltered columns and their current filtering criteria But this added advantage comes at the cost of extra screen real estate that a filter row needs InFlexGrid you can easily achieve filter row using the custom implementation For implementation see the product sample named Filter Row

Note The Filter Row sample is located at DocumentsComponentOne SamplesWinFormsv452C1FlexGridCS on your system if you haveinstalled the samples while installing WinForms Edition using ComponentOneControlPanelexe

Allow FilteringIn FlexGrid filtering can be enabled by setting the C1FlexGridAllowFiltering property to true This enables the default ColumnFilter on allcolumns of the grid The ColumnFilter lets the users choose from ValueFilter and ConditionFilter at runtime

You can also specify the filter types for each column by setting the AllowFiltering property of each Column object AllowFiltering property ofcolumn lets you choose from any of the following values

Value Description

Default Enables the ColumnFilter which is a combination of ValueFilter and ConditionFilter and gives user a runtime option to choose eitherof them

ByValue Enables ValueFilter which contains a checkbox list of values present in that column User can check off the values that should not bedisplayed in the filtered output

ByCondition Enables ConditionFilter which lets you specify combination of two conditions such as equals greater than contains etc Youcan combine the specified conditions using And and Or operator

Custom Lets you instantiate a custom filter and explicitly assign it to Filter property of the column

None Disables filtering for that column

Use the following code snippet to enable a condition filter on first column of the WinForms FlexGrid

For more details regarding abovementioned filter types see Types of Filters

Filtering through CodeAlthough AllowFiltering property of grid enables grid filtering and can be used in most common scenarios there may be cases where you need tofurther fine tune the filter options This can be achieved by modifying AllowFiltering and Filter properties of individual columns For example thecode below enables filtering in the WinForms FlexGrid but restricts the filtering to columns of type string

You can also customize the filtering process further by creating filters and assigning them to columns or by retrieving existing filters and modifyingtheir properties For example the code below creates a ConditionFilter in the WinForms FlexGrid configures it to select all items that are equal toGermany and then assigns the new filter to the ShipCountry column

グリッドでのフィルタリングを許可しますc1FlexGrid1AllowFiltering = true 列1に対してフィルタを指定しますc1FlexGrid1Cols[1]AllowFiltering = C1WinC1FlexGridAllowFilteringByCondition

グリッドでのフィルタリングを許可しますc1FlexGrid1AllowFiltering = True

列1に対してフィルタを指定しますc1FlexGrid1Cols(1)AllowFiltering = C1WinC1FlexGridAllowFilteringByCondition

文字列型の列にフィルタリングを制限します foreach (Column c in c1FlexGrid1Cols) cAllowFiltering = cDataType == typeof(string) AllowFilteringDefault AllowFilteringNone

文字列型の列にフィルタリングを制限しますFor Each c As Column In c1FlexGrid1Cols cAllowFiltering = If(cDataType Is GetType(String) AllowFilteringDefault AllowFilteringNone)Next

グリッドでフィルタリングを有効にします c1FlexGrid1AllowFiltering = true 新しいConditionFilterを作成します C1WinC1FlexGridConditionFilter Filter Filter = new C1WinC1FlexGridConditionFilter()

Custom FilteringWhen filtering is applied to FlexGrid it hides the rows that do not qualify the filtering criteria by setting their Visible property to false However insome cases you may want to customize this behavior For such scenarios you can use the BeforeFilter and AfterFilter events fired by FlexGridThe below example customizes the filtering behavior of WinForms FlexGrid by applying a different style to non-qualifying rows instead of hidingthem

Germanyのアイテムを絞り込むためのフィルタを作成します FilterCondition1Operator = C1WinC1FlexGridConditionOperatorEquals FilterCondition1Parameter = Germany 「ShipCountry」列に新しいフィルタを割り当てます c1FlexGrid1Cols[ShipCountry]Filter = Filter フィルタを適用します c1FlexGrid1ApplyFilters()

グリッドでフィルタリングを有効にしますc1FlexGrid1AllowFiltering = True

新しいConditionFilterを作成しますDim Filter As C1WinC1FlexGridConditionFilterFilter = New C1WinC1FlexGridConditionFilter()

Germanyのアイテムを絞り込むためのフィルタを作成しますFilterCondition1[Operator] = C1WinC1FlexGridConditionOperatorEqualsFilterCondition1Parameter = Germany

「ShipCountry」列に新しいフィルタを割り当てますc1FlexGrid1Cols(ShipCountry)Filter = Filter

フィルタを適用しますc1FlexGrid1ApplyFilters()

private void c1FlexGrid1_BeforeFilter(object sender CancelEventArgs e) c1FlexGrid1BeginUpdate()

private void c1FlexGrid1_AfterFilter(object sender EventArgs e) フィルタリングされた行を表示するために使用されるスタイルを取得します var cs = c1FlexGrid1Styles[filteredOut]

すべての行にスタイルを適用します

The above code uses a custom style named filteredout which can be defined as shown in the code below

Remove FilteringUser can remove column filtering at runtime by using Clear option given in the filter UI of each column You can also remove filtering of the wholegrid programmatically by passing the empty string in FilterDefinition property of FlexGrid

Below code demonstrates how to clear all the filters from the WinForms FlexGrid

for (int r = c1FlexGrid1RowsFixed r lt c1FlexGrid1RowsCount r++) var row = c1FlexGrid1Rows[r] if (rowVisible) 通常の行スタイルをリセットします rowStyle = null else フィルタリングされた行見えるようにしスタイルを適用します rowVisible = true rowStyle = cs

更新を再開します c1FlexGrid1EndUpdate()

Private Sub c1FlexGrid1_BeforeFilter(ByVal sender As Object ByVal e As CancelEventArgs) c1FlexGrid1BeginUpdate()End Sub

Private Sub c1FlexGrid1_AfterFilter(ByVal sender As Object ByVal e As EventArgs) フィルタリングされた行を表示するために使用されるスタイルを取得します Dim cs = c1FlexGrid1Styles(filteredOut)

すべての行にスタイルを適用します For r = c1FlexGrid1RowsFixed To c1FlexGrid1RowsCount - 1 Dim row = c1FlexGrid1Rows(r)

If rowVisible Then 通常の行スタイルをリセットします rowStyle = Nothing Else フィルタリングされた行見えるようにしスタイルを適用します rowVisible = True rowStyle = cs End If Next

更新を再開します c1FlexGrid1EndUpdate()End Sub

フィルタによって除外された行のスタイルを作成しますvar cs = c1FlexGrid1StylesAdd(filteredOut)csBackColor = ColorLightGraycsForeColor = ColorDarkGray

フィルタによって除外された行のスタイルを作成しますDim cs = c1FlexGrid1StylesAdd(filteredOut)csBackColor = ColorLightGraycsForeColor = ColorDarkGray

フィルタ定義を空の文字列に設定してフィルタリングを削除しますc1FlexGrid1FilterDefinition = stringEmpty

フィルタ定義を空の文字列に設定してフィルタリングを削除しますc1FlexGrid1FilterDefinition = StringEmpty

フィルタの種類

FlexGrid not only provides built-in filters such as Column filter Value filter and Condition Filter but also lets youcreate your own custom filter The built-in filters are provided through AllowFiltering property of Column class whichlets you set the type of filter to be applied on a particular column On the other hand the custom filters make use ofthe IC1ColumnFilter interface and the IC1ColumnFilterEditor interface This topic discusses the implementation ofbuilt-in and custom filters in detail

Column FilterColumn filter is the default filter that is applied to all the columns automatically when AllowFiltering property of thegrid is set to true The ColumnFilter is a combination of ValueFilter and ConditionFilter (discussed below) and givesuser an option to choose either of them at runtime While working with code you can use its ValueFilterand ConditionFilter properties to access the two types of filters The filter also provides Apply method to apply filterto a value and Reset method to reset the filter and hence making it inactive

Use the below code to apply column filter on ProductName column of the WinForms FlexGrid

列フィルタ（ProductNameが「C」で始まる製品をフィルター処理します）ColumnFilter colFilter = new ColumnFilter()colFilterConditionFilterCondition1Parameter = CcolFilterConditionFilterCondition1Operator = ConditionOperatorBeginsWithc1FlexGrid1Cols[ProductName]Filter = colFilter

列フィルタ（ProductNameが「C」で始まる製品をフィルター処理します） Dim colFilter As ColumnFilter = New ColumnFilter()

Value FilterValue filter refers to the value based filter which gets enabled on setting the AllowFiltering property of column toByValue The ValueFilter provides the dropdown list of all values with checkbox which lets the user select the valueswhich are to be displayed in the output These values can be get or set through the ShowValues property You canalso set a limit on number of values to be displayed in the dropdown list by setting the ValuesLimit property Just likecolumn filter value filter also provides Apply method to apply filter to a value and Reset method to reset the filter

Below code shows how to apply ValueFilter on a column of the WinForms FlexGrid

Condition FilterCondition filter refers to a filter based on one or two logical conditions which can be enabled by setting theAllowFiltering property to ByCondition The ConditionFilter gives user an option to set the conditionsthrough Condition1 and Condition2 properties which can be combined using ANDOR operator by settingthe AndConditions property to filter the records Similar to other filters this class also provides Apply and Resetmethod

colFilterConditionFilterCondition1Parameter = C colFilterConditionFilterCondition1[Operator] = ConditionOperatorBeginsWith c1FlexGrid1Cols(ProductName)Filter = colFilter

値フィルタ（CategoryIdが12358である製品をフィルタ処理します）ValueFilter valueFilter = new ValueFilter()valueFilterShowValues = new object[] 1 2 3 5 8 c1FlexGrid1Cols[CategoryId]Filter = valueFilter

値フィルタ（CategoryIdが12358である製品をフィルタ処理します） Dim valueFilter As ValueFilter = New ValueFilter() valueFilterShowValues = New Object() 1 2 3 5 8 c1FlexGrid1Cols(CategoryId)Filter = valueFilter

Below code demonstrates how to apply a ConditionFilter on a WinForms FlexGrid column

Custom FilterThe abovementioned filters provide you enough flexibility to implement most common filtering scenarios efficientlyIn addition custom filter option also lets you create your own filter to meet any other specialized requirements ofyour application To create a custom filter you need to create a filter class that implements the IC1ColumnFilterinterface and an editor class that implements the IC1ColumnFilterEditor interface Below example shows theimplementation of a custom string filter which lets you filter based on ranges

条件フィルタ（UnitPricegt = 50およびlt= 100の製品をフィルタ処理します）ConditionFilter conditionFilter = new ConditionFilter()conditionFilterCondition1Parameter = 50conditionFilterCondition1Operator = ConditionOperatorGreaterThanOrEqualToconditionFilterCondition2Parameter = 100conditionFilterCondition2Operator = ConditionOperatorLessThanOrEqualToconditionFilterAndConditions = truec1FlexGrid1Cols[UnitPrice]Filter = conditionFilter

条件フィルタ（UnitPricegt = 50およびlt= 100の製品をフィルタ処理します） Dim conditionFilter As ConditionFilter = New ConditionFilter() conditionFilterCondition1Parameter = 50 conditionFilterCondition1[Operator] = ConditionOperatorGreaterThanOrEqualTo conditionFilterCondition2Parameter = 100 conditionFilterCondition2[Operator] = ConditionOperatorLessThanOrEqualTo conditionFilterAndConditions = True c1FlexGrid1Cols(UnitPrice)Filter = conditionFilter

Following is the code of a custom filter created for the WinForms FlexGrid Note that the class implementsIC1CustomFilter interface

StringFiltercs

class StringFilter C1WinC1FlexGridIC1ColumnFilter

ListltPointgt _ranges = new ListltPointgt()

ltsummarygt このフィッタが受け入れる文字列を定義するポイントのリストを取得します ltsummarygt public ListltPointgt Ranges get return _ranges

範囲リストが空でない場合フィルタはアクティブです public bool IsActive get return _rangesCount gt 0

フィルタをリセットします public void Reset() _rangesClear()

指定された日付にフィルタを適用します public bool Apply(object value) if (value = null)

var s = valueToString() if (sLength gt 0) int c = charToUpperInvariant(s[0]) foreach (var cr in _ranges) if (c gt= charToUpperInvariant((char)crX) ampamp c lt= charToUpperInvariant((char)crY)) return true return false

このフィルタのエディタコントロールを返します public C1WinC1FlexGridIC1ColumnFilterEditor GetEditor() return new StringFilterEditor()

Friend Class StringFilter Implements C1WinC1FlexGridIC1ColumnFilter Private _ranges As List(Of Point) = New List(Of Point)()

ltsummarygt このフィッタが受け入れる文字列を定義するポイントのリストを取得します ltsummarygt Public ReadOnly Property Ranges As List(Of Point) Get Return _ranges End Get End Property

範囲リストが空でない場合フィルタはアクティブです Public ReadOnly Property IsActive As Boolean Implements C1WinC1FlexGridIC1ColumnFilterIsActive Get Return _rangesCount gt 0 End Get End Property

フィルタをリセットします Public Sub Reset() Implements C1WinC1FlexGridIC1ColumnFilterReset _rangesClear() End Sub

指定された日付にフィルタを適用します Public Function Apply(ByVal value As Object) As Boolean Implements C1WinC1FlexGridIC1ColumnFilterApply If value IsNot Nothing Then Dim s = valueToString()

If sLength gt 0 Then Dim c As Integer = AscW(CharToUpperInvariant(s(0)))

Following is the code of a custom class that implements IC1CustomFilterEditor interface

StringFilterEditorcs

For Each cr In _ranges

If c gt= AscW(CharToUpperInvariant(MicrosoftVisualBasicChrW(crX))) AndAlso c lt= AscW(CharToUpperInvariant(MicrosoftVisualBasicChrW(crY))) Then Return True End If Next End If End If

Return False End Function

このフィルタのエディタコントロールを返します Public Function GetEditor() As C1WinC1FlexGridIC1ColumnFilterEditor Implements C1WinC1FlexGridIC1ColumnFilterGetEditor Return New StringFilterEditor() End Function

End Class

public partial class StringFilterEditor UserControl C1WinC1FlexGridIC1ColumnFilterEditor StringFilter _filter

public StringFilterEditor() InitializeComponent()

public void Initialize(C1WinC1FlexGridC1FlexGridBase grid int columnIndex C1WinC1FlexGridIC1ColumnFilter filter) _filter = (StringFilter)filter

チェックボックスの値を初期化します foreach (var pt in _filterRanges) switch ((char)ptX) case A _chkAEChecked = true break case F _chkFJChecked = true break case K _chkKOChecked = true break case P _chkPTChecked = true

break case U _chkUZChecked = true break public void ApplyChanges() フィルタをリセットします _filterRangesClear()

選択した範囲を追加します foreach (Control ctl in thisControls) var cb = ctl as CheckBox if (cb = null ampamp cbChecked) var pt = new Point((int)cbText[0] (int)cbText[cbTextLength - 1]) _filterRangesAdd(pt) public bool KeepFormOpen get return false void _chkAE_CheckedChanged(object sender EventArgs e) var cb = sender as CheckBox cbFont = new Font(Font cbChecked FontStyleBold FontStyleRegular)

Public Partial Class StringFilterEditor Inherits UserControl Implements C1WinC1FlexGridIC1ColumnFilterEditor

Private _filter As StringFilter Public Sub New() InitializeComponent() End Sub

Public Sub Initialize(ByVal grid As C1WinC1FlexGridC1FlexGridBase ByVal columnIndex As Integer ByVal filter As C1WinC1FlexGridIC1ColumnFilter) Implements C1WinC1FlexGridIC1ColumnFilterEditorInitialize _filter = CType(filter StringFilter)

チェックボックスの値を初期化します For Each pt In _filterRanges

Select Case MicrosoftVisualBasicChrW(ptX) Case Ac _chkAEChecked = True Case Fc _chkFJChecked = True Case Kc _chkKOChecked = True Case Pc

_chkPTChecked = True Case Uc _chkUZChecked = True End Select Next End Sub

Public Sub ApplyChanges() Implements C1WinC1FlexGridIC1ColumnFilterEditorApplyChanges フィルタをリセットします _filterRangesClear()

選択した範囲を追加します For Each ctl As Control In Controls Dim cb = TryCast(ctl CheckBox)

If cb IsNot Nothing AndAlso cbChecked Then Dim pt = New Point(MicrosoftVisualBasicAscW(cbText(0)) MicrosoftVisualBasicAscW(cbText(cbTextLength - 1))) _filterRangesAdd(pt) End If Next End Sub

Public ReadOnly Property KeepFormOpen As Boolean Implements C1WinC1FlexGridIC1ColumnFilterEditorKeepFormOpen Get Return False End Get End Property

Private Sub _chkAE_CheckedChanged(ByVal sender As Object ByVal e As EventArgs) Dim cb = TryCast(sender CheckBox) cbFont = New Font(MyBaseFont If(cbChecked FontStyleBold FontStyleRegular)) End Sub

End Class

フィルタUI

FlexGrid provides several options to flexibly customize the filtering UI and lets you create your own unique filter for yourapplication The control allows you to show hide and customize the filtering icon You can even change the language displaying infilter to meet your localization requirements

Show Filter Icon

FlexGrid by default shows the filtering icon( ) when mouse hovers over the filterable column header However you can chooseto display the filtering icon always by setting ShowFilterIcon property of the C1FlexGrid class to Always The property accepts thevalues from FilterIconVisibility enumeration

Use the code below to always display the filter icon on filtered columns of the WinForms FlexGrid

Use Custom IconsFlexGrid also lets you customize the filtering icon by using Glyphs property of the C1FlexGrid class which accepts an imagethrough GlyphEnum enumeration You can also change icon displayed on the current filtered column using the same enumerationFor more information about custom glyphs see Custom Glyphs

常にフィルタのアイコンを表示しますc1FlexGrid1ShowFilterIcon = C1WinC1FlexGridFilterIconVisibilityAlways

Following code displays how to apply custom icons on filtered columns of the WinForms FlexGrid

Change Filter LanguageBy default FlexGrid localizes the column filter editor to use language specified by the CurrentUICulture setting However you canuse the Language property to override the default and specify the language to be used when grid displays the column filter editor

Use the below code to change the display language of filter in the WinForms FlexGrid

フィルタのアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs[GlyphEnumFilterEditor] = ImageFromFile(custom-filter-iconpng)

フィルタアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs[GlyphEnumFilteredColumn] = ImageFromFile(filterico)

フィルタのアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs(GlyphEnumFilterEditor) = ImageFromFile(custom-filter-iconpng)

フィルタアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs(GlyphEnumFilteredColumn) = ImageFromFile(filterico)

フィルタ言語を日本語に設定しますc1FlexGrid1Language = C1UtilLocalizationLanguageJapanese

検索

With FlexGrid you can easily perform search either on the entire grid or just a specific column This topic discusseshow you can enable search in FlexGrid

Search in Entire GridTo search the entire FlexGrid you need to add the C1FlexGridSearchPanel control to the form and associate it with thegrid to be searched using SetC1FlexGridSearchPanel method The C1FlexGridSearchPanel control highlights thesearch results and filters the records having search results automatically However you can choose not to highlight theresults by setting the HighlightSearchResults to false It also provides a SearchMode property to set whether tostart the search automatically or on hitting the Search button or Enter key You can also set the watermark in searchbox as well as a time delay in search

Use the code below to search the entire WinForms FlexGrid using SearchPanel

検索パネルを検索対象のFlexGridに関連付けますc1FlexGridSearchPanel1SetC1FlexGridSearchPanel(c1FlexGrid1 c1FlexGridSearchPanel1)

検索を構成しますc1FlexGridSearchPanel1HighlightSearchResults = truec1FlexGridSearchPanel1SearchMode = C1WinC1FlexGridSearchModeAlways c1FlexGridSearchPanel1Watermark = Search productsc1FlexGridSearchPanel1SearchDelay = 2

検索パネルを検索対象のFlexGridに関連付けます

Search in ColumnTo enable column-wise search FlexGrid provides AutoSearch property of the C1FlexGrid class which accepts valuesfrom AutoSearchEnum enumeration The enumeration lets you start downward column search from the first scrollablerow or from the current cursor position To search a value in a particular column you need to keep the cursor in thatcolumn and type the value to be searched and grid automatically jumps to the search result in that column You canalso set delay in search by setting the AutoSearchDelay property

Following code enables column-wise search in the WinForms FlexGrid

c1FlexGridSearchPanel1SetC1FlexGridSearchPanel(c1FlexGrid1 c1FlexGridSearchPanel1)

検索を構成しますc1FlexGridSearchPanel1HighlightSearchResults = Truec1FlexGridSearchPanel1SearchMode = C1WinC1FlexGridSearchModeAlwaysc1FlexGridSearchPanel1Watermark = Search productsc1FlexGridSearchPanel1SearchDelay = 2

一番上の行からの列単位の検索を有効にしますc1FlexGrid1AutoSearch = C1WinC1FlexGridAutoSearchEnumFromTopc1FlexGrid1AutoSearchDelay = 2

マージ

FlexGrid allows you to merge cells with same values making them span multiple rows or columns This capability is useful for enhancing appearance andclarity of data displayed in the grid The effect of these settings is similar to the HTML ltROWSPANgt and ltCOLSPANgt tags

Cell merging has several possible uses For example you can use it to create merged table headers merged data views or grids where the text spills intoadjacent columns This section discusses these scenarios in the topics below

Auto-merge Discusses about how to enable automatic merging in grid

Free auto-mergeRestricted auto-mergeMerge table headers

Handle Spilling Text Discusses how to display long texts in normal and node rows

Handle Spill in Normal CellsHandle Text in Node Rows

Custom Merge Discusses about ways to customize the default merging behavior

Method 1 Use IComparer interfaceMethod 2 Override the GetMergedRange method

自動マージ

FlexGrid lets you enable automatic cell merging in the grid by setting the AllowMerging property to a value other than None Inaddition you need to set the AllowMerging property of each target row or column to true Merging occurs only if adjacent cellscontain the same non-empty string There is no method to force a pair of cells to merge The merging is done automaticallybased on the cell contents This feature makes it easy to provide merged views of sorted data where values in adjacent rowspresent repeated data

Free Auto-mergeFree auto-merge refers to merging of cells with just one pre-condition of having same values in adjacent cells To automaticallymerge the cells in a row or a column you simply need to set AllowMerging property of the C1FlexGrid class to Free and setAllowMerging property of the target row or column object to true

Below code shows how to apply free merging on a WinForms FlexGrid column

Restricted Auto-mergeIn most of the scenarios you would want the grid to merge the grid cells with same values only if cells above or in left directionare also merged This behavior is called restricted auto-merge and can be achieved by setting the C1FlexGridAllowMergingproperty to RestrictAll RestrictRows or RestrictCols This is required in addition to setting the AllowMerging property oftarget row or column to true

Use the code below to allow restricted auto-merging on a WinForms FlexGrid column

Merge Table HeadersMerging the header cells specially in case of multi-row header is another very common scenario used in grids and tables Tomerge the header cells you must set the C1FlexGridAllowMerging property to FixedOnly You must also set theAllowMerging property of designated row and columns to true In this case headers cells with same value merge together togive a simplified appearance

許可される結合の種類を指定しますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumFree 結合を許可する列を指定しますc1FlexGrid1Cols[2]AllowMerging = true

許可される結合の種類を指定しますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumFree

結合を許可する列を指定しますc1FlexGrid1Cols(2)AllowMerging = True

結合を許可する列を指定しますc1FlexGrid1Cols[3]AllowMerging = true 左側のセルが結合されている場合にのみ列を結合しますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumRestrictCols

左側のセルが結合されている場合にのみ列を結合しますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumRestrictCols

Following code demonstrates how to apply merging only on table headers of the WinForms FlexGrid

Custom Auto-mergeFlexGrid also provides a Custom option through AllowMerging enumeration In this case auto-merge is performed on cellrange collection provided using MergedRanges property of the C1FlexGrid class The custom auto-merge is performedindependent of cell content For instance below image shows the merging of two specified cell ranges despite of the differentcell values

固定の行と列の結合を許可しますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumFixedOnly

Use the following code snippet to apply custom merge on the WinForms FlexGrid

結合のモードをアクティブにしますthisc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumCustom

いくつかのマージされた範囲を定義します 2つのセルは幅が広く1つのセルは高いですthisc1FlexGrid1MergedRangesAdd(2 2 2 3)

3つのセルは幅が広く3つのセルは高さですthisc1FlexGrid1MergedRangesAdd(5 2 7 4)

結合のモードをアクティブにしますMec1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumCustom

いくつかのマージされた範囲を定義します 2つのセルは幅が広く1つのセルは高いですMec1FlexGrid1MergedRangesAdd(2 2 2 3)

3つのセルは幅が広く3つのセルは高さですMec1FlexGrid1MergedRangesAdd(5 2 7 4)

はみ出して表示されるセルの処理

In FlexGrid you can create the same behavior as excel for handling long text entries by spilling them into emptyadjacent cells This behavior not only helps you in handling long text entries of usual cells but also in displayingoutline nodes which are different from data rows This topic discusses these two scenarios in the following sectionsThese settings work on the grid level and does not need you to set AllowMerging property of specific row or column

Handle Spill in Normal CellsThis FlexGrid setting causes text that is too long to fit in a cell to spill into empty adjacent cells If you have a longentry in a cell and the adjacent cell is empty the entry spills onto the adjacent cells to occupy as much room as

needed This behavior can be achieved by setting the AllowMerging property to Spill For instance in the imagebelow long data strings from TestGroup column cells spill to the empty Flag column cells giving a better visibility ofdata while using the available space on the grid

Following code enables spilling of long text to adjacent empty cell in the WinForms FlexGrid

Handle Text in Node RowsThe Nodes setting is similar to Spill but only applies to outline nodes This setting is useful when data is organizedinto groups and the node rows contain information in a format different from the data rows For this you must setthe C1FlexGridAllowMerging property to Nodes

長いテキストを隣接する空のセルにこぼしますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumSpill

Following code shows how to handle long text in node rows of the WinForms FlexGrid

ノード行の長いテキストを隣接する空のセルにスピルします c1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumNodes

ノード行の長いテキストを隣接する空のセルにスピルしますc1FlexGrid1AllowMerging = C1WinC1FlexGridAllowMergingEnumNodes

カスタムのマージ

FlexGrid by default gives you enough options to merge in most common scenarios using AllowMerging propertyHowever there may be instances where you want to customize the merging options to get more out of your grid Youcan customize the default merging behavior in two ways

Method 1 Use IComparer InterfaceBy default the grid merges adjacent cells containing same non-null value In default scenario string comparisons arecase-sensitive and blanks are included However you can also merge cells using a case-insensitive comparison andtrimming blanks by writing a custom class that implements IComparer interface and assign it to CustomComparerproperty of the C1FlexGrid class

Method 2 Override the GetMergedRange MethodAnother way is to create a new class that derives from the C1FlexGrid class and overrides the GetMergedRangeand GetData methods to provide your own custom merging logic It merges the cells based on contextual

understanding of data in FlexGrid which is implemented through the overridden methods in the sample The belowexample demonstrates custom merging in timetable of each lecturer using the WinForms FlexGrid

public override CellRange GetMergedRange(int row int col bool clip) 結合のロジックで使用するID列のインデックスを保存します _colIndex = ColsIndexOf(LecturerID)

結合する時にカスタムデータを使用するようにフラグを設定します _doingMerge = true

基本クラスの結合のロジックを呼び出します（GetDataメソッドを使用してデータを取得します） CellRange cellRange = baseGetMergedRange(row col clip)

GetDataが通常どおりに動作するようにフラグをリセットします _doingMerge = false

結合された範囲を返します return cellRange

public override Object GetData(int row int col) 結合範囲を決定するためのデータを取得します ID列のコンテンツを追加して異なるIDの行のセルがマージされないようにします if (_doingMerge ampamp _colIndex gt -1 ampamp col = _colIndex) SystemDiagnosticsDebugWriteLine($rowcol) return baseGetDataDisplay(row col) + baseGetDataDisplay(row _colIndex)

For detailed implementation of more scenarios of custom merging see the product Projects named CustomMergeCustomMerge2 CustomMerge3 CustomMerge4

Note The abovementioned product samples are located at DocumentsComponentOneSamplesWinFormsvxxxC1FlexGridCS on your system if you have installed the samples while installingWinForms Edition using ComponentOneControlPanelexe

表示測定編集などするデータを取得します基本クラスに通常どおり処理させます return baseGetData(row col)

Public Overrides Function GetMergedRange(ByVal row As Integer ByVal col As Integer ByVal clip As Boolean) As CellRange 結合のロジックで使用するID列のインデックスを保存します _colIndex = ColsIndexOf(LecturerID)

結合する時にカスタムデータを使用するようにフラグを設定します _doingMerge = True

基本クラスの結合のロジックを呼び出します（GetDataメソッドを使用してデータを取得します） Dim cellRange As CellRange = MyBaseGetMergedRange(row col clip)

GetDataが通常どおりに動作するようにフラグをリセットします _doingMerge = False

結合された範囲を返します Return cellRangeEnd Function

Public Overrides Function GetData(ByVal row As Integer ByVal col As Integer) As Object 結合範囲を決定するためのデータを取得します ID列のコンテンツを追加して異なるIDの行のセルがマージされないようにします If _doingMerge AndAlso _colIndex gt -1 AndAlso col ltgt _colIndex Then DebugWriteLine($rowcol) Return MyBaseGetDataDisplay(row col) + MyBaseGetDataDisplay(row _colIndex) End If

表示測定編集などするデータを取得します基本クラスに通常どおり処理させます Return MyBaseGetData(row col)End Function

グループ

Grouping refers to organizing the grid data into a hierarchical structure where rows with common column value aredisplayed as a group The feature also lets you expand or collapse the groups to facilitate easier analysis of grid data

In FlexGrid grouping can be achieved through code as well as through user interaction via column context menuand FlexGridGroupPanel control This topic discusses these ways and additional operations related to grouping

Grouping through CodeFlexGrid provides GroupDescriptions property to describe how data source items are grouped in the grid Thisproperty accepts the instance of any collection which implements IList interface (eg List) as its value The items of thecollection describe grouping using a property name as the criterion

Following code shows how to apply grouping in the WinForms FlexGrid through code

Grouping through Group Panel

CustomerIDでデータをグループ化しますc1FlexGrid1GroupDescriptions = new ListltGroupDescriptiongt() new GroupDescription(CustomerID)

CustomerIDでデータをグループ化しますc1FlexGrid1GroupDescriptions = New List(Of GroupDescription)() From New GroupDescription(CustomerID)

FlexGrid also lets you create groups at runtime using an extension control named C1FlexGridGroupPanel which isprovided by the C1WinC1FlexGridGroupPanel assembly

To achieve grouping in FlexGrid at runtime add the C1FlexGridGroupPanel control to the form and bind it with thegrid to be bound using FlexGrid property of the C1FlexGridGroupPanel class Once a grid is bound to the grouppanel control you can drag and drop the columns to panel in order to group the grid by that column To create anested hierarchy of dragged columns you can drag multiple columns in the desired order You can also set themaximum number of groups allowed within FlexGrid using MaxGroups property of the C1FlexGridGroupPanel classBy default all the created groups appear in the expanded state To change this setting and display the groups incollapsed state by default you can set the AutoExpandAllGroups property to false The group panel control alsoprovides the Text property to display a string when no columns are dropped on the panel

Use the code below to apply grouping in WinForms FlexGrid through the FlexGridGroupPanel control

C1FlexGridGroupPanel c1FlexGridGroupPanel = new C1FlexGridGroupPanel()c1FlexGridGroupPanelBounds = new SystemDrawingRectangle(00 650 150)thisControlsAdd(c1FlexGridGroupPanel) C1FlexGridGroupPanelの一般プロパティを設定しますc1FlexGridGroupPanelFlexGrid = c1FlexGrid1c1FlexGridGroupPanelText = Drag the columns herec1FlexGridGroupPanelMaxGroups = 5c1FlexGridGroupPanelAutoExpandAllGroups = true

Dim c1FlexGridGroupPanel As C1FlexGridGroupPanel = New C1FlexGridGroupPanel() c1FlexGridGroupPanelBounds = New DrawingRectangle(0 0 650 150) MeControlsAdd(c1FlexGridGroupPanel)

Grouping through Context MenuFlexGrid provides support for column context menu at run-time to facilitate quick actions related to columnoperations One of these context menu options is Group By This Column You can use this context menu option togroup the grid data by any of the columns at run-time Once grouping is applied you also get the Ungroup option toremove grouping To enable the column context menu you need to set ColumnContextMenuEnabled propertyprovided by the C1FlexGrid class to true By default this property is set to false

Grouping and MoreApart from the default features grouping in FlexGrid comes with many other options to give you ample flexibility tomeet your requirements

Use the SubtotalPosition property to change the position of group row which gets displayed above the groupby defaultSet the HideGroupedColumns property to true to hide the columns by which grid is groupedChange the format of group header by using the GroupHeaderFormat property By default the group row

C1FlexGridGroupPanelの一般プロパティを設定します c1FlexGridGroupPanelFlexGrid = c1FlexGrid1 c1FlexGridGroupPanelText = Drag the columns here c1FlexGridGroupPanelMaxGroups = 5 c1FlexGridGroupPanelAutoExpandAllGroups = True

displays a string of namevalue formatSet the C1FlexGridAllowMerging property to AllowMergingEnumNodes to spill the long group headercontent into the adjacent empty cells For more information see Handle Text in Node RowsDisplay aggregate value of columns in group header by using Aggregate property of the Column classUse AllowSorting property to sort the groups based on their valuesUse the GridTreeStyle property to customize the appearance of outline tree that shows the grouping inFlexGrid For more information see Style the Tree Grid

集計

Summarizing data is one of the most important features of the grid where you can easily group the similar data andcalculate various types of aggregates such as Sum Average Count Max Min and more

In FlexGrid you can easily summarize data by using SubTotal method of the C1FlexGrid class It adds subtotal rows thatcontain aggregate data for the regular (non-subtotal) rows and also supports the hierarchical aggregates The method hasvarious overloads which gives you enough flexibility to deal with multiple summarizing related scenarios All theseoverloads have one parameter in common that is AggregateEnum which lets you set the type of aggregate you want toimplement Other parameters in various overloads let you set the outline level start and end column and column thatcontains values to be aggregated

Create SubtotalsBelow example demonstrates the use of SubTotal method in the WinForms FlexGrid for calculation of average aggregatebased on Score column

Style SubtotalsWhen the Subtotal method adds the rows with the aggregate information it automatically assigns in-built subtotal styles

グリッドに存在する既存の小計をすべてクリアしますc1FlexGrid1Subtotal(AggregateEnumClear) レベル1グループ「Course」列集計（平均）ScoreAttendanceでグリッドに小計を追加しますc1FlexGrid1Subtotal(AggregateEnumAverage 1 3 3 4 Average for 0)

グリッドに存在する既存の小計をすべてクリアしますc1FlexGrid1Subtotal(AggregateEnumClear)

レベル1グループ「Course」列集計（平均）ScoreAttendanceでグリッドに小計を追加しますc1FlexGrid1Subtotal(AggregateEnumAverage 1 3 3 4 Average for 0)

to the new rows You can customize the appearance of the subtotal rows by changing the properties of the outline stylesin the designer with the Style Editor or using the code Below example demonstrates styling of subtotals at three levels inthe WinForms FlexGrid

Customize SubtotalsFlexGrid in addition to built-in aggregate options lets you create custom expressions in bound mode and use them assubtotals in groups along with aggregates You can specify the custom expressions for a column using GroupExpressionproperty of the Column class Below example demonstrates how to create a custom expression as a subtotal for Qualifiedcolumn of the WinForms FlexGrid

小計をレベル0でスタイル設定しますCellStyle s = c1FlexGrid1Styles[CellStyleEnumSubtotal0]sBackColor = ColorBlacksForeColor = ColorWhitesFont = new Font(c1FlexGrid1Font FontStyleBold) 小計をレベル1でスタイル設定しますs = c1FlexGrid1Styles[CellStyleEnumSubtotal1]sBackColor = ColorDarkBluesForeColor = ColorWhite

小計をレベル2でスタイル設定しますs = c1FlexGrid1Styles[CellStyleEnumSubtotal2]sBackColor = ColorDarkRedsForeColor = ColorWhitec1FlexGrid1AutoSizeCols()

Dim s As CellStyle = c1FlexGrid1Styles(CellStyleEnumSubtotal0) sBackColor = ColorBlack sForeColor = ColorWhite sFont = New Font(c1FlexGrid1Font FontStyleBold)

s = c1FlexGrid1Styles(CellStyleEnumSubtotal1) sBackColor = ColorDarkBlue sForeColor = ColorWhite

s = c1FlexGrid1Styles(CellStyleEnumSubtotal2) sBackColor = ColorDarkRed sForeColor = ColorWhite c1FlexGrid1AutoSizeCols()

public void CustomizeSubTotal(C1FlexGrid c1FlexGrid1) ListltGroupDescriptiongt grps = new ListltGroupDescriptiongt() 列「Course」のグループを作成します GroupDescription grp = new GroupDescription(Course ListSortDirectionDescending true) grpsAdd(grp) 上記のグループに従ってFlexGridをグループ化します c1FlexGrid1GroupDescriptions = grps カスタムの計算式を使用してFlexGridに新しい列を追加します var column = c1FlexGrid1ColsAdd() columnName = Qualified columnDataType = typeof(object) columnCaption = Qualified(gt5000) columnAllowEditing = false columnExpression = [Attendance] [Score] GroupExpression の実装 c1FlexGrid1Cols[Score]GroupExpression = =Average([Score]) c1FlexGrid1Cols[Attendance]GroupExpression = =Average([Attendance]) c1FlexGrid1Cols[Qualified]GroupExpression = =iif(Average([Score][Attendance])lt5000falsetrue) c1FlexGrid1AutoSizeCols()

Public Sub CustomizeSubTotal(ByVal c1FlexGrid1 As C1FlexGrid) Dim grps As List(Of GroupDescription) = New List(Of GroupDescription)() 列「Course」のグループを作成します Dim grp As GroupDescription = New GroupDescription(Course ListSortDirectionDescending True) grpsAdd(grp)

上記のグループに従ってFlexGridをグループ化します c1FlexGrid1GroupDescriptions = grps

カスタムの計算式を使用してFlexGridに新しい列を追加します Dim column = c1FlexGrid1ColsAdd()

columnName = Qualified columnDataType = GetType(Object) columnCaption = Qualified(gt5000) columnAllowEditing = False columnExpression = [Attendance] [Score]

GroupExpression の実装 c1FlexGrid1Cols(Score)GroupExpression = =Average([Score]) c1FlexGrid1Cols(Attendance)GroupExpression = =Average([Attendance]) c1FlexGrid1Cols(Qualified)GroupExpression = =iif(Average([Score][Attendance])lt5000falsetrue) c1FlexGrid1AutoSizeCols()End Sub

ツリーグリッド

OverviewOne of the unique and popular features of the FlexGrid control is the ability to add hierarchical grouping to regulardata grid and display it in a tree like structure called Tree Grid The Tree Grid control is very similar to the one you seein a TreeView control It shows an indented structure with collapse or expand icon next to each node row so the usercan expand and collapse the outline to see the desired level of detail by clicking on the nodes

Although you can create simple outline trees using FlexGrid grouping Tree Grid helps you implement more advanceduse cases such as displaying customer and order details In a usual grid showing such data it is difficult to see thedetails of each customer and order In such case you can create a Tree Grid to group the data in a hierarchicalstructure for better view and accessibility of information

Quick BindingLoading data in a Tree Grid is exactly the same as loading in a regular grid If the data source is available at designtime you can use the Visual Studio Property Window to set the grids DataSource property of the C1FlexGrid class andbind the grid to the data without writing even a single line of code For detailed steps see Bound Mode

You can also set the DataSource property through code Following code shows how to use the DataSource propertyto populate data in the WinForms Tree Grid

private void Bound_Node_Load(object sender EventArgs e) FlexGridを連結します BindGrid(_gridBound)

public void BindGrid(C1FlexGrid grid) DataTable _dt = new DataTable() データを取得します var fields = Country City SalesPerson Quantity ExtendedPrice var sql = stringFormat(SELECT 0 FROM Invoices ORDER BY 0 fields)

The code uses an OleDbDataAdapter to fill a DataTable with data then assigns datatable to DataSource property ofthe grid To turn this regular grid in a Tree grid you need to insert the node rows which is discussed in the sectionbelow

Create Nodes (Bound and Unbound Mode)To create a Tree Grid FlexGrid introduces a concept of Node rows These rows do not contain regular data and aresimply header rows under which similar data is grouped just like nodes in a usual TreeView control You can alsodefine the hierarchy of these nodes by setting the Level property These nodes can be collapsed and expanded to hideor show the data they contain The Tree Grid can be displayed in any column defined by the GridTreeColumnproperty By default this property is set to -1 which causes the tree not to be displayed at all

Bound Mode (Using InsertNode Method)

You can create node rows using InsertNode method of the RowCollection class which inserts a new node row at a

var da = new OleDbDataAdapter(sql GetConnectionString()) daFill(_dt) グリッドにデータを連結します gridDataSource = _dt ExtendedPrice 列を書式設定します gridCols[ExtendedPrice]Format = n2

Private Sub Bound_Node_Load(ByVal sender As Object ByVal e As EventArgs) FlexGridを連結します BindGrid(_gridBound) End Sub

Public Sub BindGrid(ByVal grid As C1FlexGrid) Dim _dt As DataTable = New DataTable() データを取得します Dim fields = Country City SalesPerson Quantity ExtendedPrice Dim sql = StringFormat(SELECT 0 FROM Invoices ORDER BY 0 fields) Dim da = New OleDbDataAdapter(sql GetConnectionString()) daFill(_dt) グリッドにデータを連結します gridDataSource = _dt ExtendedPrice 列を書式設定します gridCols(ExtendedPrice)Format = n2 End Sub

Private Shared Function GetConnectionString() As String Dim path As String = EnvironmentGetFolderPath(EnvironmentSpecialFolderPersonal) amp ComponentOne SamplesCommon Dim conn As String = provider=microsoftjetoledb40data source=0c1nwindmdb Return StringFormat(conn path) End Function

specified index This is the low-level way of inserting totals and building outlines

The GroupBy method used here inserts node rows by grouping identical values To obtain a Node object you caneither use return value of the InsertNode method or retrieve the node for an existing row using the IsNode property

Use the following code to create nodes using InsertNode method in the bound WinForms Tree Grid

private void Bound_Node_Load(object sender EventArgs e) FlexGridを取得します BindGrid(_gridBound) 連結されたFlexGridにツリーを表示します CreateTree(_gridBound) GroupBy(_gridBound Country 0) GroupBy(_gridBound City 1) public void CreateTree(C1FlexGrid grid) gridTreeColumn = 0 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridTreeShow(1)

void GroupBy(C1FlexGrid grid string columnName int level) レベル0でグループのスタイル設定します CellStyle s0 = gridStylesAdd(Group0) s0BackColor = ColorGray s0ForeColor = ColorWhite s0Font = new Font(gridFont FontStyleBold) レベル1でグループのスタイル設定します CellStyle s1 = gridStylesAdd(Group1) s1BackColor = ColorLightGray s1ForeColor = ColorBlack object current = null for (int r = gridRowsFixed r lt gridRowsCount r++)

if (gridRows[r]IsNode) var value = grid[r columnName] if (objectEquals(value current)) 値が変更されましたノードを挿入します gridRowsInsertNode(r level) if (level == 0) gridRows[r]Style = s0 else if (level == 1) gridRows[r]Style = s1 最初のスクロール可能な列にグループ名を表示します grid[r gridColsFixed] = value 現在の値を更新します current = value gridAutoSizeCols()

Private Sub Bound_Node_Load(ByVal sender As Object ByVal e As EventArgs) FlexGridを取得します BindGrid(_gridBound) 連結されたFlexGridにツリーを表示します CreateTree(_gridBound) GroupBy(_gridBound Country 0) GroupBy(_gridBound City 1)End Sub

Public Sub CreateTree(ByVal grid As C1FlexGrid) gridTreeColumn = 0 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridTreeShow(1)End Sub

Private Sub GroupBy(ByVal grid As C1FlexGrid ByVal columnName As String ByVal level As Integer) レベル0でグループのスタイル設定します Dim s0 As CellStyle = gridStylesAdd(Group0) s0BackColor = ColorGray s0ForeColor = ColorWhite s0Font = New Font(gridFont FontStyleBold) レベル1でグループのスタイル設定します Dim s1 As CellStyle = gridStylesAdd(Group1) s1BackColor = ColorLightGray s1ForeColor = ColorBlack Dim current As Object = Nothing Dim r As Integer = gridRowsFixed

While r And lt gridRowsCount End While

r += 1

If True Then

If Not gridRows(r)IsNode Then Dim value = grid(r columnName)

The code also calls the AutoSizeCols method to ensure that the column is wide enough to accommodate the TreeGrid Finally it calls the GridTreeShow method to display the nodes

Also the Node class provides following methods and properties based on TreeView object model which can be usedto manage the Tree Grid

Checked Gets or sets the check state of cell defined by NodeRow and GridTreeColumnCollapsedExpanded Gets or sets collapsed or expanded state of the nodeData Gets or sets value in the cell defined by NodeRow and GridTreeColumnImage Gets or sets image in the cell defined by NodeRow and GridTreeColumnLevel Gets or sets node level in the Tree Grid

You can also explore the outline structure using the following properties and methods

Children Gets number of child nodes under this nodeGetCellRange Gets the CellRange object that described range of rows that belong to this nodeGetNode Gets the node that has a given relationship to this node (parent first child next sibling and so on)Nodes Gets a node array containing child nodes of this node

Bound Mode (Using Subtotal Method)

In bound mode another way to create nodes is using the Subtotal method To make the Tree Grid really useful thenode rows must include summary information for the data they contain

If you create Tree Grid using the Subtotal method the subtotals are added automatically The method scans theentire grid and automatically inserts node rows with optional subtotals at locations where the grid data changes

This is the high-level way of inserting totals and building outlines

If Not ObjectEquals(value current) Then 値が変更されましたノードを挿入します gridRowsInsertNode(r level)

If level = 0 Then gridRows(r)Style = s0 ElseIf level = 1 Then gridRows(r)Style = s1 End If

最初のスクロール可能な列にグループ名を表示します grid(r gridColsFixed) = value 現在の値を更新します current = value End If End IfEnd If gridAutoSizeCols()End Sub

The first parameter of the Subtotal method is AggregateEnum enumeration which calculates various types ofaggregates like Sum Average Count Max Min and others In the code below Subtotal method of the C1FlexGridclass is used for creating nodes in a bound WinForms Tree Grid

private void SubtotalNode_Bound_Load(object sender EventArgs e) FlexGridを取得します BindGrid(_gridBound) shows Tree in Bound FlexGrid CreateTree(_gridBound) 連結されたFlexGridに小計を作成します CreateSubTotal(_gridBound)public void BindGrid(C1FlexGrid grid) DataTable dt = new DataTable() dtColumnsAdd(ID typeof(int)) dtColumnsAdd(Name typeof(string)) dtColumnsAdd(Course typeof(string)) dtColumnsAdd(Score typeof(int)) dtColumnsAdd(Attendance typeof(int)) dtColumnsAdd(Country typeof(string)) サンプルデータ dtRowsAdd(1 Helen Bennett ComputerScience 79 84 Spain) dtRowsAdd(2 Ana Trujillo Biology 78 87 Mexico) dtRowsAdd(3 Antonio Moreno Aeronautics 71 70 Spain) dtRowsAdd(4 Paolo Accorti Biology 74 63 Spain) dtRowsAdd(5 Elizabeth Brown ComputerScience 80 93 Mexico) dtRowsAdd(6 Jaime Yorres Biology 61 48 Spain) dtRowsAdd(7 Yvonne Moncada Aeronautics 85 78 Mexico) dtRowsAdd(8 Martine Ranceacute Aeronautics 67 81 Spain) dtRowsAdd(9 Sergio Gutieacuterrezy ComputerScience 62 58 Mexico) dtRowsAdd(10 Thomas Hardy Aeronautics 94 92 Mexico) dtRowsAdd(11 Patricio Simpson Aeronautics 46 52 Spain) dtRowsAdd(12 Maria Anders ComputerScience 85 73 Spain) gridDataSource = dt gridAutoSizeCols() (gridDataSource as DataTable)DefaultViewSort = Course

FlexGridでツリーを作成しますpublic void CreateTree(C1FlexGrid grid) gridTreeColumn = 1 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridTreeShow(1) gridAutoSizeCols()public void CreateSubTotal(C1FlexGrid grid) グリッドに存在する既存の小計をすべてクリアします gridSubtotal(AggregateEnumClear) レベル1グループ「Course」列集計（平均）ScoreAttendanceでグリッドに小計を追加します gridSubtotal(AggregateEnumAverage 1 3 3 4 Average for 0) gridAutoSizeCols()

Private Sub SubtotalNode_Bound_Load(ByVal sender As Object ByVal e As EventArgs) FlexGridを取得します BindGrid(_gridBound) 連結されたFlexGridにツリーを表示します CreateTree(_gridBound) Creates Subtotal(s) in Bound FlexGrid CreateSubTotal(_gridBound)End Sub

Public Sub BindGrid(ByVal grid As C1FlexGrid) Dim dt As DataTable = New DataTable() dtColumnsAdd(ID GetType(Integer)) dtColumnsAdd(Name GetType(String)) dtColumnsAdd(Course GetType(String)) dtColumnsAdd(Score GetType(Integer)) dtColumnsAdd(Attendance GetType(Integer)) dtColumnsAdd(Country GetType(String))

サンプルデータ dtRowsAdd(1 Helen Bennett ComputerScience 79 84 Spain) dtRowsAdd(2 Ana Trujillo Biology 78 87 Mexico) dtRowsAdd(3 Antonio Moreno Aeronautics 71 70 Spain) dtRowsAdd(4 Paolo Accorti Biology 74 63 Spain) dtRowsAdd(5 Elizabeth Brown ComputerScience 80 93 Mexico) dtRowsAdd(6 Jaime Yorres Biology 61 48 Spain) dtRowsAdd(7 Yvonne Moncada Aeronautics 85 78 Mexico) dtRowsAdd(8 Martine Ranceacute Aeronautics 67 81 Spain) dtRowsAdd(9 Sergio Gutieacuterrezy ComputerScience 62 58 Mexico) dtRowsAdd(10 Thomas Hardy Aeronautics 94 92 Mexico) dtRowsAdd(11 Patricio Simpson Aeronautics 46 52 Spain) dtRowsAdd(12 Maria Anders ComputerScience 85 73 Spain) gridDataSource = dt gridAutoSizeCols() TryCast(gridDataSource DataTable)DefaultViewSort = CourseEnd Sub

FlexGridでツリーを作成しますPublic Sub CreateTree(ByVal grid As C1FlexGrid) gridTreeColumn = 1 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridTreeShow(1)

Unbound Mode (Using Subtotal Method)

The Subtotal method is a very convenient and flexible way to create a tree grid It has a number of overloads thatallow you to specify which columns are to be grouped on and totaled on by index or by name whether to include acaption in the node rows that it inserts how to perform the grouping and so on

In the code below Subtotal method of the C1FlexGrid class is used for creating nodes in an unbound WinForms TreeGrid

gridAutoSizeCols()End Sub

Public Sub CreateSubTotal(ByVal grid As C1FlexGrid) グリッドに存在する既存の小計をすべてクリアします gridSubtotal(AggregateEnumClear) レベル1グループ「Course」列集計（平均）ScoreAttendanceでグリッドに小計を追加します gridSubtotal(AggregateEnumAverage 1 3 3 4 Average for 0) gridAutoSizeCols()End Sub

private void Unbound_Subtotal_Load(object sender EventArgs e) 連結されていないFlexGridにデータを追加します PopulateGrid(_gridUnbound) 連結されていないFlexGridにツリーを表示します ShowTreeNode(_gridUnbound) 連結されていないFlexGridに小計を作成します CreateSubTotal(_gridUnbound) public void PopulateGrid(C1FlexGrid grid) グリッドにデータを入力します Random rnd = new Random() gridRowsCount = 14 grid[0 1] = Direction grid[0 2] = Region CellRange rg = gridGetCellRange(0 3 0 gridColsCount - 1) rgData = Rnd

for (int r = 1 r lt gridRowsCount r++) grid[r 0] = r grid[r 1] = (r lt 7) Inbound Outbound grid[r 2] = (r lt 3) North (r lt 7) South (r lt 10) East West for (int c = 3 c lt gridColsCount c++) grid[r c] = rndNext(1000) gridCols[c]Format = gridAutoSizeCols()

FlexGridでツリーを作成しますprivate void ShowTreeNode(C1FlexGrid grid) ツリーを作成します gridTreeColumn = 1 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridAutoSizeCols()

Creates Subtotal in FlexGridpublic void CreateSubTotal(C1FlexGrid grid) Clears any existing subtotal(s) present in grid gridSubtotal(AggregateEnumClear) for (int c = 3 c lt gridColsCount c++) Adds subtotals in grid gridSubtotal(AggregateEnumSum 0 -1 c Grand Total) gridSubtotal(AggregateEnumSum 2 2 c Total for 0) gridAutoSizeCols()

Private Sub Unbound_Subtotal_Load(ByVal sender As Object ByVal e As EventArgs) 連結されていないFlexGridにデータを追加します PopulateGrid(_gridUnbound) 連結されていないFlexGridにツリーを表示します ShowTreeNode(_gridUnbound) 連結されていないFlexGridに小計を作成します CreateSubTotal(_gridUnbound) End Sub

Public Sub PopulateGrid(ByVal grid As C1FlexGrid) グリッドにデータを入力します Dim rnd As Random = New Random() gridRowsCount = 14 grid(0 1) = Direction grid(0 2) = Region Dim rg As CellRange = gridGetCellRange(0 3 0 gridColsCount - 1) rgData = Rnd Dim r As Integer = 1

r += 1

If True Then grid(r 0) = r grid(r 1) = r And lt 7 Inbound Outbound grid(r 2) = r And lt 3 North r And lt 7 South r And lt 10 East West Dim c As Integer = 3

While c And lt gridColsCount End While

c += 1

If True Then grid(r c) = rnd[Next](1000) gridCols(c)Format = End If End If

gridAutoSizeCols() End Sub

FlexGridでツリーを作成します Private Sub ShowTreeNode(ByVal grid As C1FlexGrid) ツリーを作成しますFlexGridでツリーを作成します gridTreeColumn = 1 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridAutoSizeCols() End Sub

FlexGridで小計を作成します Public Sub CreateSubTotal(ByVal grid As C1FlexGrid) グリッドに存在する既存の小計をすべてクリアします gridSubtotal(AggregateEnumClear) Dim c As Integer = 3

c += 1

If True Then グリッドに小計を追加します gridSubtotal(AggregateEnumSum 0 -1 c Grand Total) gridSubtotal(AggregateEnumSum 2 2 c Total for 0) End If

Unbound Mode(Using IsNode Property)

In an unbound grid you can turn regular rows into node rows by simply setting the IsNode property to true If youtry to turn a regular data bound row into a node it causes the grid to throw an exception

Use the following code to create nodes using IsNode property in an unbound WinForms Tree Grid

private void Unbound_Row_Load(object sender EventArgs e) 連結されていないFlexGridにデータを入力します PopulateGrid(_gridUnbound) 連結されていないFlexGridにツリーを表示します ShowTreeNode(_gridUnbound)

private void PopulateGrid(C1FlexGrid grid) FlexGridをリセットします gridRowsCount = 0 gridColsCount = 2 string fileName = testxml xmlドキュメントをロードします XmlDocument xdoc = new XmlDocument() xdocLoad(fileName) XMLドキュメントを読み取りFlexGridのノードとして表示します ShowNode(_gridUnbound xdocChildNodes[1] 0) gridAutoSizeCols() FlexGridでツリーを作成しますprivate void ShowTreeNode(C1FlexGrid grid) ツリーを作成します gridTreeColumn = 0 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridAutoSizeCols()

FlexGridにxmlノードを追加しますprivate void ShowNode(C1FlexGrid grid XmlNode node int level)

コメントノードをスキップします if (nodeNodeType == XmlNodeTypeComment) return 読み取りxmlノードの新しい行を追加します int row = gridRowsCount gridRowsAdd() グリッドのセルにxmlノードデータを割り当てます grid[row 0] = nodeName xmlノードに子が1つしかないかどうかを確認します if (nodeChildNodesCount == 1) グリッドのセルにノード値を設定します grid[row 1] = nodeInnerText 新しい行をノードにします gridRows[row]IsNode = true gridRows[row]NodeLevel = level ノードに子がある場合はそれらも取得します if (nodeChildNodesCount gt 1) 子を取得するために再帰します foreach (XmlNode child in nodeChildNodes) ShowNode(_gridUnbound child level + 1)

Private Sub Unbound_Row_Load(ByVal sender As Object ByVal e As EventArgs) 連結されていないFlexGridにデータを入力します PopulateGrid(_gridUnbound) 連結されていないFlexGridにツリーを表示します ShowTreeNode(_gridUnbound) End Sub

Private Sub PopulateGrid(ByVal grid As C1FlexGrid) FlexGridをリセットします gridRowsCount = 0 gridColsCount = 2 Dim fileName As String = testxml xmlドキュメントをロードします Dim xdoc As XmlDocument = New XmlDocument() xdocLoad(fileName) XMLドキュメントを読み取りFlexGridのノードとして表示します ShowNode(_gridUnbound xdocChildNodes(1) 0) gridAutoSizeCols() End Sub

FlexGridでツリーを作成します Private Sub ShowTreeNode(ByVal grid As C1FlexGrid) ツリーを作成します gridTreeColumn = 0 gridTreeStyle = TreeStyleFlagsSimpleLeaf gridAutoSizeCols() End Sub

FlexGridにxmlノードを追加します Private Sub ShowNode(ByVal grid As C1FlexGrid ByVal node As XmlNode ByVal level As Integer) コメントノードをスキップします If nodeNodeType Is XmlNodeTypeComment Then Return

読み取りxmlノードの新しい行を追加します Dim row As Integer = gridRowsCount gridRowsAdd() グリッドのセルにxmlノードデータを割り当てます grid(row 0) = nodeName

xmlノードに子が1つしかないかどうかを確認します If nodeChildNodesCount = 1 Then グリッドのセルにノード値を設定します grid(row 1) = nodeInnerText End If

新しい行をノードにします gridRows(row)IsNode = True gridRows(row)NodeLevel = level

ノードに子がある場合はそれらも取得します If nodeChildNodesCount And gt Then End If

If True Then

子を取得するために再帰します For Each child As XmlNode In nodeChildNodes ShowNode(_gridUnbound child level + 1) Next End If End Sub

ノードの操作

Tree Grid not only allows you to present the data in a structured form but it also supports performing variousoperations with the nodes You can add delete move and fetch nodes by using various methods provided bythe Node class

Add NodeYou can add a node at a specific position in the Tree Grid using AddNode method of the Node class This appends anew node row to the collection The method takes NodeTypeEnum enumeration as its argument which lets youspecify a node with respect to another given node

The code below shows how to add a node in the WinForms Tree Grid at a specific location

private void cmbAdd_SelectionChangeCommitted(object sender SystemEventArgs e) 現在の行ノードを取得します Node nd = flexRows[flexRow]Node ユーザーの要求に応じて相対を追加します (could be a child or a sibling) ndAddNode((NodeTypeEnum)(cmbAddSelectedIndex + 2) cmbAddText) flexFocus()

Private Sub cmbAdd_SelectionChangeCommitted(ByVal sender As Object ByVal e As EventArgs) 現在の行ノードを取得します Dim nd As Node = flexRows(flexRow)Node ユーザーの要求に応じて相対を追加します (could be a child or a sibling) ndAddNode(CType(cmbAddSelectedIndex + 2 NodeTypeEnum) cmbAddText)

Delete NodeYou can delete a selected node from the Tree Grid using RemoveNode method of the Node class

Following code demonstrates how to delete a node from the WinForms Tree Grid

Move NodeThe Tree Grid allows you to move the node rows to a new position using Move method of the Node class Themethod takes NodeMoveEnum enumeration as an argument which lets you specify the direction in which node hasto be moved

Use the code below to move a node of the WinForms Tree Grid to a new position

flexFocus()End Sub

private void btnDelete_Click(object sender SystemEventArgs e) 現在のノードを取得します Node nd = null if ( flexRowsCount gt 0 ampamp flexRow gt= 0 ampamp flexRow lt flexRowsCount) nd = flexRows[flexRow]Node if (nd = null) FlexGridからノードを削除します ndRemoveNode() flexFocus()

Private Sub btnDelete_Click(ByVal sender As Object ByVal e As EventArgs) 現在のノードを取得します Dim nd As Node = Nothing

If flexRowsCount gt 0 AndAlso flexRow gt= 0 AndAlso flexRow lt flexRowsCount Then nd = flexRows(flexRow)Node End If

If nd IsNot Nothing Then FlexGridからノードを削除します ndRemoveNode() flexFocus() End IfEnd Sub

private void btnMove_Click(object sender SystemEventArgs e) 現在の行のノードを取得します Node nd = flexRows[flexRow]Node ユーザーが選択した動きを適用します

Select NodesIn Tree Grid you can select the nodes to perform different operations using GetNode method of the Node class Themethod takes a parameter called NodeTypeEnum enumeration which specifies a node with respect to another givennode

The code below specifies how to fetch a specific node of the WinForms Tree Grid and show it in selected state

（これにより選択したノードが移動します） if (sender == btnMoveOut) ndMove(NodeMoveEnumOut) else if (sender == btnMoveIn) ndMove(NodeMoveEnumIn) else if (sender == btnMoveUp) ndMove(NodeMoveEnumUp) else if (sender == btnMoveDown) ndMove(NodeMoveEnumDown) else if (sender == btnMoveFirst) ndMove(NodeMoveEnumFirst) else if (sender == btnMoveLast) ndMove(NodeMoveEnumLast) ノードがまだ表示されていることを確認します ndEnsureVisible() flexFocus()

Private Sub btnMove_Click(ByVal sender As Object ByVal e As EventArgs) 現在の行のノードを取得します Dim nd As Node = flexRows(flexRow)Node

ユーザーが選択した動きを適用します（これにより選択したノードが移動します） If sender Is btnMoveOut Then ndMove(NodeMoveEnumOut) ElseIf sender Is btnMoveIn Then ndMove(NodeMoveEnum[In]) ElseIf sender Is btnMoveUp Then ndMove(NodeMoveEnumUp) ElseIf sender Is btnMoveDown Then ndMove(NodeMoveEnumDown) ElseIf sender Is btnMoveFirst Then ndMove(NodeMoveEnumFirst) ElseIf sender Is btnMoveLast Then ndMove(NodeMoveEnumLast) End If

ノードがまだ表示されていることを確認します ndEnsureVisible() flexFocus()End Sub

private void cmbSelect_SelectionChangeCommitted(object sender SystemEventArgs e) 現在の行のノードを取得します Node nd = flexRows[flexRow]Node ユーザーが選択したノードを取得します nd = ndGetNode((NodeTypeEnum)cmbSelectSelectedIndex) 失敗した場合はメッセージを表示します if (nd == null) MessageBoxShow(Cant find + cmbSelectText + for this node) return ノードを選択しそれが表示されていることを確認します（スクロールして表示します）

Expand and Collapse NodesYou can expand and collapse all nodes in your Tree Grid application using the Collapsed property of Node class asshown in the code below This feature makes it convenient to navigate through node headers as a group whenrequired

Following code shows how to expand and collapse nodes of the WinForms Tree Grid

ndSelect() ndEnsureVisible() flexFocus()

Private Sub cmbSelect_SelectionChangeCommitted(ByVal sender As Object ByVal e As EventArgs) 現在の行のノードを取得します Dim nd As Node = flexRows(flexRow)Node ユーザーが選択したノードを取得します nd = ndGetNode(CType(cmbSelectSelectedIndex NodeTypeEnum))

失敗した場合はメッセージを表示します If nd Is Nothing Then MessageBoxShow(Cant find amp cmbSelectText amp for this node) Return End If

ノードを選択しそれが表示されていることを確認します（スクロールして表示します） nd[Select]() ndEnsureVisible() flexFocus()End Sub

foreach (Row row in flexRowsCastltRowgt()Where(rw =gt rwIsNode == true)) Node node = rowNode nodeCollapsed = false

foreach (Row row in flexRowsCastltRowgt()Where(rw =gt rwIsNode == true)) Node node = rowNode nodeCollapsed = true

For Each row As Row In flexRowsCast(Of Row)()Where(Function(rw) rwIsNode = True) Dim node As Node = rowNode nodeCollapsed = False Next

For Each row As Row In flexRowsCast(Of Row)()Where(Function(rw) rwIsNode = True) Dim node As Node = rowNode nodeCollapsed = True Next

Drag and Drop NodesIn Tree Grid you can drag and drop a selected node to a specific position by handling the MouseUp MouseDownand MouseMove events

The code below lets the user drag and drop nodes of the WinForms Tree Grid

private void flex_MouseDown(object sender MouseEventArgs e) m_DragInfocheckDrag = false 左ボタンを押すと移動しませんドラッグするマウスの追跡を開始します if (eButton = MouseButtonsLeft) return if (chkDragChecked || m_DragInfodragging) return if (flexMouseRow lt flexRowsFixed || flexMouseCol = 0) return 現在の行とマウスの位置を保存します m_DragInforow = flexRow m_DragInfomouseDown = new Point(eX eY) チェックを開始します m_DragInfocheckDrag = true

private void flex_MouseMove(object sender MouseEventArgs e) チェックしてユーザーが許容範囲を超えた場合はドラッグを開始します if (m_DragInfocheckDrag || eButton = MouseButtonsLeft) return if (MathAbs(eX - m_DragInfomouseDownX) + MathAbs(eY - m_DragInfomouseDownY) lt= DRAGTOL) return フラグを更新します m_DragInfodragging = true Sets cursor and highlight node CellStyle cs = flexStyles[SourceNode] flexCursor = CursorsNoMove2D flexSetCellStyle(m_DragInforow 0 cs) ここにドロップできるかどうかを確認します Cursor c = (NoDropHere()) CursorsNo CursorsNoMove2D if (c = flexCursor) flexCursor = c private bool NoDropHere() カーソルの下の行は無効です if (flexMouseRow lt flexRowsFixed) return true カーソルの下の列が無効です if (flexMouseCol lt flexColsFixed) return true if (flexGetDataDisplay(flexRow 0) == SKU) return true return false private void flex_MouseUp(object sender MouseEventArgs e) マウスが再び下がるまでチェックしないでください m_DragInfocheckDrag = false Not dragging were done if (m_DragInfodragging) return ドラッグを停止します m_DragInfodragging = false flexSetCellStyle(m_DragInforow 0 (CellStyle)null) flexCursor = CursorsDefault ドロップが許可されているかどうかをテストします

if (NoDropHere()) return ノードを新しい親ノードに移動します Node ndSrc = flexRows[m_DragInforow]Node Node ndDst = flexRows[flexRow]Node ndSrcMove(NodeMoveEnumChildOf ndDst) ndSrcSelect()

internal struct DRAGINFO public bool dragging 現在ドラッグ中 public bool checkDrag 現在マウスをチェックしてドラッグを開始しています public int row ドラッグされている行のインデックス public Point mouseDown マウスダウンの位置

Private Sub flex_MouseDown(ByVal sender As Object ByVal e As MouseEventArgs) m_DragInfocheckDrag = False 左ボタンを押すと移動しませんドラッグするマウスの追跡を開始します If eButton IsNot MouseButtonsLeft Then Return If Not chkDragChecked OrElse m_DragInfodragging Then Return If flexMouseRow lt flexRowsFixed OrElse flexMouseCol ltgt 0 Then Return 現在の行とマウスの位置を保存します m_DragInforow = flexRow m_DragInfomouseDown = New Point(eX eY) チェックを開始します m_DragInfocheckDrag = True End Sub

Private Sub flex_MouseMove(ByVal sender As Object ByVal e As MouseEventArgs) チェックしてユーザーが許容範囲を超えた場合はドラッグを開始します If Not m_DragInfocheckDrag OrElse eButton IsNot MouseButtonsLeft Then Return If MathAbs(eX - m_DragInfomouseDownX) + MathAbs(eY - m_DragInfomouseDownY) lt= DRAGTOL Then Return フラグを更新します m_DragInfodragging = True カーソルを設定しノードを強調表示します Dim cs As CellStyle = flexStyles(SourceNode) flexCursor = CursorsNoMove2D flexSetCellStyle(m_DragInforow 0 cs) ここにドロップできるかどうかを確認します Dim c As Cursor = If((NoDropHere()) CursorsNo CursorsNoMove2D) If c IsNot flexCursor Then flexCursor = c End Sub

Private Function NoDropHere() As Boolean カーソルの下の行は無効です If flexMouseRow lt flexRowsFixed Then Return True カーソルの下の列が無効です If flexMouseCol lt flexColsFixed Then Return True If flexGetDataDisplay(flexRow 0) Is SKU Then Return True Return False End Function

Private Sub flex_MouseUp(ByVal sender As Object ByVal e As MouseEventArgs) マウスが再び下がるまでチェックしないでください m_DragInfocheckDrag = False If Not m_DragInfodragging Then Return ドラッグを停止します m_DragInfodragging = False

flexSetCellStyle(m_DragInforow 0 CType(Nothing CellStyle)) flexCursor = Cursors[Default] ドロップが許可されているかどうかをテストします If NoDropHere() Then Return ノードを新しい親ノードに移動します Dim ndSrc As Node = flexRows(m_DragInforow)Node Dim ndDst As Node = flexRows(flexRow)Node ndSrcMove(NodeMoveEnumChildOf ndDst) ndSrc[Select]() End Sub

Friend Structure DRAGINFO Public dragging As Boolean 現在ドラッグ中 Public checkDrag As Boolean 現在マウスをチェックしてドラッグを開始しています Public row As Integer ドラッグされている行のインデックス Public mouseDown As Point マウスダウンの位置 End Structure

データの操作

In Tree Grid just like a usual grid you can also perform various operations at data level such as sorting and retainingthe changes

SortingTo apply sorting in Tree Grid you can select the parent node and sort the child nodes using Sort Method of the NodeClass You can specify the sorting order by using the SortFlags enumeration

Following code applies sorting on the WinForms Tree Grid

Retain the ChangesSo far we have discussed how to create trees and totals using the high-level Subtotal method as well as lower-level InsertNode and Aggregate methods

At this point it is important to remember that the Tree Grid is created based on the data but is not bound to it in anyway and is not automatically maintained when there are changes to the grid or to the data

For example if the user modifies a value in the column the subtotals will not be automatically updated If the usersorts the grid it refreshes the data and the subtotals disappear

There are two common ways to maintain the Tree Grid

1 Prevent the user from making any changes that would invalidate the tree This is the easiest option You can setthe grids AllowEditing AllowDragging and AllowSorting properties to false and prevent any changes thatwould affect the tree

2 Update the tree when there are changes to the data or to the grid You can attach handlers to thegrids AfterDataRefresh AfterSort and AfterEdit events and re-generate the outline appropriately

The second option is usually more interesting as it provides a quick and simple tool for dynamic data analysis Thisapproach is illustrated by a product sample Analyze shipped with the FlexGrid control The sample creates an initialoutline and allows users to reorder the columns When the column order changes the sample automatically re-sortsthe data and re-creates the outline

Note The abovementioned product sample is located at DocumentsComponentOneSamplesWinFormsvxxxC1FlexGridCS on your system if you have installed the samples while installing

private void btnSort_Click(object sender SystemEventArgs e) 現在のノードを取得します Node nd = flexRows[flexRow]Node ユーザーが選択した並べ替えを適用します（これにより選択したノードの子が並べ替えられます） if (sender == btnSortAscending) ndSort(SortFlagsAscending) else ndSort(SortFlagsDescending) 完了 flexFocus()

Private Sub btnSort_Click(ByVal sender As Object ByVal e As EventArgs) 現在のノードを取得します Dim nd As Node = flexRows(flexRow)Node

ユーザーが選択した並べ替えを適用します（これにより選択したノードの子が並べ替えられます） If sender Is btnSortAscending Then ndSort(SortFlagsAscending) Else ndSort(SortFlagsDescending) End If

完了 flexFocus()End Sub

WinForms Edition using ComponentOneControlPanelexe

In Create Nodes section we also learnt about implementing GroupBy method that inserts node rows groupingidentical values on a given column The code scans all the columns skipping existing node rows so it can be called toadd several levels of nodes and keeps track of the current value for the column being grouped on When the currentvalue changes a node row is inserted showing the new group name in the first scrollable column

However there are some challenges to maintain the grouping like the method assumes that data is sorted accordingto the outline structure Also the GroupBy method may insert rows which would cause the grid to flicker To avoidthis you would normally set the Redraw property to false before making the updates and set it back to true whendone

The DeferRefresh class is a simple utility that sets the grids Redraw property to false and restores its original valuewhen it is disposed This ensures that Redraw is properly restored even when exceptions happen during the updatesThe BindGrid method ensures that the grid is sorted in the order required by our outline structure

ツリーグリッドのカスタマイズ

FlexGrid allows you to customize Tree Grid by styling as well as by using various elements like checkboxes toexpandcollapse nodes or images as node icons A customized Tree Grid can make the outline tree nodes look moredistinctive and structured making it visually appealing and more understandable

Style Tree GridStyling a Tree Grid is similar to styling the FlexGrid control The Tree property returns a reference to a GridTree objectthat exposes several methods and properties used to customize the Tree Grid Following is the list of some commonlyused properties

Column Gets or sets the index of the column that contains the outline tree Setting this property to -1 causesthe outline tree to be hidden from the usersIndent Gets or sets the indent in pixels between adjacent node levels Higher indent levels cause the tree tobecome widerStyle Gets or sets the type of outline tree to display Use this property to determine whether the tree shouldinclude a button bar at the top to allow users to collapseexpand the entire tree whether lines andor symbolsshould be displayed and whether lines should be displayed connecting the tree to data rows as well as noderowsLineColor Gets or sets the color of the connecting linesLineStyle Gets or sets the style of the connecting lines

For more information on styling the tree grid see Styling and Appearance topic in FlexGrid documentation

Display Tree with CheckBoxesTo create a custom Tree Grid with checkbox and images you need to first initialize FlexGrid for creating Tree Grid andthen add nodes to the tree by using AddNode method of the RowCollection class

Now to implement checkboxes in Tree Grid you need to maintain the checkboxes in parent and child nodes Thismethod uses Checked property of the Node class which defines whether to show a checkbox for the node or not

The code below shows how to display checkboxes on tree nodes of the WinForms Tree Grid

void c1FlexGrid1_CellChecked(object sender C1WinC1FlexGridRowColEventArgs e) すべての子にチェック値を適用します var node = thisc1FlexGrid1Rows[eRow]Node UpdateCheckChildren(node) 親にチェック値を適用します UpdateCheckParent(node)

void UpdateCheckChildren(C1WinC1FlexGridNode node) var checkState = nodeChecked foreach (C1WinC1FlexGridNode child in nodeNodes) childChecked = checkState UpdateCheckChildren(child)

void UpdateCheckParent(C1WinC1FlexGridNode node) このノードの親を取得します var parent = nodeParent if (parent = null)

チェックされたチェックされていない子をカウントします int cntChecked = 0 int cntUnchecked = 0 int cntGrayed = 0 foreach (C1WinC1FlexGridNode child in parentNodes) switch (childChecked) case C1WinC1FlexGridCheckEnumChecked cntChecked++ break case C1WinC1FlexGridCheckEnumUnchecked cntUnchecked++ break case C1WinC1FlexGridCheckEnumGrayed cntGrayed++ break 親のチェック状態を更新します if (cntGrayed gt 0 || (cntChecked gt 0 ampamp cntUnchecked gt 0)) parentChecked = C1WinC1FlexGridCheckEnumGrayed else if (cntChecked gt 0 ampamp cntUnchecked == 0) parentChecked = C1WinC1FlexGridCheckEnumChecked else if (cntUnchecked gt 0 ampamp cntChecked == 0) parentChecked = C1WinC1FlexGridCheckEnumUnchecked 祖父も更新します UpdateCheckParent(parent)

Private Sub c1FlexGrid1_CellChecked(ByVal sender As Object ByVal e As C1WinC1FlexGridRowColEventArgs) すべての子にチェック値を適用します Dim node = Mec1FlexGrid1Rows(eRow)Node UpdateCheckChildren(node) 親にチェック値を適用します UpdateCheckParent(node) End Sub

Private Sub UpdateCheckChildren(ByVal node As C1WinC1FlexGridNode) Dim checkState = nodeChecked

For Each child As C1WinC1FlexGridNode In nodeNodes childChecked = checkState MeUpdateCheckChildren(child) Next End Sub

Private Sub UpdateCheckParent(ByVal node As C1WinC1FlexGridNode) このノードの親を取得します Dim parent = nodeParent

If parent IsNot Nothing Then チェックされたチェックされていない子をカウントします

Display Tree with ImagesTo add the images as your Tree Grid node icons you can use the AddImageFolder method for creating nodes relatedto files and assigning images to the nodes

Dim cntChecked As Integer = 0 Dim cntUnchecked As Integer = 0 Dim cntGrayed As Integer = 0

For Each child As C1WinC1FlexGridNode In parentNodes

Select Case childChecked Case C1WinC1FlexGridCheckEnumChecked cntChecked += 1 Case C1WinC1FlexGridCheckEnumUnchecked cntUnchecked += 1 Case C1WinC1FlexGridCheckEnumGrayed cntGrayed += 1 End Select Next

親のチェック状態を更新します If cntGrayed gt 0 OrElse cntChecked gt 0 AndAlso cntUnchecked gt 0 Then parentChecked = C1WinC1FlexGridCheckEnumGrayed ElseIf cntChecked gt 0 AndAlso cntUnchecked = 0 Then parentChecked = C1WinC1FlexGridCheckEnumChecked ElseIf cntUnchecked gt 0 AndAlso cntChecked = 0 Then parentChecked = C1WinC1FlexGridCheckEnumUnchecked End If

祖父も更新します UpdateCheckParent(parent) End If End Sub

Use the code below to display images or icons along with nodes of the WinForms Tree Grid

void AddImageFolder(string path int level) int cnt = 0 try ディレクトリ内のすべてのファイルをループします foreach (string file in DirectoryGetFiles(path)) ファイルごとにノードを作成しFlexGridに追加します var node = c1FlexGrid2RowsAddNode(level) 作成されたノードのデータを設定します nodeData = PathGetFileName(file) 画像をノードに割り当てるためのコード ShowImage(node file) 各ディレクトリから（最大で）20個のファイルのみを表示します cnt++ if (cnt gt 20) break catch try パスのすべてのサブディレクトリをループします foreach (string subPath in DirectoryGetDirectories(path))

ファイルごとにノードを作成しFlexGridに追加します var node = c1FlexGrid2RowsAddNode(level) 作成されたノードのデータを設定します nodeData = PathGetFileName(subPath) 画像をノードに割り当てるためのコード ShowImage(node subPath) 現在のディレクトリのサブディレクトリファイルをトラバースします AddImageFolder(subPath level + 1) 各ディレクトリから（最大で）20個のファイルのみを表示します cnt++ if (cnt gt 20) break catch

Private Sub AddImageFolder(ByVal path As String ByVal level As Integer) Dim cnt As Integer = 0

ディレクトリ内のすべてのファイルをループします For Each file As String In DirectoryGetFiles(path) ファイルごとにノードを作成しFlexGridに追加します Dim node = c1FlexGrid2RowsAddNode(level) 作成されたノードのデータを設定します nodeData = PathGetFileName(file)

画像をノードに割り当てるためのコード ShowImage(node file) 各ディレクトリから（最大で）20個のファイルのみを表示します cnt += 1 If cnt gt 20 Then Exit For Next

Catch End Try

パスのすべてのサブディレクトリをループします For Each subPath As String In DirectoryGetDirectories(path) ファイルごとにノードを作成しFlexGridに追加します Dim node = c1FlexGrid2RowsAddNode(level) 作成されたノードのデータを設定します nodeData = PathGetFileName(subPath) 画像をノードに割り当てるためのコード ShowImage(node subPath) 現在のディレクトリのサブディレクトリファイルをトラバースします AddImageFolder(subPath level + 1) 各ディレクトリから（最大で）20個のファイルのみを表示します cnt += 1 If cnt gt 20 Then Exit For Next

Catch End TryEnd Sub

The above code uses a custom method called ShowImage to set the image for nodes based on its file extensions

public void ShowImage(C1WinC1FlexGridNode node string path) パスからファイル拡張子を取得します string extension = PathGetExtension(path) パスがファイルに属している場合 if (extension = ) ファイル拡張子に基づいてノードの画像を設定します switch (extension) case txt nodeImage = PropertiesResourcesTxt break case resx nodeImage = PropertiesResourcesTxt break case licx nodeImage = PropertiesResourcesTxt break case cs nodeImage = PropertiesResourcesTxt break case vb nodeImage = PropertiesResourcesTxt break case exe nodeImage = PropertiesResourcesExe break case dll nodeImage = PropertiesResourcesDll break case sln nodeImage = PropertiesResourcesVS break case csproj nodeImage = PropertiesResourcesVS break case bmp nodeImage = PropertiesResourcesImg break case png nodeImage = PropertiesResourcesImg break case gif nodeImage = PropertiesResourcesVideo break case accdb nodeImage = PropertiesResourcesAccess break default nodeImage = PropertiesResourcesUnknown break それ以外のパスはディレクトリフォルダに属しています else nodeImage = PropertiesResourcesFolder

Public Sub ShowImage(ByVal node As C1WinC1FlexGridNode ByVal path As String) パスからファイル拡張子を取得します Dim extension As String = PathGetExtension(path)

パスがファイルに属している場合 If Not Equals(extension ) Then

ファイル拡張子に基づいてノードの画像を設定します Select Case extension Case txt nodeImage = PropertiesResourcesTxt Case resx nodeImage = PropertiesResourcesTxt Case licx nodeImage = PropertiesResourcesTxt Case cs nodeImage = PropertiesResourcesTxt Case vb nodeImage = PropertiesResourcesTxt Case exe nodeImage = PropertiesResourcesExe Case dll nodeImage = PropertiesResourcesDll Case sln nodeImage = PropertiesResourcesVS Case csproj nodeImage = PropertiesResourcesVS Case bmp nodeImage = PropertiesResourcesImg Case png nodeImage = PropertiesResourcesImg Case gif nodeImage = PropertiesResourcesVideo Case accdb nodeImage = PropertiesResourcesAccess Case Else nodeImage = PropertiesResourcesUnknown それ以外のパスはディレクトリフォルダに属しています End Select Else nodeImage = PropertiesResourcesFolder End IfEnd Sub

クリップボード

FlexGrid provides flexibility to perform various clipboard operations such as cut copy and paste on the editable griddata To enable automatic handling of common clipboard keys you need to set the AutoClipboard property to trueThe property handles following clipboard operations and their corresponding keys

Copy CTRL+C Ctrl+INS

Cut CTRL+X SHIFT+DEL

Paste CTRL+V SHIFT+INS

Delete DEL

The abovementioned clipboard operations do not have any affect on the styles and images and only work on gridheaders and data You can choose which part of the selected content to copy out of row header column headerand data by using the ClipboardCopyMode property When a datamap or multicolumn combobox exists in thecopied range only the display value is copied Also note that hidden cells are also copied when copying a cellrange To exclude hidden cells from copying see Exclude Hidden Cells

The code below demonstrates how to enable clipboard operations in the WinForms FlexGrid

Clipboard Operations through CodeYou can also perform clipboard operations through code The example below shows how to perform copying andpasting operations on button click

Use the code below to perform the clipboard operations through code in the WinForms FlexGrid

キーボードからクリップボード操作を有効にします c1FlexGrid1AutoClipboard = true データとすべてのヘッダーをコピーするようにコピーモードを設定します c1FlexGrid1ClipboardCopyMode = C1WinC1FlexGridClipboardCopyModeEnumDataAndAllHeaders

キーボードからクリップボード操作を有効にしますc1FlexGrid1AutoClipboard = True

データとすべてのヘッダーをコピーするようにコピーモードを設定しますc1FlexGrid1ClipboardCopyMode = C1WinC1FlexGridClipboardCopyModeEnumDataAndAllHeaders

private void CopyButton_Click(object sender EventArgs e) クリップボードにコピーするグリッドのデータのみをコピーできるようにします c1FlexGrid1ClipboardCopyMode = ClipboardCopyModeEnumDataOnly

Clipプロパティに改行コードを追加しクリップボードに設定します ClipboardSetDataObject(c1FlexGrid1Clip + r) MessageBoxShow($Copied Range [c1FlexGrid1Rowc1FlexGrid1Col]-[c1FlexGrid1RowSelc1FlexGrid1ColSel])

Exclude Hidden CellsIn FlexGrid by default hidden cells are also copied when copying a cell range through keyboard operations enabledusing the AutoClipboard property However you can exclude the hidden rows and columns by using the code below

Following code shows how you can exclude the hidden cells from clipboard operations performed on the WinFormsTree Grid

private void PasteButton_Click(object sender EventArgs e) クリップボードのテキストを取得します IDataObject data = ClipboardGetDataObject() if (dataGetDataPresent(DataFormatsText)) string str1 str2 クリップボードからデータを取得します str1 = (string)dataGetData(DataFormatsText)

クリップボードから最後の行のフィードコードを削除します str2 = str1Remove(str1Length - 1 1)

範囲を選択してデータを貼り付けます c1FlexGrid1Select(c1FlexGrid1Row c1FlexGrid1Col c1FlexGrid1RowsCount - 1 c1FlexGrid1ColsCount - 1 true) c1FlexGrid1Clip = str2 c1FlexGrid1Select(c1FlexGrid1Row c1FlexGrid1Col)

Private Sub CopyButton_Click(ByVal sender As Object ByVal e As EventArgs) クリップボードにコピーするグリッドのデータのみをコピーできるようにします c1FlexGrid1ClipboardCopyMode = ClipboardCopyModeEnumDataOnly

Clipプロパティに改行コードを追加しクリップボードに設定します ClipboardSetDataObject(c1FlexGrid1Clip amp MicrosoftVisualBasicConstantsvbCr) MessageBoxShow($Copied Range [c1FlexGrid1Rowc1FlexGrid1Col]-[c1FlexGrid1RowSelc1FlexGrid1ColSel])End Sub

Private Sub PasteButton_Click(ByVal sender As Object ByVal e As EventArgs) クリップボードのテキストを取得します Dim data As IDataObject = ClipboardGetDataObject()

If dataGetDataPresent(DataFormatsText) Then Dim str1 str2 As String クリップボードからデータを取得します str1 = CStr(dataGetData(DataFormatsText))

範囲を選択してデータを貼り付けます c1FlexGrid1Select(c1FlexGrid1Row c1FlexGrid1Col c1FlexGrid1RowsCount - 1 c1FlexGrid1ColsCount - 1 True) c1FlexGrid1Clip = str2 c1FlexGrid1Select(c1FlexGrid1Row c1FlexGrid1Col) End If

列を非表示にしますc1FlexGrid1Cols[2]Visible = falsec1FlexGrid1AutoClipboard = true

次にCtrl + Cを押す前に非表示の列を含むいくつかのセルを選択しますprivate void c1FlexGrid1_KeyDown_1(object sender KeyEventArgs e) [Ctrl + C]でコピーします if ((eControl == true) ampamp (eKeyCode == KeysC)) 自動処理が行われないためキー入力を無効にします eHandled = true 選択したセル範囲のCellRangeオブジェクトを取得します C1WinC1FlexGridCellRange cr cr = c1FlexGrid1Selection

string StrCopy = for (int i = crr1 i lt= crr2 i++) if (c1FlexGrid1Rows[i]Visible == true) for (int j = crc1 j lt= crc2 j++) if (c1FlexGrid1Cols[j]Visible == true) StrCopy = StrCopy + c1FlexGrid1[i j]ToString() if (j = crc2) StrCopy = StrCopy + t StrCopy = StrCopy + n クリップボードに設定します ClipboardSetDataObject(StrCopy) MessageBoxShow(Copied data n + StrCopy)

列を非表示にします c1FlexGrid1Cols(2)Visible = False c1FlexGrid1AutoClipboard = True

次にCtrl + Cを押す前に非表示の列を含むいくつかのセルを選択しますPrivate Sub c1FlexGrid1_KeyDown_1(ByVal sender As Object ByVal e As KeyEventArgs)

[Ctrl + C]でコピーします If eControl = True AndAlso eKeyCode = KeysC Then 自動処理が行われないためキー入力を無効にします eHandled = True 選択したセル範囲のCellRangeオブジェクトを取得します Dim cr As C1WinC1FlexGridCellRange cr = c1FlexGrid1Selection Dim StrCopy =

For i = crr1 To crr2

If c1FlexGrid1Rows(i)Visible = True Then For j = crc1 To crc2

If c1FlexGrid1Cols(j)Visible = True Then StrCopy = StrCopy amp c1FlexGrid1(i j)ToString()

If j ltgt crc2 Then StrCopy = StrCopy amp MicrosoftVisualBasicConstantsvbTab End If End If Next

StrCopy = StrCopy amp MicrosoftVisualBasicConstantsvbLf End If Next クリップボードに設定します ClipboardSetDataObject(StrCopy) MessageBoxShow(Copied data amp MicrosoftVisualBasicConstantsvbLf amp StrCopy) End IfEnd Sub

保存ロードと印刷

FlexGrid provides various built-in options so that you can easily save a grid and its content in a text excel or an XML file You can even load these saved filesto another grid or can save it as backup of a particular state of the grid You can also save the grid image in your desired format Not just this you can alsoprint the grid or selected areas of the grid if you need to have a hard copy This topic discusses various options related save load and print available in thegrid

Topic Content

Save Discusses about how to save the grid and its contents in different formats

Save as Text FileSave as Excel FileSave as XMLSave as Image

Load Discusses about how to load grid content from various file formats

Load from Text FileLoad from Excel FileLoad from DatabaseLoad from XML

Print Discusses about how to print the grid and other print related options

Print GridPrint OptionsCustomize Print Preview Dialog

保存

FlexGrid provides various methods to save the grid in the desired format such as text excel xml and image formatsThis feature is enabled through an assembly named C1WinC1FlexGridImportExportdll hence you need to addreference to this assembly to save the grid

Save as Text FileTo save grid content as a text file you can use the SaveGrid method of the Extensions class The method hasparameters that let you choose delimiter encoding and also lets you specify which portion of grid should be savedThe resulting text files can later be loaded back into the control or into other applications that support comma or tab-delimited files such as Microsoft Excel

Following code shows how to save content of the WinForms FlexGrid as a text file

private void btnSaveTxt_Click(object sender EventArgs e) c1FlexGrid1SaveGrid(ExportedGridtxt FileFormatEnumTextComma FileFlagsAsDisplayed | FileFlagsIncludeFixedCells)

Private Sub btnSaveTxt_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1SaveGrid(ExportedGridtxt FileFormatEnumTextComma FileFlagsAsDisplayed Or FileFlagsIncludeFixedCells)End Sub

Save as Excel FileTo save grid as an excel file you can use the abovementioned SaveGrid method and simply set the format parameterto FileFormatEnumExcel You dont need to have Microsoft Excel installed on your computer However SaveGridmethod can only save the data in a workbook with single worksheet

To get an additional control over how you save your data to an excel file you can use the SaveExcel method insteadIn this case the process of saving excel files converts most data types and formatting information including row andcolumn dimensions fonts colors formats and cell alignment However some other features such as frozen andmerged cells images data maps and cell borders are not translated while converting to an excel file

Use the code below to save the WinForms FlexGrid as an Excel file

Save as XMLTo serialize grid contents into an XML document you can simply call WriteXML method of the C1FlexGrid class andparse path of the XML document as a parameter The method serializes all grid contents into the Xml documentincluding the data stored in the cells row and column properties styles and images Objects of custom types storedin the grid are also serialized as long as they have an associated SystemComponentModelTypeConverter thatprovides conversions to and from string

Below code demonstrates how to save contents of the WinForms FlexGrid to an XML document

Save as ImageTo save a grid as an image you can create the grid image using CreateImage method of the C1FlexGrid class andsave that image object at the specified path You can also specify a cell range or pass a cell range object as itsparameter to save a specific portion of the grid as an image

Use the code below to save the WinForms FlexGrid as an image

private void btnSaveExcl_Click(object sender EventArgs e) c1FlexGrid1SaveExcel(ExportedGridxlsx FileFlagsAsDisplayed | FileFlagsIncludeFixedCells)

Private Sub btnSaveExcl_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1SaveExcel(ExportedGridxlsx FileFlagsAsDisplayed Or FileFlagsIncludeFixedCells)End Sub

private void btnSaveXML_Click(object sender EventArgs e) c1FlexGrid1WriteXml(ExportedGridxml)

Private Sub btnSaveXML_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1WriteXml(ExportedGridxml)End Sub

private void btnSaveImg_Click(object sender EventArgs e) Image gridImage = c1FlexGrid1CreateImage() gridImageSave(ExportedGridpng)

Private Sub btnSaveImg_Click(ByVal sender As Object ByVal e As EventArgs) Dim gridImaage As Image = c1FlexGrid1CreateImage() gridImaageSave(ExportedGridpng)End Sub

ロード

FlexGrid not only lets you save the grid to various formats but also lets you load data from various formats such textexcel XML or databases This feature is enabled through an assembly named C1WinC1FlexGridImportExportdllhence you need to add reference to this assembly to load the grid with data from these sources

Load from Text FileTo load data from a text file FlexGrid provides LoadGrid method of the Extensions class The method has parametersthat let you choose delimiter encoding etc You can also load text files saved using SaveGrid method When loadingtext files rows and columns are added to the grid if needed to accommodate the file contents The method supportsformats such as comma-delimited text files (CSV format) tab-delimited text files and even MS Excel files (xls)

Following code shows how to populate data in the WinForms FlexGrid by loading it from a text file

Load from Excel FileTo load grid from an excel file you can use the abovementioned LoadGrid method and simply set the formatparameter to FileFormatEnumExcel You dont need to have Microsoft Excel installed on your computer However theLoadGrid method can only load the data from first worksheet of a workbook

To get an additional control over how you load your data from an excel file you can use the LoadExcel methodinstead In this case the process of loading excel files converts most data types and formatting information includingrow and column dimensions fonts colors formats and cell alignment However there are still some exceptions Forexample the grid loads the values in excel cells but cannot load the underlying formulas Other features such asfrozen and merged cells images data maps and cell borders are not translated either

Use the code below to load contents in the WinForms FlexGrid from an excel file

private void btnLoadTxt_Click(object sender EventArgs e) c1FlexGrid1LoadGrid(ExportedGridtxt FileFormatEnumTextComma )

Private Sub btnLoadTxt_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1LoadGrid(ExportedGridtxt FileFormatEnumTextComma)End Sub

Load from DatabaseTo load grid data from a database you can use the DataReader objects This process is different from data bindingwhich keeps a live connection between one or more controls and the underlying data source

Below code demonstrates how to load contents in the WinForms FlexGrid from the database

private void btnLoadExcl_Click(object sender EventArgs e) c1FlexGrid1LoadExcel(ExportedGridxlsx)

Private Sub btnLoadExcl_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1LoadExcel(ExportedGridxlsx)End Sub

private void btnLoadDB_Click(object sender EventArgs e) DataReaderを準備します string strConn = data source=MYMACHINEinitial catalog=Northwind SystemDataSqlClientSqlConnection myConn = new SystemDataSqlClientSqlConnection(strConn) SystemDataSqlClientSqlCommand myCMD = new SystemDataSqlClientSqlCommand(SELECT FROM Employees myConn) myConnOpen() SystemDataSqlClientSqlDataReader myReader = myCMDExecuteReader()

DBスキーマからグリッド構造を構築します DataTable dt = myReaderGetSchemaTable() c1FlexGrid1ColsCount = 1 foreach (DataRow dr in dtRows) Column c =c1FlexGrid1ColsAdd() cCaption = cName = (string)dr[ColumnName] cDataType = (Type)dr[DataType]

グリッドにデータを入力します c1FlexGrid1RowsCount = 1 int row = 1 int cols = dtColumnsCount object[] v = (object[])ArrayCreateInstance(typeof(object) cols) while (myReaderRead()) myReaderGetValues(v) c1FlexGrid1AddItem(v row++ 1)

クリーンアップします c1FlexGrid1AutoSizeCols() myReaderClose() myConnClose()

Load from XMLTo deserialize grid contents from an XML document you can simply call ReadXML method of the C1FlexGrid classand parse path of the XML document as a parameter

Use the code below to load contents for the WinForms FlexGrid from an XML document

Private Sub btnLoadDB_Click(ByVal sender As Object ByVal e As EventArgs) DataReaderを準備します Dim strConn As String = data source=MYMACHINEinitial catalog=Northwind Dim myConn As New SqlClientSqlConnection(strConn) Dim myCMD As New SqlClientSqlCommand(SELECT FROM Employees myConn) myConnOpen() Dim myReader As SqlClientSqlDataReader = myCMDExecuteReader() DBスキーマからグリッド構造を構築します Dim dt As DataTable = myReaderGetSchemaTable() _flexColsCount = 1 Dim dr As DataRow For Each dr In dtRows Dim c As C1WinC1FlexGridColumn = _flexColsAdd() cCaption =(cName lt= CStr(dr(ColumnName))) cDataType = CType(dr(DataType) Type) Next dr グリッドにデータを入力します _flexRowsCount = 1 Dim row As Integer = 1 Dim cols As Integer = dtColumnsCount Dim v As Object() = CType(ArrayCreateInstance(GetType(Object) cols) Object()) While myReaderRead() myReaderGetValues(v) _flexAddItem(v row + 1 1) End While クリーンアップします _flexAutoSizeCols() myReaderClose() myConnClose()End Sub

private void btnLoadXML_Click(object sender EventArgs e) c1FlexGrid1ReadXml(ExportedGridxml)

Private Sub btnLoadXML_Click(ByVal sender As Object ByVal e As EventArgs) c1FlexGrid1ReadXml(ExportedGridxml)End Sub

印刷

FlexGrid lets you print the grid and perform various basic and advanced print settings using its built-in methods andproperties

Print GridFlexGrid provides PrintGrid method of the C1FlexGrid class which lets you print the grid contents with some basicprinting options The method has an optional parameter PrintGridFlags that allows you to specify how to print thegrid such as its scaling mode and whether to display various print related dialog boxes You can also set text in headerand footer of the printed grid using this method

Following code shows how to use PrintGrid method to print the WinForms FlexGrid

Print OptionsTo set advanced printing options such as header and footer fonts page margins and page orientation you can usePrintParameter property of the C1FlexGrid class

Use the code below to print the WinForms FlexGrid with advanced print options

プレビューダイアログを表示し指定したヘッダとフッターでグリッドを印刷しますc1FlexGrid1PrintGrid(C1FlexGrid PrintGridFlagsFitToPageWidth | PrintGridFlagsShowPreviewDialog C1FlexGridtt + StringFormat(DateTimeNowToString() d) ttPage 0 of 1)

プレビューダイアログを表示し指定したヘッダとフッターでグリッドを印刷しますc1FlexGrid1PrintGrid(C1FlexGrid PrintGridFlagsFitToPageWidth Or PrintGridFlagsShowPreviewDialog C1FlexGrid amp vbTab amp vbTab amp StringFormat(DateNowToString() d) vbTab amp vbTab amp Page 0 of 1)

Customize Print Preview DialogYou can customize the print preview dialog by using PrintPreviewDialog property of the GridPrinter class Theproperty can be accessed through PrintParameter property of the C1FlexGrid class The code below uses thePrintPreviewDialog property to display a maximized preview dialog with a custom caption

Below code demonstrates how to customize the print preview dialog of the WinForms FlexGrid

グリッドのPrintDocumentオブジェクトを取得しますSystemDrawingPrintingPrintDocument pd = c1FlexGrid1PrintParametersPrintDocument

ページを設定します（横向き15 左マージン）pdDefaultPageSettingsLandscape = truepdDefaultPageSettingsMarginsLeft = 150

ヘッダとフッタのフォントを設定しますc1FlexGrid1PrintParametersHeaderFont = new Font(Arial Black 14 FontStyleBold)c1FlexGrid1PrintParametersFooterFont = new Font(Arial Narrow 8 FontStyleItalic)

グリッドのPrintDocumentオブジェクトを取得しますDim pd As DrawingPrintingPrintDocument = c1FlexGrid1PrintParametersPrintDocument

ページを設定します（横向き15 左マージン）pdDefaultPageSettingsLandscape = TruepdDefaultPageSettingsMarginsLeft = 150

ヘッダとフッタのフォントを設定しますc1FlexGrid1PrintParametersHeaderFont = New Font(Arial Black 14 FontStyleBold)c1FlexGrid1PrintParametersFooterFont = New Font(Arial Narrow 8 FontStyleItalic)

Form dlg = c1FlexGrid1PrintParametersPrintPreviewDialog as Form dlgText = Order Details dlgStartPosition = FormStartPositionCenterParent dlgWindowState = FormWindowStateMaximized c1FlexGrid1PrintGrid(Orders PrintGridFlagsShowPreviewDialog)

Dim dlg As Form = TryCast(c1FlexGrid1PrintParametersPrintPreviewDialog Form) dlgText = Order Details dlgStartPosition = FormStartPositionCenterParent dlgWindowState = FormWindowStateMaximized c1FlexGrid1PrintGrid(Orders PrintGridFlagsShowPreviewDialog)

外観とスタイル設定

FlexGrid provides built-in visual styles as well as various design time and run time options so that you can style the grid and its elements as per the needsand appearance of your application The grid also provides style editors to let you customize appearance of your grid without writing a single line of codeFor more information about these editors and design time styling see Editors

This section discusses the built-in options provided by FlexGrid as well as various other ways to customize the appearance of grid and its elements

Built-in Options Discusses about the available visual styles and built-in collection of styles

Visual StylesStyles Collection

Custom Styles Discusses how to create and apply the custom styles

Approach 1 Style an ObjectApproach 2 Create Re-usable Style

Customize Grid Discusses about customization at grid level

Set Alternate RowSet Background Image

Customize Border Discusses about customization of cell borders at row column or grid level

Customize Grid BorderCustomize RowColumn BorderCustomize Cell Border

Customize Text Discusses about various aspects of styling the grid text

Change FontSet MarginSet Vertical TextWrap TextDisplay Trimmed TextAlign TextApply Text Effect

Custom Glyphs Discusses about applying custom glyphs in the grid

組み込みオプション

Visual StylesFlexGrid provides six built-in visual styles so that you can easily customize the appearance of FlexGrid based on any ofthe Microsoft Office 2007 and 2010 themes These visual styles can be accessed through VisualStyle property ofthe C1FlexGrid class Apart from MS Office based visual styles you can also set this property to Custom and SystemWhen set to Custom the grid does not apply any visual styles and uses the grid properties for rendering When theproperty is set to System the grid renders its appearance based on current system settings

The property can be set using designer as well as through code To set the property at design time click smart tag toopen the C1FlexGrid Tasks menu and select a visual style from the VisualStyle combobox To apply visual style in theWinForms FlexGrid through code use the code below

Styles CollectionFlexGrid provides built-in collection of styles for predefined cell types and states such as normal cells fixed cellsfocused cells and so on You can use these built-in styles at design time as well as through code In design view youcan access these styles through the C1FlexGrid Style Editor which can be opened by clicking Styles option in Tasksmenu This collection of styles is represented by the CellStyleCollection class which can be accessed through Stylesproperty of the C1FlexGrid class Each built-in style is an object of the CellStyle class and holds various propertiessuch as BackColor DataType and Format

Following code shows how to use the styles from Styles collection of the WinForms FlexGrid

視覚スタイルをOffice2010Blueスキームに設定しますc1FlexGrid1VisualStyle = VisualStyleOffice2010Blue

組み込みセルスタイルNormalのプロパティを設定しますc1FlexGrid1Styles[Normal]BackColor = ColorAzurec1FlexGrid1Styles[Normal]ForeColor = ColorBlueViolet

固定セルの背景色を設定しますc1FlexGrid1Styles[Fixed]BackColor = ColorAqua

You can also add your own custom styles to Styles collection by using the Add method For more information abouthow to create and apply custom styles to grid cells see Custom Styles

組み込みセルスタイルNormalのプロパティを設定しますc1FlexGrid1Styles(Normal)BackColor = ColorAzurec1FlexGrid1Styles(Normal)ForeColor = ColorBlueViolet

固定セルの背景色を設定しますc1FlexGrid1Styles(Fixed)BackColor = ColorAqua

カスタムのスタイル

Approach 1 Style an ObjectTo style a specific row column or a cell range of the WinForms FlexGrid you can use StyleNew property of the rowcolumn or cell range object

This approach is useful for styling a particular object when style is not expected to be reused To reuse a particularstyle you must create a style using the CellStyle object as discussed in the section below

Approach 2 Create Re-usable StyleIn this approach you can create a custom style as an object of CellStyle class and add it to the Styles collection usingthe Add method Then define its properties and apply it to a row column or cell range whenever required Asmentioned above this approach is very useful when you need to repeatedly use a particular style

Use the code below to create re-usable custom styles for your WinForms FlexGrid

特定の行にカスタムスタイルを適用しますc1FlexGrid1Rows[1]StyleNewBackColor = ColorAzurec1FlexGrid1Rows[1]StyleNewForeColor = ColorBlueViolet

特定の行にカスタムスタイルを適用しますc1FlexGrid1Rows(1)StyleNewBackColor = ColorAzurec1FlexGrid1Rows(1)StyleNewForeColor = ColorBlueViolet

新しいスタイルを作成しスタイルコレクションに追加しますCellStyle cs = thisc1FlexGrid1StylesAdd(Custom) 新しいカスタムスタイルのプロパティを定義しますcsBackColor = ColorAzurecsForeColor = ColorBlueViolet

行にカスタムスタイルを適用しますc1FlexGrid1Rows[1]Style = cs

新しいスタイルを作成しスタイルコレクションに追加しますDim cs As CellStyle = Mec1FlexGrid1StylesAdd(Custom)

新しいカスタムスタイルのプロパティを定義しますcsBackColor = ColorAzurecsForeColor = ColorBlueViolet

行にカスタムスタイルを適用しますc1FlexGrid1Rows(1)Style = cs

グリッドのカスタマイズ

FlexGrid also lets you customize overall look of the grid not to just increase its aesthetic value but also increases itsreadability You can add the alternate rows which make the grid more readable Also you can set image for instance awatermark or a company logo in background of the grid

Set Alternate RowTo set the alternate row color and styles in the grid you can use the built-in style Alternate either at design time orat runtime To apply style at design time you need to access the FlexGrid Style Editor and set properties for Alternatestyle

To apply alternate row style in the WinForms FlexGrid through code you need to use the CellStyle item Alternate ofthe CellStyleCollection class and set various properties for setting the alternate style

代替行の前色を設定します c1FlexGrid1Styles[Alternate]ForeColor = ColorWhite

代替行の背景色を設定します c1FlexGrid1Styles[Alternate]BackColor = ColorCadetBlue

Set Background Image in GridTo set the background image on a grid you can use the BackgroundImage property and assign the path of the imagefile to it Another property called BackgroundImageLayout property lets you choose whether and how to renderimage on the grid

Use the code below to set the background image on the WinForms FlexGrid

代替行の前色を設定しますc1FlexGrid1Styles(Alternate)ForeColor = ColorWhite

代替行の背景色を設定しますc1FlexGrid1Styles(Alternate)BackColor = ColorCadetBlue

背景画像をグリッドに設定しますc1FlexGrid1BackgroundImage = ImageFromFile(CIMG-20190524-WA0037png)c1FlexGrid1BackgroundImageLayout = ImageLayoutStretch

境界線のカスタマイズ

The FlexGrid control lets you customize the border of grid row column and even cells by changing its style colordirection and so on

Customize Grid BorderTo customize border of the grid control you can use the BorderStyle property which accepts valuesfrom BorderStyleEnum provided by the C1WinFlexGridUtilBaseControls namespace

Following code shows how to customize border of the WinForms FlexGrid control

Customize RowColumn BorderTo customize the border style of a particular row or column you must access the Border item of CellStyle classusing StyleNew property and set its properties such as border style direction and color The grid controlprovides BorderStyleEnum as well as BorderDirEnum to set the border style and direction respectively

Use the below code to change border of rows or columns of the WinForms FlexGrid

Customize Cell BorderTo customize border of every cell in the grid you can access the built-in style Normal and set its border propertiesSimilarly you can change the style of specific types of cells such fixed or frozen by accessing their correspondingstyles from Styles collection

Below code lets you customize the border of normal cells of the WinForms FlexGrid

グリッドの境界線を3次元の境界線に変更しますc1FlexGrid1BorderStyle = C1WinC1FlexGridUtilBaseControlsBorderStyleEnumFixed3D

最初の列の境界線スタイルを設定しますc1FlexGrid1Cols[1]StyleNewBorderStyle = BorderStyleEnumGroovec1FlexGrid1Cols[1]StyleNewBorderColor = ColorRedc1FlexGrid1Cols[1]StyleNewBorderDirection = BorderDirEnumVertical

最初の行の境界線スタイルを設定しますc1FlexGrid1Rows[1]StyleNewBorderStyle = BorderStyleEnumRaisedc1FlexGrid1Rows[1]StyleNewBorderColor = ColorBlue

最初の列の境界線スタイルを設定しますc1FlexGrid1Cols(1)StyleNewBorderStyle = BorderStyleEnumGroovec1FlexGrid1Cols(1)StyleNewBorderColor = ColorRedc1FlexGrid1Cols(1)StyleNewBorderDirection = BorderDirEnumVertical

最初の行の境界線スタイルを設定しますc1FlexGrid1Rows(1)StyleNewBorderStyle = BorderStyleEnumRaisedc1FlexGrid1Rows(1)StyleNewBorderColor = ColorBlue

すべてのグリッドセルの境界線スタイルを設定しますc1FlexGrid1StylesNormalBorderStyle = BorderStyleEnumDouble

テキストのカスタマイズ

FlexGrid lets you customize text in various ways such as changing its font margin orientation alignment effects and soon This topic caters to various aspects of text styling by taking a particular row object However if you wish to use anexisting built-in style or want to create your own custom style to re-use it see the corresponding topics

Change FontTo change font of text in a particular row or column object you can use Font property of its CellStyle Following codeshows how to change font of the WinForms FlexGrid row

カスタムスタイルを特定の行に適用しますc1FlexGrid1Rows[1]StyleNewFont = new Font(verdana 10 FontStyleUnderline)c1FlexGrid1Rows[0]StyleNewFont = new Font(verdana 10 FontStyleBold)

カスタムスタイルを特定の行に適用しますc1FlexGrid1Rows(1)StyleNewFont = new Font(verdana 10 FontStyleUnderline)c1FlexGrid1Rows(0)StyleNewFont = new Font(verdana 10 FontStyleBold)

However if you want to change font of the whole grid you can set Font property of the C1FlexGrid class Followingcode shows how to change font of the entire WinForms FlexGrid

Set MarginTo set margin on text of a particular row or column you can set Margins property of the CellStyle Use the code belowto change margins in WinForms FlexGrid row

Set Vertical TextTo change the orientation and display a text as vertical text you can set TextDirection property of CellStyle of theobject Also to display the vertical text properly you may have to adjust height of the target cells depending upon thetext length Below code lets you set vertical text in the WinForms FlexGrid row

Wrap TextTo wrap a text which is longer than the available cell width you can set the WordWrap property of its CellStyle to trueFollowing code demonstrates how to apply text wrap in the WinForms FlexGrid row

グリッドの内容全体のフォントを変更しますc1FlexGrid1Font = new Font(verdana 10 FontStyleItalic)

グリッドの内容全体のフォントを変更しますc1FlexGrid1Font = New Font(verdana 10 FontStyleItalic)

右側のマージンを設定しますc1FlexGrid1Rows[1]StyleNewMarginsRight = 10

右側のマージンを設定しますc1FlexGrid1Rows(1)StyleNewMarginsRight = 10

行の内容のテキスト方向を設定しますc1FlexGrid1Rows[1]StyleNewTextDirection = TextDirectionEnumDown 行の高さを設定して垂直方向のテキストを表示しますc1FlexGrid1Rows[1]Height = 60

行の内容のテキスト方向を設定しますc1FlexGrid1Rows(1)StyleNewTextDirection = TextDirectionEnumDown

行の高さを設定して垂直方向のテキストを表示しますc1FlexGrid1Rows(1)Height = 60

Display Trimmed TextTo display trimmed text when text is longer than the cell width set Trimming property of the style which takes its valuesfrom StringTrimming enumeration Use the code below to trim the long text to display ellipsis character in theWinForms FlexGrid row

Align TextYou can set the text alignment or position of the text with respect to cell by using the TextAlign property The propertyaccepts values from the TextAlignEnum enumeration

Use the code below to apply text alignment on the WinForms FlexGrid row

Apply Text EffectTo set various effects on the text you can use the TextEffect property which accepts its values from TextEffectEnumenumeration

Apply text on the WinForms FlexGrid row using the following code

セルの幅に応じて特定の行のテキストを折り返しますc1FlexGrid1Rows[1]StyleNewWordWrap = true

セルの幅に応じて特定の行のテキストを折り返しますc1FlexGrid1Rows(1)StyleNewWordWrap = True

長いテキストをトリミングして最後に省略記号を表示しますc1FlexGrid1Rows[1]StyleNewTrimming = StringTrimmingEllipsisCharacter

長いテキストをトリミングして最後に省略記号を表示しますc1FlexGrid1Rows(1)StyleNewTrimming = StringTrimmingEllipsisCharacter

テキストの配置を設定しますc1FlexGrid1Rows[1]StyleNewTextAlign = TextAlignEnumLeftCenter

テキストの配置を設定しますc1FlexGrid1Rows(1)StyleNewTextAlign = TextAlignEnumLeftCenter

上げ表示するテキストを設定しますc1FlexGrid1Rows[1]StyleNewTextEffect = TextEffectEnumRaised

上げ表示するテキストを設定します c1FlexGrid1Rows(1)StyleNewTextAlign = TextAlignEnumLeftCenter

カスタムのグリフ

FlexGrid lets you change the default glyph images used in the grid to indicate various actions such as column filteringand sorting This behavior of grid is exposed through GridGlyphs class which is a collection of images used by the gridto represent filtered state sorting order checkbox states and so on These images can be accessed through Glyphsproperty of the C1FlexGrid class which accepts values from GlyphEnum enumeration

Change the default glyphs used for filter editor and filtered column in the WinForms FlexGrid to a custom image usingthe code below

Note that setting this property to null restores the default glyph In order to hide a glyph you can set the Glyphproperty to a blank image

フィルタアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs[GlyphEnumFilterEditor] = ImageFromFile(custom-filter-iconpng)

フィルタアイコンのグリフをカスタマイズしますc1FlexGrid1Glyphs(GlyphEnumFilterEditor) = ImageFromFile(custom-filter-iconpng)

永続的な状態

Grid persistence refers to saving the current state of the grid for later use and then restoring it back when needed Forinstance the user may apply grouping sorting filtering or some styling to the grid which he wants to use after fewmore operations or on opening the application again This behavior can be achieved by persisting the grids state

There are two steps to implement persistence of the grid state First we have to serialize the grid state and then werestore it In this topic we discuss how to persist the filtered sorted and grouped state of the FlexGrid control

You can implement persisting grid states by using XMLWriter and XMLReader class of the SystemXML namespace Tosave the grid state you can use the WriteStartElement method to write the specified start tag andWriteAttributeString method to write the filter sort and group attributes Finally call WriteEndElement method toclose the WriteStartElement method and save the state in the form of stream string or a file

Use the code below to serialize the state of WinForms FlexGrid to an XML file for later use

フィルタグループ並べ替えの定義をファイルに書き込みますprivate void WriteStateToXML(string filePath) using (XmlWriter writer = XmlWriterCreate(filePath)) writerWriteStartElement(FlexGrid) writerWriteStartElement(Definition ) writerWriteAttributeString(Filter flexGridFilterDefinition) writerWriteAttributeString(Sort flexGridSortDefinition) writerWriteAttributeString(Group flexGridGroupDefinition) writerWriteEndElement() writerWriteEndElement() writerFlush()

フィルタグループ並べ替えの定義をファイルに書き込みますPrivate Sub WriteStateToXML(ByVal filePath As String)

To load the saved state back into the grid you can use the GetAttribute method of the object to read the filter sortand group attributes Then assign them to the FilterDefinition SortDefinition or GroupDefinition properties of theFlexGrid respectively

Use the code below to load saved state of the WinForms FlexGrid

Using writer = XmlWriterCreate(filePath) writerWriteStartElement(FlexGrid) writerWriteStartElement(Definition ) writerWriteAttributeString(Filter flexGridFilterDefinition) writerWriteAttributeString(Sort flexGridSortDefinition) writerWriteAttributeString(Group flexGridGroupDefinition) writerWriteEndElement() writerWriteEndElement() writerFlush() End UsingEnd Sub

保存したファイルからフィルタ並べ替えグループの定義を読み取りFlexGridに適用しますprivate void ReadStateXML(string filePath)

using (XmlReader reader = XmlReaderCreate(filePath)) readerReadToFollowing(Definition) flexGridSortDefinition = readerGetAttribute(Sort) flexGridFilterDefinition = readerGetAttribute(Filter) flexGridGroupDefinition = readerGetAttribute(Group) readerClose()

保存したファイルからフィルタ並べ替えグループの定義を読み取りFlexGridに適用しますPrivate Sub ReadStateXML(ByVal filePath As String) Using reader = XmlReaderCreate(filePath) readerReadToFollowing(Definition) flexGridSortDefinition = readerGetAttribute(Sort) flexGridFilterDefinition = readerGetAttribute(Filter) flexGridGroupDefinition = readerGetAttribute(Group) readerClose() End Using

NET 5 リファレンス

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態



FlexGrid for WinForms 4

主な特長 5-6

機能比較 7

FlexGrid の比較 7-9

WinFormsグリッドの比較 9-12

クイックスタート 13-19

設計時サポート 20

タスクメニュー 20-23

エディタ 23-26

データ 27

非連結モード 27

連結モード 27-30

連結モードでの操作 30-35

列 36

基本操作 36-39

エディタ 45-48

チェックボックス 48-50

数値 50-52

日付 52-56

コンボボックス 56-62

マスク 62-63

マップリスト 63-65

セルボタン 65-67

検証 67-70

データ注釈 70-72

スパークライン 72-73

ヘッダとフッタ 73-76

行 79

基本操作 79-83

ヘッダ 85-88

行の詳細 88-93

セル 96

基本操作 96-99

グリッド 105

基本操作 105-107

選択 117-119

編集 120

編集モード 120-121

並べ替え 123

フィルタ 128

検索 142-143

マージ 144

自動マージ 144-147

グループ 152-155

集計 156-159

保存 193-195

ロード 195-197

印刷 197-199

Documentation Blogs

Filter Grid Data

Create Groups

Create a Tree Grid

Videos Demo Samples

API Reference

主な特長

Make it a Tree

Grouping

Instant Search

Merge Cells

Show Sparklines

Integrated Printing

Styling

機能比較

Topic Content

ComparingFlexGrids

FlexGrid の比較

Dim r c c = 1

c1FlexGrid1Rows - 1

DebugPrint

Dim r c c = 1

10 10)

= theImage

Dim rg As CellRange

rgImage = theImage

GetType(Integer)

integer

Create a cell style

c1FlexGrid1Styles

Demerit

Add(Red)

redStyle

= ColorWhite

new Font(Arial 9)

Data Binding

With custom code

Data Presentation

MultiLine Data View

Grouping

Data Exchange

Cell Manipulations

In-Cell Objects

Zooming Cells

Run-Time CellTips

Layout and Styling

Input Masking

Simplify Data Input

Touch Support

Clipboard support

Data Manipulations

Sorting

AutoSearch

Range Aggregates

Localization

Other Features

SystemWindowsForms

NET 452

Binding at Run Time

Option Description

ChooseDataSource

EnableAddingRows

EnableDeletingRows

EnableEditing

Option Description

ColumnCaption

DataField

DataType

EditMask

FormatString

ComboList

エディタ

データ

非連結モード

連結モード

BasicOperations

UserInteraction

Header andFooter

基本操作

ユーザー操作

Option Description

Column

Option Description

エディタ

Built-inEditor

typeof(Boolean)

Boolean

typeof(Int32)

typeof(DateTime)

(999) 999-9999

Mappedlist

ListDictionary()

Anders)

Hussain)

Romanov)

Nguyen)

customerNames

At Design Time

At Run Time

数値

At Design Time

At Run Time

At Design Time

At Run Time

日付

property

マスク

マップリスト

セルボタン

検証

データ注釈

Validation

サイズ変更

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作

Dim cs As CellStyle

グリッド

基本操作

Non-edit Mode

larr rarr

Ctrl + C

Ctrl + X

Ctrl + V

Edit Mode

選択

Example Title

SelectionModesEnum

ListBox)

Example Title

編集

Topic Content

編集モード

Event Description

編集の無効化

並べ替え

フィルタ

Header-based Filter

Filter Row

Value Description

StringFiltercs

End Class

フィルタUI

Show Filter Icon

検索

マージ

自動マージ

グループ

集計

r += 1

If True Then

r += 1

c += 1

If True Then

ノードの操作

flexFocus()End Sub

データの操作

Catch End Try

Delete DEL

Topic Content

保存

ロード

印刷

永続的な状態

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態



ヘッダ 85-88

行の詳細 88-93

セル 96

基本操作 96-99

グリッド 105

基本操作 105-107

選択 117-119

編集 120

編集モード 120-121

並べ替え 123

フィルタ 128

検索 142-143

マージ 144

自動マージ 144-147

グループ 152-155

集計 156-159

保存 193-195

ロード 195-197

印刷 197-199

Documentation Blogs

Filter Grid Data

Create Groups

Create a Tree Grid

Videos Demo Samples

API Reference

主な特長

Make it a Tree

Grouping

Instant Search

Merge Cells

Show Sparklines

Integrated Printing

Styling

機能比較

Topic Content

ComparingFlexGrids

FlexGrid の比較

Dim r c c = 1

c1FlexGrid1Rows - 1

DebugPrint

Dim r c c = 1

10 10)

= theImage

Dim rg As CellRange

rgImage = theImage

GetType(Integer)

integer

Create a cell style

c1FlexGrid1Styles

Demerit

Add(Red)

redStyle

= ColorWhite

new Font(Arial 9)

Data Binding

With custom code

Data Presentation

MultiLine Data View

Grouping

Data Exchange

Cell Manipulations

In-Cell Objects

Zooming Cells

Run-Time CellTips

Layout and Styling

Input Masking

Simplify Data Input

Touch Support

Clipboard support

Data Manipulations

Sorting

AutoSearch

Range Aggregates

Localization

Other Features

SystemWindowsForms

NET 452

Binding at Run Time

Option Description

ChooseDataSource

EnableAddingRows

EnableDeletingRows

EnableEditing

Option Description

ColumnCaption

DataField

DataType

EditMask

FormatString

ComboList

エディタ

データ

非連結モード

連結モード

BasicOperations

UserInteraction

Header andFooter

基本操作

ユーザー操作

Option Description

Column

Option Description

エディタ

Built-inEditor

typeof(Boolean)

Boolean

typeof(Int32)

typeof(DateTime)

(999) 999-9999

Mappedlist

ListDictionary()

Anders)

Hussain)

Romanov)

Nguyen)

customerNames

At Design Time

At Run Time

数値

At Design Time

At Run Time

At Design Time

At Run Time

日付

property

マスク

マップリスト

セルボタン

検証

データ注釈

Validation

サイズ変更

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作

Dim cs As CellStyle

グリッド

基本操作

Non-edit Mode

larr rarr

Ctrl + C

Ctrl + X

Ctrl + V

Edit Mode

選択

Example Title

SelectionModesEnum

ListBox)

Example Title

編集

Topic Content

編集モード

Event Description

編集の無効化

並べ替え

フィルタ

Header-based Filter

Filter Row

Value Description

StringFiltercs

End Class

フィルタUI

Show Filter Icon

検索

マージ

自動マージ

グループ

集計

r += 1

If True Then

r += 1

c += 1

If True Then

ノードの操作

flexFocus()End Sub

データの操作

Catch End Try

Delete DEL

Topic Content

保存

ロード

印刷

永続的な状態

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態



保存 193-195

ロード 195-197

印刷 197-199

Documentation Blogs

Filter Grid Data

Create Groups

Create a Tree Grid

Videos Demo Samples

API Reference

主な特長

Make it a Tree

Grouping

Instant Search

Merge Cells

Show Sparklines

Integrated Printing

Styling

機能比較

Topic Content

ComparingFlexGrids

FlexGrid の比較

Dim r c c = 1

c1FlexGrid1Rows - 1

DebugPrint

Dim r c c = 1

10 10)

= theImage

Dim rg As CellRange

rgImage = theImage

GetType(Integer)

integer

Create a cell style

c1FlexGrid1Styles

Demerit

Add(Red)

redStyle

= ColorWhite

new Font(Arial 9)

Data Binding

With custom code

Data Presentation

MultiLine Data View

Grouping

Data Exchange

Cell Manipulations

In-Cell Objects

Zooming Cells

Run-Time CellTips

Layout and Styling

Input Masking

Simplify Data Input

Touch Support

Clipboard support

Data Manipulations

Sorting

AutoSearch

Range Aggregates

Localization

Other Features

SystemWindowsForms

NET 452

Binding at Run Time

Option Description

ChooseDataSource

EnableAddingRows

EnableDeletingRows

EnableEditing

Option Description

ColumnCaption

DataField

DataType

EditMask

FormatString

ComboList

エディタ

データ

非連結モード

連結モード

BasicOperations

UserInteraction

Header andFooter

基本操作

ユーザー操作

Option Description

Column

Option Description

エディタ

Built-inEditor

typeof(Boolean)

Boolean

typeof(Int32)

typeof(DateTime)

(999) 999-9999

Mappedlist

ListDictionary()

Anders)

Hussain)

Romanov)

Nguyen)

customerNames

At Design Time

At Run Time

数値

At Design Time

At Run Time

At Design Time

At Run Time

日付

property

マスク

マップリスト

セルボタン

検証

データ注釈

Validation

サイズ変更

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作

Dim cs As CellStyle

グリッド

基本操作

Non-edit Mode

larr rarr

Ctrl + C

Ctrl + X

Ctrl + V

Edit Mode

選択

Example Title

SelectionModesEnum

ListBox)

Example Title

編集

Topic Content

編集モード

Event Description

編集の無効化

並べ替え

フィルタ

Header-based Filter

Filter Row

Value Description

StringFiltercs

End Class

フィルタUI

Show Filter Icon

検索

マージ

自動マージ

グループ

集計

r += 1

If True Then

r += 1

c += 1

If True Then

ノードの操作

flexFocus()End Sub

データの操作

Catch End Try

Delete DEL

Topic Content

保存

ロード

印刷

永続的な状態

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態



Documentation Blogs

Filter Grid Data

Create Groups

Create a Tree Grid

Videos Demo Samples

API Reference

主な特長

Make it a Tree

Grouping

Instant Search

Merge Cells

Show Sparklines

Integrated Printing

Styling

機能比較

Topic Content

ComparingFlexGrids

FlexGrid の比較

Dim r c c = 1

c1FlexGrid1Rows - 1

DebugPrint

Dim r c c = 1

10 10)

= theImage

Dim rg As CellRange

rgImage = theImage

GetType(Integer)

integer

Create a cell style

c1FlexGrid1Styles

Demerit

Add(Red)

redStyle

= ColorWhite

new Font(Arial 9)

Data Binding

With custom code

Data Presentation

MultiLine Data View

Grouping

Data Exchange

Cell Manipulations

In-Cell Objects

Zooming Cells

Run-Time CellTips

Layout and Styling

Input Masking

Simplify Data Input

Touch Support

Clipboard support

Data Manipulations

Sorting

AutoSearch

Range Aggregates

Localization

Other Features

SystemWindowsForms

NET 452

Binding at Run Time

Option Description

ChooseDataSource

EnableAddingRows

EnableDeletingRows

EnableEditing

Option Description

ColumnCaption

DataField

DataType

EditMask

FormatString

ComboList

エディタ

データ

非連結モード

連結モード

BasicOperations

UserInteraction

Header andFooter

基本操作

ユーザー操作

Option Description

Column

Option Description

エディタ

Built-inEditor

typeof(Boolean)

Boolean

typeof(Int32)

typeof(DateTime)

(999) 999-9999

Mappedlist

ListDictionary()

Anders)

Hussain)

Romanov)

Nguyen)

customerNames

At Design Time

At Run Time

数値

At Design Time

At Run Time

At Design Time

At Run Time

日付

property

マスク

マップリスト

セルボタン

検証

データ注釈

Validation

サイズ変更

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作

Dim cs As CellStyle

グリッド

基本操作

Non-edit Mode

larr rarr

Ctrl + C

Ctrl + X

Ctrl + V

Edit Mode

選択

Example Title

SelectionModesEnum

ListBox)

Example Title

編集

Topic Content

編集モード

Event Description

編集の無効化

並べ替え

フィルタ

Header-based Filter

Filter Row

Value Description

StringFiltercs

End Class

フィルタUI

Show Filter Icon

検索

マージ

自動マージ

グループ

集計

r += 1

If True Then

r += 1

c += 1

If True Then

ノードの操作

flexFocus()End Sub

データの操作

Catch End Try

Delete DEL

Topic Content

保存

ロード

印刷

永続的な状態

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態



主な特長

Make it a Tree

Grouping

Instant Search

Merge Cells

Show Sparklines

Integrated Printing

Styling

機能比較

Topic Content

ComparingFlexGrids

FlexGrid の比較

Dim r c c = 1

c1FlexGrid1Rows - 1

DebugPrint

Dim r c c = 1

10 10)

= theImage

Dim rg As CellRange

rgImage = theImage

GetType(Integer)

integer

Create a cell style

c1FlexGrid1Styles

Demerit

Add(Red)

redStyle

= ColorWhite

new Font(Arial 9)

Data Binding

With custom code

Data Presentation

MultiLine Data View

Grouping

Data Exchange

Cell Manipulations

In-Cell Objects

Zooming Cells

Run-Time CellTips

Layout and Styling

Input Masking

Simplify Data Input

Touch Support

Clipboard support

Data Manipulations

Sorting

AutoSearch

Range Aggregates

Localization

Other Features

SystemWindowsForms

NET 452

Binding at Run Time

Option Description

ChooseDataSource

EnableAddingRows

EnableDeletingRows

EnableEditing

Option Description

ColumnCaption

DataField

DataType

EditMask

FormatString

ComboList

エディタ

データ

非連結モード

連結モード

BasicOperations

UserInteraction

Header andFooter

基本操作

ユーザー操作

Option Description

Column

Option Description

エディタ

Built-inEditor

typeof(Boolean)

Boolean

typeof(Int32)

typeof(DateTime)

(999) 999-9999

Mappedlist

ListDictionary()

Anders)

Hussain)

Romanov)

Nguyen)

customerNames

At Design Time

At Run Time

数値

At Design Time

At Run Time

At Design Time

At Run Time

日付

property

マスク

マップリスト

セルボタン

検証

データ注釈

Validation

サイズ変更

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作

Dim cs As CellStyle

グリッド

基本操作

Non-edit Mode

larr rarr

Ctrl + C

Ctrl + X

Ctrl + V

Edit Mode

選択

Example Title

SelectionModesEnum

ListBox)

Example Title

編集

Topic Content

編集モード

Event Description

編集の無効化

並べ替え

フィルタ

Header-based Filter

Filter Row

Value Description

StringFiltercs

End Class

フィルタUI

Show Filter Icon

検索

マージ

自動マージ

グループ

集計

r += 1

If True Then

r += 1

c += 1

If True Then

ノードの操作

flexFocus()End Sub

データの操作

Catch End Try

Delete DEL

Topic Content

保存

ロード

印刷

永続的な状態

主な特長

機能比較

FlexGrid の比較





エディタ

データ

非連結モード

連結モード


列

基本操作

ユーザー操作

エディタ


数値

日付


マスク

マップリスト

セルボタン

検証

データ注釈



サイズ変更

行

基本操作

ユーザー操作

ヘッダ

行の詳細

サイズ変更

セル

基本操作


グリッド

基本操作




選択

編集

編集モード

編集の無効化

並べ替え



フィルタ



フィルタUI

検索

マージ

自動マージ



グループ

集計


ノードの操作

データの操作




保存

ロード

印刷








永続的な状態

