As we saw in the previous blog post, each cell in the DataGrid can be customized to render a custom widget within it. This also holds true for the edit mode version of each cell. When the grid is put into edit mode, we draw a row of editors on top of the grid and place editors for each editable column in place of the cell. So this looks like:

 

 

In this example, we are going to replace the editor for one of the columns with a Spinner. The default editor is a Text Input. Using a spinner means we have to do the following things:

 

1) Make sure we specify the itemEditor in the markup:

                itemEditor="com.flexicious.mysampleapp.SpinnerEditor"

 2) MAke sure we tell the grid that we are using a custom editor, so we will take care of populating it from the data, and populating the data back from it: 

                itemEditorManagesPersistence="true"

 

 3) Implement the itemEditorInitialize and Commit Functions

            //because we have a custom spinner as an editor, we need to write code to

            //populate it when the spinner loads, and then take the value from the spinner

            //when the user clicks ok button. The following two functions will accomplish this task

            grid.rowEditBehavior.itemEditorsInitializeFunction= new Function(this,"initializeEditors");

            grid.rowEditBehavior.itemEditorsCommitFunction= new Function(this,"commitEditors");

 

       /**

       * This method is responsible for taking the values from the editors, and making sure

       * that the values are applied to the row data on click OK of the editor row.

       * @param editors A Map of the unique identifier of the column the editor belongs to, and the editor

       */

      public void commitEditors(HashMap<String,Object> editors){

            FlexDataGrid grid = (FlexDataGrid) findViewById(R.id.flexDataGrid);

            Object itemBeingEdited = grid.getCurrentEditingCell().getRowInfo().getData();

            for(String key : editors.keySet()){

                  View editor = (View) editors.get(key);

                  if(editor instanceof SpinnerEditor){

                        FlexDataGridColumn column = grid.getColumnByUniqueIdentifier(key);

                        SpinnerEditor spinnerEditor = (SpinnerEditor) editor;

                        UIUtils.setPropertyValue(itemBeingEdited, column.getDataField(), spinnerEditor.getSelectedItem());

                  }

            }

      }

      /**

       * This method is responsible for taking the values from the item being edited, and making sure

       * that the values are applied to the editors on load.

       * @param editors A Map of the unique identifier of the column the editor belongs to, and the editor

       */

      public void initializeEditors(HashMap<String,Object> editors){

            FlexDataGrid grid = (FlexDataGrid) findViewById(R.id.flexDataGrid);

            Object itemBeingEdited = grid.getCurrentEditingCell().getRowInfo().getData();

            for(String key : editors.keySet()){

                  View editor = (View) editors.get(key);

                  if(editor instanceof SpinnerEditor){

                        //is this our spinner editr?

                        FlexDataGridColumn column = grid.getColumnByUniqueIdentifier(key);

                        SpinnerEditor spinnerEditor = (SpinnerEditor) editor;

                    Object compareValue = UIUtils.resolveExpression(itemBeingEdited, column.getDataField());

                    //get the value from the item being edited

                    if(compareValue!=null)

                    {

                        //apply this value.

                          ArrayAdapter<String> adapter = (ArrayAdapter<String>) spinnerEditor.getAdapter();

                              int spinnerPostion = adapter.getPosition((String) compareValue);

                          spinnerEditor.setSelection(spinnerPostion);

                    }

                  }

            }

      }

 

Thats it! This gives you a lot of control over the kind of item editors you can use. and the logic you want to associate with them!. Full code attached.

 

 

project.zip (153.87 kb)