Add tooltip and ... to header and tree in your AdvancedDataGrid

最新推荐文章于 2025-02-04 00:30:00 发布

最新推荐文章于 2025-02-04 00:30:00 发布 · 98 阅读

flex 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何为AdvancedDataGrid组件添加自定义headerRenderer和groupItemRenderer，以实现tooltip提示和内容自动裁剪以适应宽度的功能。通过提供的代码示例，读者可以轻松解决在数据网格中显示和交互的问题。

The default advancedwon't show any toolTip and truncate to fit the width ,
so I look for solution quit long time, and figure out this solution .
you can add the follew code into AdvancedDataGrid

<mx:headerRenderer>
 <mx:Component>
  <mx:AdvancedDataGridHeaderRenderer >
   <mx:Script>
    <![CDATA[
     import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
        
     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
     {
               if(this.label.truncateToFit("..."))
      {
         if(this.data != null && this.data is AdvancedDataGridColumn)
        {
         var col:AdvancedDataGridColumn = this.data as AdvancedDataGridColumn;
         this.label.toolTip = col.headerText;
        }
      }
     super.updateDisplayList(unscaledWidth, unscaledHeight);
     }
    ]]>
   </mx:Script>
      
  </mx:AdvancedDataGridHeaderRenderer>
 </mx:Component>
</mx:headerRenderer>
<mx:groupItemRenderer>
 <mx:Component>
  <mx:AdvancedDataGridGroupItemRenderer>
   <mx:Script>
    <![CDATA[
    import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
    import mx.controls.AdvancedDataGrid;
        
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void    
    {        
     super.updateDisplayList(unscaledWidth, unscaledHeight); 
     if(listData != null ){
      this.label.toolTip = listData["item"].yourValueField;
      this.label.truncateToFit("...");
      }  
     } 
    ]]>
   </mx:Script>
  </mx:AdvancedDataGridGroupItemRenderer>
 </mx:Component>
</mx:groupItemRenderer>