1 Reply Latest reply on Sep 2, 2009 8:32 AM by Andrew Rosewarn

    How to make the position of first datagrid column fixed in datagrid?

    zubinshi

      For example,

       

      The first datagrid column is a checkbox and I make this column un-resable and un-moveable.  But doing that doesn't forbid other columns to move ahead of checkbox column(once we did that, the checkbox will be on 2nd column instead of first).  So, what i want to do is, all the column can only removed to 2nd column at most.

       

      How can I do that?

       

      Any help is appreciated.

       

      Thanks,

        • 1. Re: How to make the position of first datagrid column fixed in datagrid?
          Andrew Rosewarn Level 3

          Hi there

           

          Hmm interesting.  You can try this below which seems to work by listeneing for the headerShift event and the mouse doen event.  Basically it records the original layout of the coloumns and then if the user try to put a column at position 0 then it resets them.  The others can moce around fine.  The ideal would be to prevent the default behaiviour of the headershift event but this is not cancelable.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  >
              <mx:Script>
                  <![CDATA[
                      import mx.events.IndexChangedEvent;
                      import mx.controls.dataGridClasses.DataGridColumn;
                      import mx.rpc.events.HeaderEvent;
                     
                      private var originalColumns:Array;
                     
                      private function headerShiftHandler(event:IndexChangedEvent):void {
                          // If new pos of the dragged column is going to be 0, then reset to original layout.
                          if (event.newIndex == 0) {
                              dg.columns = originalColumns;       
                          }
                      }
                     
                      // Capture the original column layout.
                      private function captureColumns():void {
                          originalColumns = dg.columns;
                      }
                  ]]>
              </mx:Script>

              <mx:DataGrid id="dg" x="51" y="125" width="414" height="207" headerShift="headerShiftHandler(event)" mouseDown="captureColumns()">
                  <mx:columns>
                      <mx:DataGridColumn headerText="Column 1" dataField="col1" resizable="false" draggable="false" />
                      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                  </mx:columns>
              </mx:DataGrid>
          </mx:Application>

           

          Hope this helps

           

          Andrew