3 Replies Latest reply on Feb 24, 2010 10:59 PM by archemedia

    Data Grid Column itemrenderers checkbox

    DineshDu

      Hi,


      I have a datagrid with one column for check box.

      I need to restrict the number of rows that can be checked. ie., if the user after checking more than 4 rows should not be able to check the 5th row.

      How to implement this?

      Thanks in advance.
        • 1. Re: Data Grid Column itemrenderers checkbox
          archemedia Level 4

          Try this:

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
              <mx:Script>
                  <![CDATA[
                      import mx.controls.Alert;
                      import mx.events.CollectionEvent;
                      import mx.collections.ArrayCollection;
                     
                      [Bindable]
                      private var dp:ArrayCollection;
                     
                      private function init():void
                      {
                          var arr:Array = [
                              {ch: 1}, {ch: 0}, {ch: 0}, {ch: 0}, {ch: 0}, {ch: 0}, {ch: 0}, {ch: 0}, {ch: 0}];
                          dp = new ArrayCollection();
                          dp.source = arr;
                      }
                     
                      public function handleChange(evt:Event):void
                      {
                          var n:int = 0;
                          var value:int = int(evt.target.selected);
                          if (value == 1)
                          {
                              dp.source.forEach(function callback(item:*, index:int, array:Array):void
                              {
                                  if (item.ch == 1)
                                      n++;
                              });
                              if (n >= 3)
                              {
                                  Alert.show("No more than 3 allowed");
                                  evt.target.selected = false;
                                  return;
                              }
                          }
                          dg.selectedItem.ch = value;
                      }
                     
                      private function check(item:Object, index:int, array:Array):void
                      {
                         
                      }
                     
                  ]]>
              </mx:Script>
              <mx:DataGrid id="dg" x="10" y="10" height="100%" dataProvider="{dp}" variableRowHeight="true">
                  <mx:columns>
                      <mx:DataGridColumn headerText="checkBox">
                          <mx:itemRenderer>
                              <mx:Component>
                                  <mx:VBox width="100%" height="100%">
                                      <mx:CheckBox
                                          selected="{Boolean(data.ch)}"
                                          click="outerDocument.handleChange(event)"/>
                                  </mx:VBox>
                              </mx:Component>
                          </mx:itemRenderer>
                      </mx:DataGridColumn>
                  </mx:columns>
              </mx:DataGrid>
          </mx:Application>

           

           

          Dany

          • 2. Re: Data Grid Column itemrenderers checkbox
            DineshDu Level 1

            Thanks Dany.

             

            One question. What does "outerDocument" refer in click ?

            • 3. Re: Data Grid Column itemrenderers checkbox
              archemedia Level 4

              It refers to the enclosing component of an itemRenderer:

               

              ...Defining the scope in an Component tag

               

              The <mx:Component> tag defines a new scope in an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <mx:Component> and </mx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.

               

              For example, you define one variable named localVar in the scope of the main application, and another variable with the same name in the scope of the item renderer. From within the item renderer, you access the application's localVar by prefixing it with outerDocument keyword...

               

              Dany