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

  1. #1

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

    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>
    Last edited by Daniil; Dec 01, 2015 at 5:22 PM. Reason: [CLOSED]
  2. #2
    Hi @susanz,

    I have not found any simple way rather that adding a new line for all the Columns:
    .Text("Price<br>&nbsp;")
  3. #3
    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
  4. #4
    I was not able to find a CSS solution. Although, it doesn't mean it doesn't exist:)
  5. #5
    Got it, thanks Daniil, you can close this ticket.
    Thanks
    -szhang

Similar Threads

  1. Replies: 5
    Last Post: Oct 02, 2013, 10:57 PM
  2. [CLOSED] Line chart- Working with multiple lines
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 29, 2013, 5:09 AM
  3. Filter multiple data in grid
    By Anburaja in forum 1.x Help
    Replies: 4
    Last Post: Nov 24, 2012, 2:10 AM
  4. filter above grid header
    By rnachman in forum 1.x Help
    Replies: 1
    Last Post: Feb 08, 2011, 10:01 PM
  5. [CLOSED] Add filter button to grid column header
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 08, 2009, 11:10 AM

Posting Permissions