5 Replies Latest reply on Mar 6, 2011 9:14 AM by Zolotoj

    How to deal with all of this?

    Zolotoj Level 3

      I am struggling with a very simple task called:

      "Editable Spark DataGrid"

      All I want is to be able to show data and change it.

      It would be nice to have everything in there without writing even a single line of a code, I thought that was the "editable" property for. Since you are saying it is in fact an editable you would think that underlying data is changed every time something is changed on the screen. Not that fast. we have propagate entered data back to the dataProvider and that when it all starts. Because of that we need a custom renderer/editor. I dont know what's a problem: my implementation, bugs, overall complicity of the product, but here are the results of my experiments of choosing the correct item editor.

      1. TextInput

           Problems: Clicking on a cell initiates an editing session, but the whole text is getting highlighted, additional click will not remove it, but rather cancel the      editing session. selectRange(0, 0); does not help.

           Enter key works fine.

      2. TextArea. Same with text highlighting, but selectRange(0, 0); will remove it.

           Enter key does not work.

      3. RichEditableText. No problem with text highlighting when a cell is clicked, but instead of cell's  I see its another copy right above a text shown before the      click.

           Enter works fine.

       

      So, what should I do? How much time should it take to create an editable datagrid? Any complete sample out there?

       

      Thanks

        • 1. Re: How to deal with all of this?
          Flex harUI Adobe Employee

          The Spark DataGrid Footer example on my blog uses default editing

          capability.

           

          --

          Alex Harui

          Flex SDK Team

          Adobe System, Inc.

          http://blogs.adobe.com/aharui

          • 2. Re: How to deal with all of this?
            Zolotoj Level 3

            Yes, default is working. Any chance custom editing will be working in the final release?

             

            Thanks

            • 3. Re: How to deal with all of this?
              Flex harUI Adobe Employee

              Custom editing is working for the test cases we have and will be working

              when we ship.  I have not been following the other thread because Darrell is

              helping you out and owns that feature in the SDK so he is the one who can

              best help you.

               

              However, I strongly recommend coming up with a small 20-line test case that

              we can copy and paste and run, and a few steps we have to perform to show

              the problem.  You can post that on the forum or file a bug.

               

              Working with snippets and words is obviously not effective in this case.

              • 4. Re: How to deal with all of this?
                Zolotoj Level 3

                I finally have it figured out. I looked at your sample with default editing. Looking at the sample I realized what the default editing behavior is: first click to select the cell and highlight the whole text, second click to activate editing session. I also looked into Functional and Design Specification again and noticed what I was missing while working a custom solution. Here is my final code:

                <s:itemEditor>
                     <fx:Component> 
                          <local:testEditor/>
                        </fx:Component>
                </s:itemEditor>
                

                 

                package
                {
                     import spark.components.DataGrid;
                     import spark.components.TextInput;
                     import spark.components.gridClasses.GridItemEditor;
                     import spark.components.gridClasses.IGridItemEditor;
                
                     public class testEditor extends GridItemEditor implements IGridItemEditor 
                     {
                          private var valueDisplay:TextInput;
                          public function testEditor()
                          {
                               //TODO: implement function
                               super();
                               valueDisplay = new TextInput();
                               valueDisplay.setStyle("borderVisible", false);               
                               addElement(valueDisplay);
                               valueDisplay.x += 4;
                               valueDisplay.y += 3;
                          }
                          override public function prepare():void
                          {               
                               super.prepare();
                               valueDisplay.width = column.width - 6;
                               valueDisplay.selectRange(0, valueDisplay.text.length - 1);
                          }
                          override public function save():Boolean
                          {
                               data[column.dataField] = value;
                               DataGrid(owner).validateNow();
                               return true;
                          }
                          override public function get value():Object
                          {
                               return valueDisplay.text;            
                          }
                          
                          override public function set value(newValue:Object):void
                          {
                               valueDisplay.text = newValue.toString();
                          } 
                     }
                }
                

                The only thing that does not work is when I click on a cell its text is not highlighted which is a bit of confusion because it's not clear whether the cell gets a focus. I have some code to select the text but it's not doing it. Am I missing something obvious with text highlighting?

                 

                Thanks

                • 5. Re: How to deal with all of this?
                  Zolotoj Level 3

                  Ok, the following takes care of the highlighting issue:

                  valueDisplay.setStyle("unfocusedTextSelectionColor", "#70b2ee");
                  valueDisplay.selectionHighlighting = "always";