[CLOSED] How to lineup the filter row when grid header has multiple lines

[susanz]

Hi, Some of my grid column headers need to be displayed in multiple lines, by default, it makes the filter box goes up and down based on the header text. How do I make the filter stay at the bottom of the header?
Thanks
-szhang

Example code :

@using Ext.Net;
@using Ext.Net.MVC;

<h2>GridNoDesktop</h2>

@{
    var data = new object[]
    {
        new object[] { "3m Co", 71.72, 0.02, 0.03 },
        new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49 },
        new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28 },
        new object[] {"E.I. du Pont de Nemours and Company", 45.45, 0.73, 1.63 }
    };    
}


@(
    Html.X().Window()
        .Icon(Icon.Table)
        .Width(740)
        .Height(480)
        .Layout(LayoutType.Fit)
        .Title("Grid Window")
        .Items(
                            Html.X().GridPanel()
                                .Store(
                                    Html.X().Store()
                                        .DataSource(data)
                                        .Model(
                                            Html.X().Model()
                                                .Fields(
                                                    Html.X().ModelField().Name("Company"),
                                                    Html.X().ModelField().Name("Price").Type(ModelFieldType.Float),
                                                    Html.X().ModelField().Name("Change").Type(ModelFieldType.Float),
                                                    Html.X().ModelField().Name("PctChange").Type(ModelFieldType.Float)
                                                )
                                        )
                                        .Reader(
                                            Html.X().ArrayReader()
                                        )
                                )
                                .ColumnModel(
                                    Html.X().RowNumbererColumn(),
                                    
                                    Html.X().Column()
                                        .Text("Company<br>Name")
                                        .Editor(Html.X().ComboBox()
                                                .QueryMode(DataLoadMode.Remote)
                                                .TriggerAction(TriggerAction.All)
                                                .Items(
                                                  new ListItem("3m Co",  "3m Co"),
                                                   new ListItem("American International Group, Inc.",  "American International Group, Inc."),
                                                    new ListItem("E.I. du Pont de Nemours and Company", "E.I. du Pont de Nemours and Company")
                                                )
                                        )
                                       // .Flex(1)
                                        .Locked(true)
                                        .DataIndex("Company"),
                                        
                                    Html.X().Column()
                                        .Text("Price")
                                        .Width(70)
                                        .DataIndex("Price"),
                                      //  .Renderer(RendererFormat.UsMoney),
                                        
                                    Html.X().Column()
                                        .Text("Change")
                                        .Width(70)
                                        .DataIndex("Change"),
                                        
                                    Html.X().Column()
                                        .Text("% Change")
                                        .Width(70)
                                        .DataIndex("PctChange")
                                )
                             .Plugins(Html.X().CellEditing())
                             .Plugins(Html.X().FilterHeader())
            
        )
                                
  )

   
 <style>
         .x-column-header-inner {
           /* line-height: normal;
            padding-top:3px!important;
            padding-bottom:3px!important*/
            text-align: center;
            /*top:20%;*/
        }
  </style>

[Daniil]

Hi @susanz,

I have not found any simple way rather that adding a new line for all the Columns:

.Text("Price<br>&nbsp;")

[susanz]

Hi Daniil, Thanks for your suggestion. In our application, the number of lines on each header is configured by user, each column could have different lines. It will require a little more code to add lines to each column. I am not expert on css, do you think it can easier or good to do this by updating the filter css?
Thanks
-szhang

[Daniil]

I was not able to find a CSS solution. Although, it doesn't mean it doesn't exist:)

[susanz]

Got it, thanks Daniil, you can close this ticket.
Thanks
-szhang