Search results

Migration from Essential JS 1

This article describes the API migration process of ComboBox component from Essential JS 1 to Essential JS 2.

DataBinding

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: datasource
<EJ.ComboBox dataSource={groups} ></EJ.ComboBox>
Property: dataSource
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} dataSource={this.cityData} />
Fields for mapping Property: fields
<EJ.ComboBox dataSource={groups} fields-value="parentId" fields-text="text"> </EJ.ComboBox>
Property: fields
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.field} />
Query Property: query
<EJ.ComboBox query={query} ></EJ.ComboBox>
Property: query
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} query={this.query} />
Begin event Event:actionBegin
<EJ.ComboBox actionBegin="actionBegin" ></EJ.ComboBox>
Event: actionBegin
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionBegin={this.actionBegin.bind(this)} />
Complete event Event:actionComplete
<EJ.ComboBox actionComplete="actionComplete" ></EJ.ComboBox>
Event: actionComplete
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionComplete={this.actionComplete.bind(this)} />
Failure event Event:actionFailure
<EJ.ComboBox actionFailure="actionFailure"></EJ.ComboBox>
Event: actionFailure
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailure={this.actionFailure.bind(this)} />

Filtering

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: allowFiltering
<EJ.ComboBox allowFiltering={true}></EJ.ComboBox>
Property: allowFiltering
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} allowFiltering={true} />
No records template Property: noRecordsTemplate
<EJ.ComboBox noRecordsTemplate={template}></EJ.ComboBox>
Property: noRecordsTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} />
Ignore casing and diacritics Not Applicable Property: ignoreAccent
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} ignoreAccent={true} />
Custom value addition Property: allowCustom
<EJ.ComboBox allowCustom={true}></EJ.ComboBox>
https://ej2.syncfusion.com/react/demos/#/material/combo-box/custom-value
Search event Event: filtering
<EJ.ComboBox filtering="filtering"></EJ.ComboBox>
Event: filtering
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} filtering={this.filteting.bind(this)} />

Template

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: itemTemplate
<EJ.ComboBox itemTemplate={itemTemplate}></EJ.ComboBox>
Property: itemTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} itemTemplate={this.itemTemplate} />
Group Template Property: groupTemplate
<EJ.ComboBox groupTemplate={groupTemplate}></EJ.ComboBox>
Property: groupTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} groupTemplate={this.groupTemplate} />
ValueTemplate Not Applicable Property: valueTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} valueTemplate={this.valueTemplate} />
Header Template Property: headerTemplate
<EJ.ComboBox headerTemplate={headerTemplate}></EJ.ComboBox>
Property: headerTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} headerTemplate={this.headerTemplate} />
FooterTemplate Property: footerTemplate
<EJ.ComboBox footerTemplate={footerTemplate}></EJ.ComboBox>
Property: footerTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} footerTemplate={this.footerTemplate} />
No records Template Property: noRecordsTemplate
<EJ.ComboBox noRecordsTemplate={noRecordsTemplate}></EJ.ComboBox>
Property: noRecordsTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} noRecordsTemplate={this.noRecordsTemplate} />
Auto fill Property: autoFill
<EJ.ComboBox autoFill={true}></EJ.ComboBox>
Property: autoFill
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} autoFill={true} />
Action failure Template Property: actionFailureTemplate
<EJ.ComboBox actionFailureTemplate={actionFailureTemplate}></EJ.ComboBox>
Property: actionFailureTemplate
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} actionFailureTemplate={this.actionFailureTemplate} />

Applying CSS

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: cssClass
<EJ.ComboBox cssClass="cssClass"></EJ.ComboBox>
Property: cssClass
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} cssClass={this.cssClass} />
width Property: width
<EJ.ComboBox width="300px"></EJ.ComboBox>
Property: width
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} width={this.width} />

Grouping

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: fields-groupBy
<EJ.ComboBox dataSource={groups} fields-value="parentId" fields-groupBy="text"> </EJ.ComboBox>
Property: fields
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} fields={this.field} />

Accessibility

Behavior API in Essential JS 1 API in Essential JS 2
Globalization Property: locale
<EJ.ComboBox locale="fr-FE"></EJ.ComboBox>
Property: locale
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} locale={this.locale} />
Rtl support Property: enableRtl
<EJ.ComboBox enableRtl={true}></EJ.ComboBox>
Property: enableRtl
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enableRtl={true} />

Placeholder

Behavior API in Essential JS 1 API in Essential JS 2
Watermark text Property: placeholder
<EJ.ComboBox placeholder="select"></EJ.ComboBox>

Property: placeholder
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} placeholder={this.placeholder} />
Floating of watermark text Not applicable Property: floatLabelType
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} floatLabelType={this.floatLabelType} />

Miscellaneous

Behavior API in Essential JS 1 API in Essential JS 2
Enable/disable Property: enabled
<EJ.ComboBox enabled={true}></EJ.ComboBox>
Property: enabled
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} enabled={true} />
Read only Property: readOnly
<EJ.ComboBox readOnly={true}></EJ.ComboBox>
Property: readOnly
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} readOnly={true} />
Addition of Html attributes Property: htmlAttributes
<EJ.ComboBox htmlAttributes={htmlAttributes}></EJ.ComboBox>
Property: htmlAttributes
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} htmlAttributes={this.htmlAttributes} />

Sorting

Behavior API in Essential JS 1 API in Essential JS 2
Order of sorting Property: sortOrder
<EJ.ComboBox sortOrder={sortOrder}></EJ.ComboBox>
Property: sortOrder
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} sortOrder={this.sortOrder} />

Selection

Behavior API in Essential JS 1 API in Essential JS 2
Selecting particular index Property: index
<EJ.ComboBox index="1"></EJ.ComboBox>
Property: index
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} index={this.index} />
Selecting particular value Property: value
<EJ.ComboBox value="data"></EJ.ComboBox>
Property: value
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} value={this.value} />
Selecting particular text Property: text
<EJ.ComboBox text="data"></EJ.ComboBox>
Property: text
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} text={this.text} />
Getting data by using value Method: getItemDataByValue
<EJ.ComboBox sortOrder={sortOrder}></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(‘getItemDataByValue’,“data”)
Method: getDataByValue
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.getDataByValue(“data”);
Select event Event: select
<EJ.ComboBox select="select"></EJ.ComboBox>
Event: select
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} select={this.select} />
Behavior API in Essential JS 1 API in Essential JS 2
Popup height Property: popupHeight
<EJ.ComboBox popupHeight="300px"></EJ.ComboBox>
Property:popupheight
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupHeight={this.popupHeight} />
Popup width Property: popupWidth
<EJ.ComboBox popupWidth="300px"></EJ.ComboBox>
Property:popupWidth
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} popupWidth={this.popupWidth} />
Popup showing manually Method: showPopup
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“showPopup”);
Method: showPopup
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.showPopup();
Popup hiding manually Method: hidePopup
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“hidePopup”);
Method: hidePopup
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.hidePopup();
Popup hide event Event: close
<EJ.ComboBox close="close"></EJ.ComboBox>
Event: close
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} close={this.close.bind(this)} />
Popup shown event Event: open
<EJ.ComboBox open="open"></EJ.ComboBox>
Event: open
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} open={this.open.bind(this)} />

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding new item Method : addItem
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“addItem”, { text :“India”});
Method: addItem
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.addItem({Id: ‘id’, Game: ‘Golf’},2);
Focus out event Not applicable Event: blur
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} blur={this.blur.bind(this)} />
Focus in event Event: focus
<EJ.ComboBox focus="focus"></EJ.ComboBox>
Event: FocusIn
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} focusIn={this.focus.bind(this)} />
Focus out Method: focusOut
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“focusOut”);
Method: focusOut
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.focusOut();
Focus in Method: focusIn
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“focusIn”);
Method: focusIn
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.focusIn();
Getting the data Method : getItems
<EJ.ComboBox ></EJ.ComboBox>

$(‘#dropdown’).ejComboBox(“getItems”);
Method: getItems
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} />

this.ddlObj.getItems();
Create event Event: create
<EJ.ComboBox close="close"></EJ.ComboBox>
Event: created
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} created={this.create.bind(this)} />
Change event Event: change
<EJ.ComboBox close="close"></EJ.ComboBox>
Event: change
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} change={this.change.bind(this)} />
Custom value event Event: customValueSpecifier
<EJ.ComboBox customValueSpecifier="customValueSpecifier"></EJ.ComboBox>
Event: customValueSpecifier
<ComboBoxComponent id="ddl" ref={(scope) => { this.ddlObj = scope; }} customValueSpecifier={this.customValueSpecifier.bind(this)} />