0 Replies Latest reply on Feb 21, 2007 2:20 AM by kishankumar

    Validating Item Editors in Datagrid

    kishankumar
      Hi Folks,
      I would like to validate the itemeditors before the cell goes ahead and updates the dataprovider.
      I am using a TextInput as a item editor. I do not want to validate the text input at the "change" event. I would like
      to validate only user has finished editing the text input.
      There is one way that I use itemEditEnd event of datagrid to validate the item. But since itemEditEnd is for a datagrid,
      I need to put all validation logic for all columns inside this function. I guess this is not good. I would like to have validations perfomed inside the component, so that each component(read that as item editor) takes care of its own validation.
      I am trying the logic such that I use some event of text input which gets triggered when user completes editing, in that event handler, validate the component.
      In the itemeditEnd function I check whether there was any error. if error was there then execute the datagridEvent.preventDefault() so that the itemeditor does not lose focus till user enters valid characters.
      The problem is in finding the right event. The user can signal his edit completed by either hitting tab or clicking the mouse in any other cell of the datagrid. I try to use "focusOut" event of textInput to validate, but unfortunately when user hits tab or click the mouse somewhere else, the itemEditEnd event of datagrid is getting fired first even before foucsOut is getting fired. Is there any event I can use which gets fired first on itemeditor component and then the Datagrid event? I am pasting the code below to give you a idea of what I am trying to do.

      <mx:DataGrid itemEditEnd="validateField(event);>
      <mx:DataGridColumn dataField="MAIL_GROUP_ID" headerText="Mail Group Id" editable="true" itemEditor="{numberEditor}" editorDataField="returnValue" />

      private function validateField(event:DataGridEvent):void {
      if (dg.itemEditorInstance is TextInput) {
      if (TextInput(dg.itemEditorInstance).errorString != "") {
      event.reason="NEW_COLUMN";
      event.preventDefault();
      }
      }
      }

      <!-- Item Renderer -->

      <mx:Component className="NumberEditor" id="numberEditor">
      <mx:TextInput focusOut="validateNumber(event);" >
      <mx:script>
      private function validateNumber(event:Event):void {
      var numberValidator:NumberValidator = new NumberValidator();
      numberValidator.source=TextInput(event.currentTarget);
      numberValidator.property="text";
      var resultEvent:ValidationResultEvent = numberValidator.validate();
      if (resultEvent.type != ValidationResultEvent.VALID) {
      TextInput(event.target).errorString = "Please enter a Valid Number";
      } else {
      returnValue = TextInput(event.target).text as Number;
      }}
      </mx:TextInput>
      </mx:Component>


      Or is there any better way to do the same thing?