4 Replies Latest reply on Jun 12, 2010 7:18 PM by chris_t10

    Adding Images to AdvancedDataGrid Headers

    tguy895

      I need to add some images to the header of an advanced data grid in lieu of text....How is this done?

        • 1. Re: Adding Images to AdvancedDataGrid Headers
          chris.huston.t10 Level 3

          Here is one example:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                  {revenues:400, costs:300, unit:"machines"},
                  {revenues:200, costs:50, unit:"services"},
                  {revenues:300, costs:100, unit:"software"}]);
                 
              ]]>
          </mx:Script>

           

              <mx:AdvancedDataGrid x="29" y="27" id="adg1" designViewDataType="tree" dataProvider="{ac}">
                  <mx:columns>
                      <mx:AdvancedDataGridColumn headerText="Revenues" dataField="revenues">
                          <mx:headerRenderer>
                              <mx:Component>
                                  <mx:HBox height="30" verticalAlign="middle" paddingLeft="5">
                                      <mx:Image source="image_name_here.png"/>
                                      <mx:Label text="Revenues"/>

                                  </mx:HBox>
                              </mx:Component>
                          </mx:headerRenderer>
                      </mx:AdvancedDataGridColumn>
                      <mx:AdvancedDataGridColumn headerText="Costs" dataField="costs"/>
                      <mx:AdvancedDataGridColumn headerText="Unit" dataField="unit"/>
                  </mx:columns>
              </mx:AdvancedDataGrid>
             
          </mx:Application>

           

          Chris

          • 2. Re: Adding Images to AdvancedDataGrid Headers
            tguy895 Level 1

            Thanks Chris,

             

             

            This was a great start...i was wondering if there was any way where i could correspond a chart legend to the grid headers. For example, I have plotted three sets of data the the data from the chart corresponds to the grid...is there anyway to move the images form the legend and include them in the grid headers?

            • 3. Re: Adding Images to AdvancedDataGrid Headers
              srinth

              Hi,

               

              In flex 4. i tried with this code .

               

              Error: Description Resource Path Location Type Could not resolve <mx:Component> to a component implementation.

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                             xmlns:s="library://ns.adobe.com/flex/spark"
                             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                  </fx:Declarations>
                 
                  <fx:Script>
                      <![CDATA[
                      import mx.collections.ArrayCollection;
                      [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                      {revenues:400, costs:300, unit:"machines"},
                      {revenues:200, costs:50, unit:"services"},
                      {revenues:300, costs:100, unit:"software"}]);
                     
                      ]]>
                  </fx:Script>
                 
                 
                 
                  <mx:AdvancedDataGrid x="29" y="27" id="adg1" designViewDataType="tree" dataProvider="{ac}">
                      <mx:columns>
                          <mx:AdvancedDataGridColumn headerText="Revenues" dataField="revenues">
                              <mx:headerRenderer>
                                  <mx:Component>
                                      <mx:HBox height="30" verticalAlign="middle" paddingLeft="5">
                                          <mx:Image source="image_name_here.png"/>
                                          <mx:Label text="Revenues"/>
                                         
                                      </mx:HBox>
                                  </mx:Component>
                              </mx:headerRenderer>
                          </mx:AdvancedDataGridColumn>
                          <mx:AdvancedDataGridColumn headerText="Costs" dataField="costs"/>
                          <mx:AdvancedDataGridColumn headerText="Unit" dataField="unit"/>
                      </mx:columns>
                  </mx:AdvancedDataGrid>
              </s:Application>

              • 4. Re: Adding Images to AdvancedDataGrid Headers
                chris_t10

                With Flex 4, you need to change <mx:Component> to <fx:Component>

                 

                Chris