8 Replies Latest reply on Sep 13, 2016 7:23 AM by meganic59

    Header Width for a Spark DataGrid

    bucpatr1 Level 2

      I recently replaced an mx:DataGrid in one of my components with the new spark DataGrid and I noticed that the columns were so narrow that most of the header labels were unreadable. I eventually figured out that the spark datagrid was basing the column width on the length of the longest displayed item in the contents. So for example, if the column is showing state abreviations, the header would only show the first two or three letters of the header text and the rest would be truncated. What I need to know is whether there is some way to reverse this behavior. I want the width of each column to be based on the length of the header text, not the content data.

       

      I know the 'recommended' way of setting column width is with a typical item, but in this case that's not an option. I also tried creating a custom DataGridSkin that sets the minWidth property of the headerRenderer but it had no effect. I'm pulling my hair out trying to get this to work, any help would be much appreciated.

        • 1. Re: Header Width for a Spark DataGrid
          Flex harUI Adobe Employee

          Why is typical item not an option?  Seems like you can make special instance of the dataprovider item and stuff the column titles into the fields?

          • 2. Re: Header Width for a Spark DataGrid
            bucpatr1 Level 2

            Unfortunately, the dataprovider is a collection of DTO objects being returned from the server. The DTO has properties that can't easily be 'stuffed' with sting values or else that is what I would do.

            • 3. Re: Header Width for a Spark DataGrid
              Flex harUI Adobe Employee

              Are your renderers hardwired to the item type?  If not, I think you can stuff in a mock object as the typicalItem.

              • 4. Re: Header Width for a Spark DataGrid
                bucpatr1 Level 2

                Right now I'm not doing anything special with the renderers, everything is the default. If I try using anything other than my DTO class as a typical item though it will throw a runtime error.

                • 5. Re: Header Width for a Spark DataGrid
                  Flex harUI Adobe Employee

                  Hmm.  What error do you get? (including stack trace)

                  1 person found this helpful
                  • 6. Re: Header Width for a Spark DataGrid
                    bucpatr1 Level 2

                    Actually, when I took a closer look at the stack trace I was able to figure out the problem. It turns out that the problem with the typicalItem was being caused by a labelFunction on one of my columns. The label function was expecting to see the DTO object as it's first parameter. In the process of setting up the typicalItemRenderer, the grid column was calling itemToLabel with the typicalItem causing a class cast expection.

                     

                    I was able to resolve that issue but now I'm seeing another one. The typicalItem I creat isn't having any effect of the width of my datagrid columns. The problem is, GridColumn doesn't have an itemRendererFunction set by default. The itemToRenderer function of GridColumn only uses the typicalItem if there is an itemRendererFunction defined. Is that the intended behavior? If so, the documentation really needs to mention that fact somewhere.

                     

                    It looks like the typicalItem is actually getting applied somewhere, I just didn't have long enough string to see the effect. I'm still curious though, if not in the itemRendererFunction, what Class/function is actually responsible for taking the widths from the typicalItem and applying them to the columns?

                    • 7. Re: Header Width for a Spark DataGrid
                      Flex harUI Adobe Employee

                      Can you post a 20-line test case?

                      • 8. Re: Header Width for a Spark DataGrid
                        meganic59

                        Hi,

                        i reply very late since since we are in 2016, but I think you simply have to check your labelFunction code.

                        I assume your function code is something like this :

                        Example:

                        private function gridLabelfunction(item:Object, column:GridColumn):String

                        {

                               if(item is DTOTYPE)

                               {

                                       return (item as DTOTYPE).PATH_TO_DTOTYPE_LABEL();

                               }

                              return null; //- Oups..your typical object is not of DTOTYPE, so each field returns null label

                          }

                         

                        private function gridLabelfunction(item:Object, column:GridColumn):String

                        {

                               if(item is DTOTYPE)

                               {

                                       return (item as DTOTYPE).PATH_TO_DTOTYPE_LABEL();

                               }

                              else if(item)

                              {

                                  return item[column.dataField]; //- oh yeah, my value for that field from my typicalItem is here !

                              }

                              return null;

                          }

                         

                        Hopes it could helps