Multiple Columns

12 Apr 20183 minutes to read

The Autocomplete allows list of data to be displayed in several columns and column collection can be defined and customized through the MultiColumnSettings property.

In AutoComplete Multiple Column search is based on searchColumnIndices property which allows user to search text for any number of fields in the suggestion list without modifying the selected text format.

NOTE

if we use searchColumnIndices as “[0,1]” means search based on 0 and 1 columns data alone.

In AutoComplete Multiple Column searched value is updated to autocomplete input box based on StringFormat property which specifies values to updated.

NOTE

StringFormat as “{0} ({1}) ({2})” means search based on 0, 1 and 2 columns data.

Name Description
Enable Allow list of data to be displayed in several columns.
ShowHeader Allow header text to be displayed in corresponding columns.
StringFormat Displayed selected value and autocomplete search based on mentioned column value specified in that format.
Columns Field and Header Text collections can be defined and customized through this field.
Field Get or set a value that indicates to display the columns in the autocomplete mapping with column name of the dataSource.
HeaderText Get or set a value that indicates to display the title of that particular column.

Also find the properties of the Columns field in the Multicolumn.

[columns-field](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-field) Get or set a value that indicates to display the columns in the autocomplete mapping with column name of the dataSource.
[columns-headerText](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-headertext) Get or set a value that indicates to display the title of that particular column.
[columns-cssClass](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-cssclass) Gets or sets a value that indicates to render the multicolumn with custom theme.
[columns-type](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-type) Specifies the search data type for the specific column
[columns-filterType](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-filtertype) Specifies the search filter type for a particular column
[columns-headerTextAlign](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-headertextalign) This defines the text alignment of a particular column header cell value
[columns-textAlign](https://help.syncfusion.com/api/js/ejautocomplete#members:multicolumnsettings-columns-textalign) Gets or sets a value that indicates to align the text within the columns

Configuring Multiple Columns

The following steps explain the configuration of the Multiple Columns for an AutoComplete textbox.

  1. In the View page, define the AutoComplete control and configure multicolumn.
  • CSHTML
    • @*Refer to the DataSource defined in Local Data binding Step 1 *@

@{
    Syncfusion.JavaScript.Models.MultiColumnSettings val = new MultiColumnSettings();
    val.SearchColumnIndices = new List<int> { 0, 1 };
}

<div style="width: 600px">

    <div style="display:inline-block; float:left; margin-right:25px">

        <span style="display:block; margin-bottom:12px">Using Delimiter</span>
            <ej-autocomplete id="autocomplete" datasource="ViewBag.datasource">
                <e-multicolumnsettings enable="true" show-header="true" string-format="{0} ({1})" search-column-indices="@val.SearchColumnIndices">
                    <e-multi-columns>
                        <e-multi-column field="UniqueKey" header-text="Unique Key"></e-multi-column>
                        <e-multi-column field="Text" header-text="Text"></e-multi-column>
                    </e-multi-columns>
                </e-multicolumnsettings>
            </ej-autocomplete>

    </div>

</div>

    The following image is the output for AutoComplete control with configured multiple column.

    AutoComplete with MultiColumn