Combo Basic

This component is used to select one value among many values. Below is the explanation how to implement the combo

Way to create combo Data

InnerDataSet

We can represent data as list in combo using DataSet.

Way of using Component Editor

We can create data in combo without using DataSet, we can Component Editor to create data in Combo.

• Combo innerdataset part you see in the Properties window you can select the data set in the combo button and the "..." button.

• We can see innerdataset from properties window of Combo, select innerdataset, there is combo button and "…" button.

• After choosing the "…" button the following screen will appear.

• Using the above data sets, such as adding a row to add a row below the value assigned.

• On adding row in the component editor window is same as using the DataSet. After adding the rows it will appear in the window.

• After click on OK button, we can use Component Editor like DataSet binding.

DataSet Binding

Combo can be represented by binding with DataSet.

Type

dropdown

Full item list will be display without searching

search

It shows text strings on List window by searching text strings close to input text string.

Filter

It shows items on List window by filtering according to input text strings.  
If there is no same text string, List window doesn't open.

Source Location

Sample\Combo\np_Combo_Basic.xfdl

Multi Combo

Creating Multi Combo using Popup Div

• Combo component is basically used datacolumn and codecolumn to represent the Combo, But it is difficult to represent more than two datacolumn's information.

• We solve this problem by using PopupDiv and Multi Component we can create like Multi Combo.

Main Source Content

/*
 * File Name   : Combo_MultiCombo
 * Description : Creating Multi-Combo using Popup Div
 */
/*  Button Click  */
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{    
 var nX = system.screenToClientX(this, system.clientToScreenX(obj,16)) - this.pdiv_input.width;
 var nY = system.screenToClientY(this, system.clientToScreenY(obj, 30));  
  
 this.pdiv_input.trackPopup(nX+12, nY); // Expending ComboBox
}
/*  Button Click  */
this.pdiv_input_grd_input_oncellclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
 this.pdiv_input.closePopup();
 this.edt_output0.set_value(this.ds_data.getColumn(e.row, "COL0"));
 this.edt_output1.set_value(this.ds_data.getColumn(e.row, "COL1"));
}

Source Location

Sample\Combo\np_Combo_MultiCombo.xfdl

Case Insensitive filtering for Combo

By using filter method of Combo, several list values can be handled. We can implement case insensitive filter.

Related Method

Filter()

This method shows only the record which satisfies the search condition from DataSet.

Main Source Content

/*
 * File Name   : Combo_FilterNoLetter
 * Description : Case Insensitive filtering for Combo
 */
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var nRow = this.ds_data.rowcount;
 var sData;
    
    this.ds_data.addColumn("COL2", "STRING", 255);
 for (var i = 0; i < nRow; i++)
 {
        sData = this.ds_data.getColumn(i, "COL1").toString().toUpperCase();
        this.ds_data.setColumn(i, "COL2", sData);
    }
    var sFilter = "COL2.toString().indexOf('" + this.edt_input.value.toUpperCase() + "') >= 0";
    this.ds_data.filter(sFilter); 
}

Source Location

Sample\Combo\np_Combo_FilterNoLetter.xfdl