Use PopupContainerEdit and PopupContainer in the DevExpress program to display data and popupcontaineredit

Use PopupContainerEdit and PopupContainer in the DevExpress program to display data and popupcontaineredit

In some real-time data query scenarios, we may need to perform fuzzy query and selection on the input information. For example, in some text input scenarios, such as entering a site code or device code, then, you can obtain a list of matching scenarios. This article describes how to use PopupContainerEdit and PopupContainer in the DevExpress program to display data.

1. Review the use of the SearchLookupEdit Control

In DevExpress, if we need a good experience, we can use SearchLookupEdit to query and display data. However, the data source needs to be prepared in advance for this control, then the search is based on a fixed data source, as shown below.

In this way, you can input data in the editing box and filter data based on the input content in real time. This is a good search experience, but the bad thing is that the data needs to be loaded in advance, if the database has thousands of records, the disadvantages of this method are obvious, so it is not very suitable for big data and can be searched and displayed in real time.

 

2. Search Using ButtonEdit

In addition to the search method of the first point, you can also use a text and button merging control to select data query. The control name is ButtonEdit. The interface effect is as follows.

After you click the button control on the right of the text input, a dialog box is displayed to select data. In the dialog box, you can query data by PAGE based on the conditions, in this way, you can select multiple conditions for query. Double-click the record to select a record and close the form interface.

The buttons above are displayed on the design page. You can add code for related events.

The code for implementing the above functional interface is very simple, as shown below.

        private void txtOfferNum_Properties_Click(object sender, EventArgs e)        {            FrmSelectOffer dlg = new FrmSelectOffer();            if(dlg.ShowDialog() == System.Windows.Forms.DialogResult.OK)            {                var info = dlg.OfferInfo;                if(info != null)                {                    this.txtOfferNum.Text = info.OfferNum;

 

3. Use PopupContainerEdit and PopupContainer

In addition to the selection method on the Interface above, we can also use PopupContainerEdit and PopupContainer to display data in DevExpress. The advantage of this method is that it can be queried in a timely manner during input, in addition, the data is loaded in real time and will not load all the data at once. To demonstrate this interface processing method, I made a small case, as shown below.

In this way, related data is displayed in a timely manner. After you select the table control, the system returns to the main interface.

If you press Esc, close the pop-up layer, switch to the input layer, enter the layer again, and press enter to query.

First, in code processing, the keys of the input control must be processed.

/// <Summary> /// handle the buttons /// </summary> private void popupContainerEdit1_KeyPress (object sender, KeyPressEventArgs e) {this. popupContainerEdit1.ShowPopup (); // bind the data source when you press enter and set if (e. keyChar = '\ R') {BindData (); this. gridView1.Focus (); canAcceptReturn = false;} else {this. activeControl = this. popupContainerEdit1; this. popupContainerEdit1.Focus ();}}

When you press enter, we perform the Data Query operation.

We tested the display of the data dictionary query here, just to demonstrate the real-time data query operation.

/// <Summary> /// bind the data source of the GridView /// </summary> private void BindData () {var value = this. popupContainerEdit1.Text; this. lblName. text = value; string condition = string. format ("Name like '% {0} %'", value); var list = BLLFactory <DictData>. instance. find (condition); this. gridView1.Columns. clear (); this. gridView1.CreateColumn ("Name", "Name", 200, false); this. gridView1.CreateColumn ("Value", "Dictionary", 200, false); this. gridView1.CreateColumn ("Seq", "sort", 80, false); this. gridControl1.DataSource = list ;}

In order to click in the list or use the Enter key for selection, we have handled related events.

        private void gridView1_RowClick(object sender, DevExpress.XtraGrid.Views.Grid.RowClickEventArgs e)        {            GetSelectValue();        }        private void gridControl1_KeyUp(object sender, KeyEventArgs e)        {            if (e.KeyCode == Keys.Enter)            {                if (canAcceptReturn)                {                    GetSelectValue();                }                canAcceptReturn = true;            }        }

        private void GetSelectValue(bool closePopup = true)        {            var value = string.Concat(this.gridView1.GetFocusedRowCellValue("Name"));            if (closePopup)            {                this.popupContainerEdit1.ClosePopup();            }            this.popupContainerEdit1.Text = value;        }

Once the container focus disappears, let's re-return the focus to the input control. The following code is implemented.

Private void popupContainerControl1_Leave (object sender, EventArgs e) {// when the container exits, reposition the focus to the edit box this. popupContainerEdit1.Focus ();}

The entire case code is as follows.

Public partial class Form1: DevExpress. xtraEditors. xtraForm {/// <summary> /// sets an identifier, whether the Enter key is acceptable in the GridView /// </summary> bool canAcceptReturn = false; public Form1 () {InitializeComponent () ;}/// <summary> /// handle the buttons /// </summary> private void popupContainerEdit1_KeyPress (object sender, KeyPressEventArgs e) {this. popupContainerEdit1.ShowPopup (); // bind the data source when you press enter and set if (e. keyChar = '\ R') {BindData (); this. gridView1.Focus (); canAcceptReturn = false;} else {this. activeControl = this. popupContainerEdit1; this. popupContainerEdit1.Focus () ;}/// <summary> // bind the data source of the GridView /// </summary> private void BindData () {var value = this. popupContainerEdit1.Text; this. lblName. text = value; string condition = string. format ("Name like '% {0} %'", value); var list = BLLFactory <DictData>. instance. find (condition); this. gridView1.Columns. clear (); this. gridView1.CreateColumn ("Name", "Name", 200, false); this. gridView1.CreateColumn ("Value", "Dictionary", 200, false); this. gridView1.CreateColumn ("Seq", "sort", 80, false); this. gridControl1.DataSource = list;} private void gridView1_RowClick (object sender, DevExpress. xtraGrid. views. grid. rowClickEventArgs e) {GetSelectValue ();} private void gridControl1_KeyUp (object sender, KeyEventArgs e) {if (e. keyCode = Keys. enter) {if (canAcceptReturn) {GetSelectValue () ;}canacceptreturn = true ;}} private void GetSelectValue (bool closePopup = true) {var value = string. concat (this. gridView1.GetFocusedRowCellValue ("Name"); if (closePopup) {this. popupContainerEdit1.ClosePopup ();} this. popupContainerEdit1.Text = value;} private void popupContainerControl1_Leave (object sender, EventArgs e) {// when the container exits, move the focus to the edit box this. popupContainerEdit1.Focus ();} private void Form1_Load (object sender, EventArgs e ){}}