Conditional Formating Rows

Conditional Formating Rows

Posted by: matth on 24 October 2017, 9:37 am EST

• 

  matth

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 October 2017, 9:37 am EST

  OK, I have thought I was pretty nifty when I put this together until I filtered:

  
  <style>
      .OverShip {
          background-color: #ff6666 !important;
      }
  </style>
  ...the grid...
  <script type="text/javascript">
  $(function () {
          var flex = wijmo.Control.getControl("#flexGrid");
          flex.rows.forEach(function (row) {
              if (row.dataItem.QtyOnOrder < row.dataItem.QtyInvoiced) {
                  row.cssClass = "OverShip";
              }
          });	
  }
  </script>
  
  

  It looks great when I run the page, but when I filter the page the CSS is overridden!

  I have tried to use this:

  .Filterable(f=> f.OnClientFilterChanged("changing"))
  

  when creating the grid using HTML helpers with a function:

  function setRowColors() {
          console.log("filtering");
          var flex = wijmo.Control.getControl("#flexGrid");
          flex.rows.forEach(function (row) {
              if (row.dataItem.QtyOnOrder < row.dataItem.QtyInvoiced) {
                  row.cssClass = "OverShip";
              }
          });
      }
  
      function changing(s, e) {
          setRowColors();
      }
  

  But that doesn’t do anything! How can I persist the color formatting I want?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 October 2017, 8:41 pm EST

  Hi Matthew,
  
  If we are correct, you are using server-side filtering. You need to set DisableServerRead to true to apply class on row. Since as you applied filtering and onClientFilterChanged event gets triggered which loads the rows from Server and rerender the FlexGrid rows and class applied for row gets removed. Please use the following code snippet:

  @Html.C1().FlexGrid().Id("fg").Filterable(f => f.OnClientFilterApplied("changing")).AllowSorting(false).Bind(ib => ib.DisableServerRead(true).Bind(Url.Action("GridReadProducts")))
  

  If you would like to use Server-side filtering, you need to handle OnClientLoadedRows event. Please refer to the attached code snippet for the same:

  @Html.C1().FlexGrid().Id("fg").AllowSorting(false).Bind(ib => ib.DisableServerRead(false).Bind(Url.Action("GridReadProducts"))).OnClientLoadedRows("changing")
  

  ~Manish

• 

  matth

  • Post Options:
  • Link
    Copy

  Posted 27 October 2017, 3:50 am EST

  I was using DisableServerRead(true) and the issue persisted. I was able to to get it to work with .OnClientLoadedRows(“changing”) however! Thank you!