multiselect for winformshelp.grapecity.com › componentone › pdf › winforms ›...

28
ComponentOne MultiSelect for WinForms

Upload: others

Post on 30-May-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

ComponentOne

MultiSelect for WinForms

Page 2: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

GrapeCity US

GrapeCity201 South Highland Avenue, Suite 301Pittsburgh, PA 15206Tel: 1.800.858.2739 | 412.681.4343Fax: 412.681.4384Website: https://www.grapecity.com/en/E-mail: [email protected]

Trademarks

The ComponentOne product name is a trademark and ComponentOne is a registered trademark of GrapeCity, Inc. Allother trademarks used herein are the properties of their respective owners.

Warranty

ComponentOne warrants that the media on which the software is delivered is free from defects in material andworkmanship, assuming normal use, for a period of 90 days from the date of purchase. If a defect occurs during thistime, you may return the defective media to ComponentOne, along with a dated proof of purchase, andComponentOne will replace it at no charge. After 90 days, you can obtain a replacement for the defective media bysending it and a check for $25 (to cover postage and handling) to ComponentOne.

Except for the express warranty of the original media on which the software is delivered is set forth here,ComponentOne makes no other warranties, express or implied. Every attempt has been made to ensure that theinformation contained in this manual is correct as of the time it was written. ComponentOne is not responsible for anyerrors or omissions. ComponentOne’s liability is limited to the amount you paid for the product. ComponentOne isnot liable for any special, consequential, or other damages for any reason.

Copying and Distribution

While you are welcome to make backup copies of the software for your own use and protection, you are notpermitted to make copies for the use of anyone else. We put a lot of time and effort into creating this product, and weappreciate your support in seeing that it is used by licensed users only.

Page 3: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Table of ContentsMultiSelect for WinForms 2

Help with WinForms Edition 2

Redistributable Files 2

Key Features 3

Elements 4-5

Quick Start 6-7

Use MultiSelect Control 8-11

Data Binding 12

Bind MultiSelect to a Data Source 12-13

Bind MultiSelect to Object Collection 13-16

MultiSelect in Unbound Mode 16-17

Features 18

Appearance 18-20

Auto Complete Mode 21

Display Mode 21-22

Multi-Selection Mode 22-23

Selection 23-24

Tag Appearance 24-25

Tag Wrap 25-26

MultiSelect for WinForms 1

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 4: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

MultiSelect for WinFormsMultiSelect for WinForms is a control that provides the ease of selecting multiple objects from a list or a collectionof selected items. It comprises two elements, C1TagEditor and C1CheckList, which can be used as stand-alone controlsas well. Flexible C1TagEditor gives you an option to display the selected items either as strings or as tags so that youcan easily give your application an Office365 Outlook-like interface. Not just this, this control is smart enough todisplay the summarized text or tag instead of all selected items if the count goes beyond a specified limit. Moreover,C1CheckList element of the MultiSelect control allows you to highlight your selection as a checklist or as a simple listof items. Above all, the control also supports data binding with TagDataSource and DataSource apart from theunbound mode.

Help with WinForms EditionFor information on installing ComponentOne Studio WinForms Edition, licensing, theming, technical support,namespaces and creating a project with the control, please visit Getting Started with WinForms Edition.

Redistributable FilesMultiSelect for WinForms is developed and published by GrapeCity, Inc. You may use it to develop applications inconjunction with the Microsoft Visual Studio or any other programming environment that enables the user to use andintegrate the control(s). You may also distribute, free of royalties, the following Redistributable Files with any suchapplication you develop to the extent that they are used separately on a single CPU on the client/workstation side ofthe network.

The following assemblies get referenced automatically on adding MultiSelect control to the Form.

C1.Win.4.dllC1.Win.C1Input.4.dllC1.Win.TreeView.4.dll

Site licenses are available for groups of multiple developers. Please contact [email protected] for details.

MultiSelect for WinForms 2

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 5: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Key FeaturesEffortless SelectionMultiSelect allows you to select specific or all items from a defined list of items, which are displayed in thecontrol header post selection. It provides you control over selection of items through Single, Multiple,Extended modes which define how items in the list can be selected. MultiSelect also allows you to accessselected items from the list which further can be used as data source for any other control to display items asper the requirement.

Add/Remove ItemsMultiSelect allows you to add and remove items from the list through code or directly from the control header.

Smart HeaderMultiSelect allows you to control the number of items to be displayed in header. The control header displaysselected items if the number of selected items is less than or equal to the value set for the MaxHeaderItemsproperty and if number of selected items is greater than MaxHeaderItems the header displays the count ofselected items.

Edit ModeMultiSelect supports text input which makes the selected tags editable in both the appearances – commaseparated strings and tags. To change an item, you can simply double click on it to edit.

Bind to DataSourceMultiSelect can be bound to two different data sources, TagsDataSource and DataSource. TagsDataSource canbe used if the application author wants to propagate end-user selection to some other data source, probablywith other data structure than the first one. On the other hand, DataSource is used to fill the list of all availableitems that are shown in dropdown checklist.

MultiSelect for WinForms 3

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 6: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

ElementsThe MultiSelect control mainly consists of two elements which are available in C1.Win.Input.C1MultiSelect.dll andcan be used as stand-alone controls as well.

C1CheckListC1TagEditor

C1CheckList

The C1CheckList control, instantiated using C1Checklist class, displays a collection of items in a static list, and allowsuser to select desired items from a defined list. For example, C1CheckList can be used to display a list of skills in a CVform on a job portal as shown in the following image.

To understand implementation of the control, refer CVForm sample available at the default installation folder.Documents\ComponentOne Samples\WinForms\MultiSelect

C1TagEditor

The C1TagEditor control, instantiated using C1TagEditor class, provides the user with a textbox area where each tag

MultiSelect for WinForms 4

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 7: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

behaves as an individual entry which can be inserted, edited, and removed individually. For example, C1TagEditor canbe used to enter the name of all the previous workplaces in a CV form on a job portal. These names are added in thecontrol as individual tags which can be edited or removed later.

MultiSelect for WinForms 5

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 8: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Quick StartThis quick start will guide you through the steps of adding C1MultiSelect to a project and binding the control to adata source.

Complete the steps given below to see how the MultiSelect control appears after data binding.

1. Adding MultiSelect control to the Application2. Binding MultiSelect to a DataSet

The following image shows how the MultiSelect control appears after data binding.

Step 1: Adding MultiSelect control to the Application

1. Create a new Windows Forms App in Visual Studio.2. Drag and Drop the C1MultiSelect control from the toolbox onto the form. The C1MultiSelect control is added

to the form.

Step 2: Binding MultiSelect to a DataSet

1. In Properties window, navigate to the DataSource attribute in the BindingInfo property.2. Click Add Project Data Source to open the Data Source Configuration Wizard. The Data Source

Configuration Wizard appears with a database selected as a data source.3. Click Next to select a database model.4. Click the New Connection button to locate and connect to a database. The Add Connection dialog box

opens.5. Click the Browse button and locate the C1NWind.mdb file. Select it and click Open.6. Click the Test Connection button to make sure that you have successfully connected to the database or server

and click OK in the dialog window confirming the connection succeeded.7. Click OK to close the Add Connection dialog box and return to the Data Source Configuration Wizard. The

new string appears in the data connection drop-down box.8. Click the Next button to continue. A dialog box appears asking if you would like to add the data file to your

project and modify the connection string. Click No.9. In the Choose Your Database Objects window, you can select the tables and fields that you would like in your

dataset. We have selected the Customer table, the fields within the Customer table should all be selected aswell.

10. Click Finish to exit the wizard. The dataset, binding source and table adapter now appear on your form.11. Switch to the code view to see that the following code is added to the Form_Load event:

this.customerTableAdapter.Fill(this.c1NWindDataSet.Customer);12. Switch back to the design view and navigate to the Properties window.13. In BindingInfo property, set DisplayMemberPath attribute to FirstName. Observe that the

MultiSelect for WinForms 6

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 9: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

DataSource attribute is set to customerBindingSource. 14. Run the application to display all customer names from Customer table in C1MultiSelect control list.

MultiSelect for WinForms 7

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 10: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Use MultiSelect ControlMultiSelect allows you to add, remove, and access specific items with minimal code. It also lets you display or hide thecheck boxes and dropdown button appearing in the control. Learn how they can be implemented.

Add an itemRemove an itemAccess specific itemShow/Hide check boxesShow/Hide dropdown button

Add an item

To add items to the MultiSelect control, use Add method of C1CheckListItemCollection as shown in the followingcode. For example, the following code adds “Edward” in dropdown list of the MultiSelect control:

C1MultiSelect1.Items.Add("Edward")

c1MultiSelect1.Items.Add("Edward");

MultiSelect also allows you to add an item at a specific position using Insert method of C1CheckListItemCollectionand specify an index value for the new item in it. For example, the following code inserts a name, Robert, to the fifthposition, adjusting the position of the other items in the dropdown list:

C1MultiSelect1.Items.Insert(4, "Robert")

c1MultiSelect1.Items.Insert(4, "Robert");

Back to Top

Remove an item

MultiSelect lets you delete an item from the list using RemoveAt method of C1CheckListItemCollection as shown inthe following code. The method takes one argument, index, which specifies the item to remove. For example, thefollowing code deletes sixth entry from the list.

VB

C#

VB

C#

VB

MultiSelect for WinForms 8

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 11: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

C1MultiSelect1.Items.RemoveAt(5)

c1MultiSelect1.Items.RemoveAt(5);

MultiSelect also allows you to delete a selected item from the MultiSelect control using Remove method as shown inthe following code:

C1MultiSelect1.Items.Remove(C1MultiSelect1.SelectedItem)

c1MultiSelect1.Items.Remove(c1MultiSelect1.SelectedItem);

To remove all the entries from the list, use Clear method of C1CheckListItemCollection as shown in the followingcode:

C1MultiSelect1.Items.Clear()

c1MultiSelect1.Items.Clear();

Back to Top

Access specific item

To access a specific item from the MultiSelect control dropdown list, use Items property of C1MultiSelect class andspecify the index of that item. Furthermore, you can change the value of an item in the list using Value property ofthe C1CheckListItem class. For example, to access and change the value of third item from the list, write the followingline of code:

VB

C#

VB

C#

VB

C#

VB

MultiSelect for WinForms 9

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 12: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

C1MultiSelect1.Items[2].Value = "Jake"

c1MultiSelect1.Items[2].Value = "Jake";

Back to Top

Show/Hide check boxes

By default, list of items in the MultiSelect control are displayed with check boxes. However, you can disable the defaultstyle by setting ShowCheckBoxes property to false.

To hide the check boxes from the list, use the following code:

C1MultiSelect1.ShowCheckBoxes = False

c1MultiSelect1.ShowCheckBoxes = false;

Back to Top

Show/Hide dropdown button

MultiSelect displays the dropdown button to show the list of available items. However, you can hide the dropdownbutton in the control by setting ShowDropDownButton property to false.

To hide the drop down button, use the following code:

VB

C#

VB

C#

MultiSelect for WinForms 10

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 13: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

C1MultiSelect1.ShowDropDownButton = False

c1MultiSelect1.ShowDropDownButton = false;

Back to Top

VB

C#

MultiSelect for WinForms 11

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 14: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Data BindingMultiSelect provides data binding support that lets you populate data in the control. It allows you to bind the controlto complex objects and data sources. To bind MultiSelect to a data source, you need to access the BindingInfoproperty of the control. This property contains information about data source and other data binding options. TheBindingInfo property contains all the important attributes for binding which are DataMember, DataSource,CheckedMemberPath, DisabledMemberPath, DisplayMemberPath, TagsDataSource, and TagsMemberPath. To bindthe MultiSelect control, you need to assign the DisplayMemberPath property of object or data source.

You can bind MultiSelect using any of the following ways:

Bind MultiSelect to a data sourceLearn how to bind MultiSelect to a data source in code.

Bind MultiSelect to object collectionLearn how to bind MultiSelect to object collection in code.

MultiSelect in unbound modeLearn how to implement MultiSelect in unbound mode through code.

Bind MultiSelect to a Data SourceTo bind MultiSelect to a data source, follow these steps:

1. Create a connection string and fetch data from a database to a data set.

Private Shared Function GetConnectionString() As String Dim conn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Users\...\Common\C1NWind.mdb;" Return String.Format(conn)End Function

Private Function GetDataSource(ByVal connectionString As String) As DataTable 'set up connection string Dim conn As String = GetConnectionString()

'set up SQL statement Dim rs As String = connectionString

'retrieve data into DataSet Dim da As OleDbDataAdapter = New OleDbDataAdapter(rs, conn) Dim ds As DataSet = New DataSet() da.Fill(ds)

'return data table Return ds.Tables(0)

End Function

static string GetConnectionString()

VB

C#

MultiSelect for WinForms 12

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 15: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

{ string conn = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\Users\...\Common\C1NWind.mdb;"; return string.Format(conn);}DataTable GetDataSource(string connectionString){ // set up connection string string conn = GetConnectionString();

// set up SQL statement string rs = connectionString;

// retrieve data into DataSet OleDbDataAdapter da = new OleDbDataAdapter(rs, conn); DataSet ds = new DataSet(); da.Fill(ds);

// return data table return ds.Tables[0];}

2. Set the DataSource and DisplayMemberPath properties of the MultiSelect control.

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load C1MultiSelect1.BindingInfo.DataSource = GetDataSource("Select * from Employees ") C1MultiSelect1.BindingInfo.DataMember = "EmployeeID" C1MultiSelect1.BindingInfo.DisplayMemberPath = "FirstName"End Sub

private void Form1_Load(object sender, EventArgs e){ c1MultiSelect1.BindingInfo.DataSource = GetDataSource("Select * from Employees "); c1MultiSelect1.BindingInfo.DisplayMemberPath = "FirstName";}

VB

C#

Bind MultiSelect to Object CollectionYou can bind MultiSelect to a list of complex data objects which can have multiple properties. To bind the control to alist of data objects, follow these steps:

1. Create a class named Customer using the following code.

Public Class Customer

VB

MultiSelect for WinForms 13

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 16: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Private name As String

Private customerID As String

Private mobile As String

Private email As String

Public Sub New(ByVal _name As String, ByVal _custId As String, ByVal _mobile As String, ByVal _email As String) Me.name = _name Me.customerID = _custId Me.mobile = _mobile Me.email = _email End Sub

Public Property Name As String Get Return name End Get End Property

Public Property CustomerID As String Get Return customerID End Get End Property

Public Property Mobile As String Get Return mobile End Get End Property

Public Property Email As String Get Return email End Get End PropertyEnd Class

public class Customer{ string name; string customerID; string mobile; string email; public Customer(string _name, string _custId, string _mobile, string _email) {

C#

MultiSelect for WinForms 14

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 17: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

this.name = _name; this.customerID = _custId; this.mobile = _mobile; this.email = _email; }

public string Name { get { return name; } } public string CustomerID { get { return customerID; } } public string Mobile { get { return mobile; } } public string Email { get { return email; } }}

2. Add objects of Customer class to a BindingList and set C1MultiSelect’s DataSource and DisplayMemberPathproperties at Form_Load event.

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Dim customers As BindingList(Of Customer) = New BindingList(Of Customer)() customers.Add(New Customer("John", "C001", "8888832141", "[email protected]")) customers.Add(New Customer("Alex", "C002", "8888832142", "@gmail.com")) customers.Add(New Customer("Shawn", "C003", "8888832143", "[email protected]")) customers.Add(New Customer("Sam", "C004", "8888832144", "[email protected]")) customers.Add(New Customer("Neo", "C005", "8888832145",

VB

MultiSelect for WinForms 15

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 18: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

"[email protected]")) customers.Add(New Customer("Paul", "C006", "8888832146", "[email protected]")) c1MultiSelect1.BindingInfo.DataSource = customers c1MultiSelect1.BindingInfo.DisplayMemberPath = "Name"End Sub

private void Form1_Load(object sender, EventArgs e){ BindingList<Customer> customers = new BindingList<Customer>(); customers.Add(new Customer("John", "C001", "8888832141","[email protected]")); customers.Add(new Customer("Alex", "C002", "8888832142", "@gmail.com")); customers.Add(new Customer("Shawn", "C003", "8888832143", "[email protected]")); customers.Add(new Customer("Sam", "C004", "8888832144", "[email protected]")); customers.Add(new Customer("Neo", "C005", "8888832145", "[email protected]")); customers.Add(new Customer("Paul", "C006", "8888832146", "[email protected]"));

c1MultiSelect1.BindingInfo.DataSource = customers; c1MultiSelect1.BindingInfo.DisplayMemberPath ="Name"; }

C#

MultiSelect in Unbound ModeIn unbound mode, you can populate the control with data by generating its content. For generating content, youneed to add items either at design time, or at run time.

The following code populates C1MultiSelect control with customer names when the form loads at run time.

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) C1MultiSelect1.Items.Insert(0, New C1.Win.Input.C1CheckListItem("John")) C1MultiSelect1.Items.Add(New C1.Win.Input.C1CheckListItem("Alex")) C1MultiSelect1.Items.Add(New C1.Win.Input.C1CheckListItem("Sean"))End Sub

private void Form1_Load(object sender, EventArgs e){ c1MultiSelect1.Items.Insert(0,new C1.Win.Input.C1CheckListItem("John")); c1MultiSelect1.Items.Add(new C1.Win.Input.C1CheckListItem("Alex"));

VB

C#

MultiSelect for WinForms 16

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 19: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

c1MultiSelect1.Items.Add(new C1.Win.Input.C1CheckListItem("Sean"));}

MultiSelect for WinForms 17

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 20: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

FeaturesThis section comprises all the features available in MultiSelect control.

AppearanceLearn how to customize the appearance of the control elements through code.

AutoComplete ModeLearn how to perform automatic completion of input is performed in MultiSelect.

Display modeLearn how to change the display modes through code.

Multi-Selection modeLearn how to change the selection modes through code.

SelectionLearn how to implement selection related features through code.

Tag AppearanceLearn how to display tags in different ways through code.

Tag WrapLearn how to wrap the header items through code.

AppearanceMultiSelect allows you to customize the appearance of all the individual elements of the control and manage itsoverall appearance.

Apply Styles to CheckListApply Styles to DropDownButtonApply Styles to TagEditorApply Theme

Apply Styles to CheckList

The following image shows styles applied to the CheckList element of MultiSelect.

To apply style to CheckList element of MultiSelect, use the following code. You can also set other attributesof Styles.CheckList property to further customize its appearance.

C1MultiSelect1.Styles.CheckList.Hot.BackColor = Color.SnowC1MultiSelect1.BackColor = Color.AliceBlue

VB

MultiSelect for WinForms 18

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 21: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

C1MultiSelect1.Styles.CheckList.Default.BackColor = Color.BeigeC1MultiSelect1.Styles.CheckList.Header.BackColor = Color.BurlyWood

c1MultiSelect1.Styles.CheckList.Hot.BackColor = Color.Snow;c1MultiSelect1.BackColor = Color.AliceBlue;c1MultiSelect1.Styles.CheckList.Default.BackColor = Color.Beige;c1MultiSelect1.Styles.CheckList.Header.BackColor = Color.BurlyWood;

Back to Top

Apply Styles to DropDownButton

The following image shows styles applied to the DropDownButton element of MultiSelect.

To customize the appearance of DropDownButton element of C1MultiSelect, use the following code. You can also setother attributes of Styles.DropDownButton property for further customization.

C1MultiSelect1.Styles.DropDownButton.BackColor = Color.BlanchedAlmondC1MultiSelect1.Styles.DropDownButton.BorderColor = Color.Brown

c1MultiSelect1.Styles.DropDownButton.BackColor = Color.BlanchedAlmond;c1MultiSelect1.Styles.DropDownButton.BorderColor = Color.Brown;

Back to Top

Apply Styles to TagEditor

The following image shows styles applied to the TagEditor element of MultiSelect.

C#

VB

C#

MultiSelect for WinForms 19

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 22: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

TagEditor element styles can be accessed via the Styles.TagEditor.Common property. The styles used to paint the tagscan be accessed via the Styles.TagEditor.Tag property and Styles.TagEditor.RemoveButton can be used to access stylesto paint Remove button in a tag. To change the appearance of tag editor, tags and Remove button, use the followingcode. You can also set other attributes of Styles.TagEditor.Common, Styles.TagEditor.Tag andStyles.TagEditor.RemoveButton properties for further customization.

C1MultiSelect1.Styles.TagEditor.Common.BackColor = Color.BlanchedAlmondC1MultiSelect1.Styles.TagEditor.RemoveButton.BackColor = Color.SeaShellC1MultiSelect1.Styles.TagEditor.Tag.BackColor = Color.Lavender

c1MultiSelect1.Styles.TagEditor.Common.BackColor = Color.BlanchedAlmond;c1MultiSelect1.Styles.TagEditor.RemoveButton.BackColor = Color.SeaShell;c1MultiSelect1.Styles.TagEditor.Tag.BackColor = Color.Lavender;

Back to Top

Apply Theme

You can customize the appearance of the MultiSelect control using built-in themes or by designing your own themes.To apply themes to the control, you can use C1ThemeController which provides many built-in themes and an easy touse theme designer to create your own themes. For more information on themes, see Theming.

The following image shows the MultiSelect control with MacBlue theme applied to it.

Back to Top

VB

C#

MultiSelect for WinForms 20

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 23: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Auto Complete ModeMultiSelect supports AutoComplete feature which helps in automatic completion of input by suggesting or appendingthe values from the list. This feature can be implemented in MultiSelect using AutoCompleteMode propertyof C1MultiSelect class. The property accepts values from AutoCompleteMode enumeration which specifies the modefor automatic completion in the control through following values:

None: Disables the automatic completionAppend: Appends remainder of the probable value and highlights itSuggest: Displays dropdown list populated with one or more suggested valuesSuggestAppend: Appends the probable value and displays a dropdown list populated with suggested values

The suggestions which appear on selecting Suggest or SuggestAppend modes are filtered from the dropdown listbased on one of the following filtering criteria:

ContainsStartWithDefault

MultiSelect provides these filtering criteria through AutoSuggestMode enumeration which can beset using AutoSuggestMode property of C1MultiSelect class.

The following GIF displays the suggestions appearing on using AutoComplete feature in MultiSelect.

To illustrate how the AutoComplete and AutoSuggest properties are used for automatic completion of input, use thefollowing code:

c1MultiSelect1.AutoCompleteMode = AutoCompleteMode.Suggestc1MultiSelect1.AutoSuggestMode = C1.Win.C1Input.AutoSuggestMode.Contains

c1MultiSelect1.AutoCompleteMode = AutoCompleteMode.Suggest;c1MultiSelect1.AutoSuggestMode = C1.Win.C1Input.AutoSuggestMode.Contains;

VB

C#

Display ModeMultiSelect allows you to choose the appearance of items in header between text or tags. In text mode, the text is

MultiSelect for WinForms 21

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 24: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

displayed as strings separated by a separator character. On the other hand, in tag mode, the tags appear like labelsseparated by a space. You can choose how the items appear in the TagEditor element using DisplayMode propertythat accepts the values from DisplayMode enumeration.

The following image shows the selected items displayed as text in the header.

To display the selected items as text in the header, use the following code:

C1MultiSelect1.DisplayMode = C1.Win.Input.DisplayMode.Text

c1MultiSelect1.DisplayMode = C1.Win.Input.DisplayMode.Text;

By default, the MultiSelect control uses comma (,) as separator character to separate the items in header. However,you can specify a separator character of your choice using Separator property.

C1MultiSelect1.Separator = "/"

c1MultiSelect1.Separator = "/";

VB

C#

VB

C#

Multi-Selection ModeMultiSelect provides SelectionMode property to determine whether you can select one or more than one item fromthe header. This property lets you choose between the following selection modes through SelectionModeenumeration:

MultiSelect for WinForms 22

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 25: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

Single: Allows you to select only one item at a time.Multiple: Allows you to select multiple items without holding down a modifier key.Extended: Allows you to select multiple consecutive items while holding down the corresponding modifier key.

To set the selection mode to multiple, use the following code:

C1MultiSelect1.SelectionMode = C1.Win.Input.SelectionMode.Single

c1MultiSelect1.SelectionMode = C1.Win.Input.SelectionMode.Single;

VB

C#

SelectionMultiSelect provides you with an option to select/deselect all items in the list with single selection. To enable thisoption, you need to set the ShowSelectAll property to true. On setting this property to true, the Select All check boxappears on top of the list of items. When you deselect the Select All check box, all items in the list are deselected.

The following GIF shows the Select All and Unselect All check box appear in the MultiSelect control.

To enables Select All option in the MultiSelect control, use the following code:

C1MultiSelect1.ShowSelectAll = True

c1MultiSelect1.ShowSelectAll = true;

VB

C#

MultiSelect for WinForms 23

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 26: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

In addition, MultiSelect also allows you to change the caption of Select All option using SelectAllCaption property andcaption of Unselect All option using UnselectAllCaption property of C1MultiSelect class.

The following GIF shows the changed caption of Select All and Unselect All options in the MultiSelect control.

To change the caption, use the following code:

C1MultiSelect1.SelectAllCaption = "All Customers"C1MultiSelect1.UnselectAllCaption = "Uncheck All"

c1MultiSelect1.SelectAllCaption = "All Customers";c1MultiSelect1.UnselectAllCaption = "Uncheck All";

VB

C#

Tag AppearanceMultiSelect has customizable header which, by default, displays all the items selected from the list. However, you cancontrol this default behavior to adjust the maximum number of selected items to display in the headerusing MaxHeaderItems property of the C1MultiSelect class. For example, when you set the value of MaxHeaderItemsproperty to 3, as soon as you select the fourth item, the header starts showing the total count of selected items as "4items selected".

The following GIF shows how the items in the header appear on setting the MaxHeaderItems property.

MultiSelect for WinForms 24

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 27: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

To display maximum three items in the header, use the following code:

C1MultiSelect1.MaxHeaderItems = 3

c1MultiSelect1.MaxHeaderItems = 3;

VB

C#

Tag WrapMultiSelect provides a way to wrap the items within the control header. This can be achieved using TagWrap propertyof C1MultiSelect class.

The following GIF shows how the items in the header get wrapped on setting the TagWrap property.

To wrap items in header, use the following code:

MultiSelect for WinForms 25

Copyright © 2019 GrapeCity, Inc. All rights reserved.

Page 28: MultiSelect for WinFormshelp.grapecity.com › componentone › PDF › WinForms › WinForms.M… · To understand implementation of the control, refer CVForm sample available at

C1MultiSelect1.TagWrap = True

c1MultiSelect1.TagWrap = true;

VB

C#

MultiSelect for WinForms 26

Copyright © 2019 GrapeCity, Inc. All rights reserved.