Skip to content

Commit e8b7f48

Browse files
committed
docs(mccb): uppdate getting started article
1 parent 01017b7 commit e8b7f48

File tree

1 file changed

+39
-38
lines changed

1 file changed

+39
-38
lines changed

controls/multicolumncombobox/getting-started.md

Lines changed: 39 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -17,42 +17,43 @@ The following tutorial demonstrates how you can add **RadMultiColumnComboBox** b
1717
1818
![multicolumncombobox-getting-started](images/multicolumncombobox-getting-started.png "webforms-multicolumncombobox-overview")
1919

20-
1. Add a **ScriptManager** control on a Web Form.
21-
22-
1. Create a data source with your preferred method. For example:
23-
24-
**ASPX**
25-
26-
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
27-
ProviderName="System.Data.SqlClient"
28-
SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
29-
30-
1. Add a **RadMultiColumnComboBox** control to the page, and set its properties:
31-
32-
* `DataSourceID` - points to the SqlDataSource control ID.
33-
* `DataTextField` and `DataValueField` - point them to the respective fields of the data source.
34-
* `FilterFields` - these are the fields from the data source that will be used for filtering the text the user types. Set them according to the data source and your UX preferences.
35-
* `Filter` - set it to "`contains`" to enable generic filtering.
36-
* `Placeholder`, `DropDownWidth`, `Height` and `Width` control its appearance much like with other inputs and dropdowns.
37-
* Populate the `ColumnsCollection` with `MultiColumnComboBoxColumn` instances and set their properties:
20+
Add a **ScriptManager** control on a Web Form. After thatm, create a data source with your preferred method. For example:
21+
22+
````ASP.NET
23+
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
24+
ProviderName="System.Data.SqlClient"
25+
SelectCommand="SELECT Top 20 [CustomerID], [ContactName], [ContactTitle], [CompanyName] FROM [Customers]"></asp:SqlDataSource>
26+
````
27+
28+
Add a **RadMultiColumnComboBox** control to the page, and set its properties:
29+
30+
* `DataSourceID` - points to the SqlDataSource control ID.
31+
* `DataTextField` and `DataValueField` - point them to the respective fields of the data source.
32+
* `FilterFields` - these are the fields from the data source that will be used for filtering the text the user types. Set them according to the data source and your UX preferences.
33+
* `Filter` - set it to "`contains`" to enable generic filtering.
34+
* `Placeholder`, `DropDownWidth`, `Height` and `Width` control its appearance much like with other inputs and dropdowns.
35+
* `HighlightFirst` - by default, the first search result will be highlighted. You can disable this functionnality by setting the value to **false**.
36+
* Populate the `ColumnsCollection` with `MultiColumnComboBoxColumn` instances and set their properties:
37+
38+
* `Field` - the field from the data source that will be rendered.
39+
* `Title` - the header text.
40+
* `Width` - the width of the column. They should add up to the value of DropDownWidth.
3841

39-
* `Field` - the field from the data source that will be rendered.
40-
* `Title` - the header text.
41-
* `Width` - the width of the column. They should add up to the value of DropDownWidth.
42-
43-
The end result should be similar to the following:
44-
45-
**ASPX**
46-
47-
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
48-
DropDownWidth="600px" Height="400px" Width="100%"
49-
Filter="contains" FilterFields="ContactName, ContactTitle, CompanyName"
50-
DataTextField="ContactName" DataValueField="CustomerID"
51-
Placeholder="select from the dropdown or type" Skin="Default">
52-
<ColumnsCollection>
53-
<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px" />
54-
<telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
55-
<telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
56-
</ColumnsCollection>
57-
</telerik:RadMultiColumnComboBox>
58-
42+
The end result should be similar to the following:
43+
44+
````ASP.NET
45+
<telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1" DataSourceID="SqlDataSource1"
46+
DropDownWidth="600px" Height="400px" Width="100%" HighlightFirst="true"
47+
Filter="contains" FilterFields="ContactName, ContactTitle, CompanyName"
48+
DataTextField="ContactName" DataValueField="CustomerID"
49+
Placeholder="select from the dropdown or type" Skin="Default">
50+
<ColumnsCollection>
51+
<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" Width="200px" />
52+
<telerik:MultiColumnComboBoxColumn Field="ContactTitle" Title="Title" Width="200px" />
53+
<telerik:MultiColumnComboBoxColumn Field="CompanyName" Title="Company" Width="200px" />
54+
</ColumnsCollection>
55+
</telerik:RadMultiColumnComboBox>
56+
````
57+
58+
59+

0 commit comments

Comments
 (0)