Having the Row Header on the right | FlexGrid

Having the Row Header on the right | FlexGrid

Posted by: matth on 20 September 2017, 10:01 am EST

• 

  matth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 September 2017, 10:01 am EST

  I know i can use:

  @(Html.C1().FlexGrid<Sale>()
      .AutoGenerateColumns(false)
      .Bind(bl => bl.Bind(Model))
      .Width(620)
      .CssClass("grid")
      .Columns(bl =>
      {
          bl.Add(cb => cb.Binding("ID"));
          bl.Add(cb => cb.Binding("Start"));
          bl.Add(cb => cb.Binding("End"));
          bl.Add(cb => cb.Binding("Country"));
          bl.Add(cb => cb.Binding("Product"));
      })
      .HtmlAttribute("dir", "rtl")
  )
  

  To put the row header on the right of the page, however, when I do this I get an undesired result of all of the columns being oriented in a right alignment.

  How can I write in style to ensure that each column is left aligned or to just put the row header on the right of the data grid?

  Thank you in advance.
  
  Matt

• 

  nilay.vishwakarma

  • Post Options:
  • Link
    Copy

  Posted 21 September 2017, 10:32 pm EST

  Hi,

  Please try the code in attached sample.
  
  RTLAlign.zip

  ~nilay

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 11:57 am EST

  I used came up with this instead:

  <style>
      .grid {
          text-align: left;
      }
  </style>
      @(Html.C1().FlexGrid<OrderItemViewModel>()
                  .Id("flexGrid")
  ...
                  .HtmlAttribute("dir", "rtl")
                  .CssClass("grid"))
  

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 11:59 am EST

  The alignment though pushed to all of the functionality, including the filters. That created an odd effect with typing and cursor input in the filter field textbox…

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 12 October 2017, 12:52 pm EST

  Another thing to point out on this is that you may want to override a few classes to get a better look and feel:

  .wj-columnfiltereditor {
      direction:ltr !important;
  }
  

  you can also set the header row like this:

  function csFlexGrid_DragDropItemFormatter(panel, r, c, cell) {
          if (wijmo.grid.CellType.ColumnHeader == panel.cellType) {
              if (r == 0) {
                  cell.style.direction = "ltr";
              }
          }
      }
  
     @(Html.C1().FlexGrid<OrderItemViewModel>()
                  .Id("flexGrid")
  ...
  		.ItemFormatter("csFlexGrid_DragDropItemFormatter")
                  .HtmlAttribute("dir", "rtl")
                  .CssClass("grid"))