FlexGrid "No Records" label

FlexGrid "No Records" label

Posted by: daniel.koffler on 28 April 2023, 7:53 pm EST

• 

  daniel.koffler

  • Post Options:
  • Link
    Copy

  Posted 28 April 2023, 7:53 pm EST

  Hello,

  If my datasource does not contain any records, I want to display a respective label in the grid. I want to show grid column headers and a “No Records” label below centred and/or centred in the grid content area.

  What is best practice to achieve this requirement?

  Thank you
  
  Daniel

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 1 May 2023, 11:01 pm EST

  Hi Daniel,
  
  For this, we need to add the Unbound row to the FlexGrid with the condition that the records are empty.
  
  Then hide this row when the records are available.

  Please refer to the following code snippet for reference:

  @if (_customers == null)
  {
      <p><em></em></p>
  }
  else
  
  {
      <button @onclick="PopuplateData">Show Grid Data</button>
      <FlexGrid @ref="grid" AutoGenerateColumns="false" AllowMerging="GridAllowMerging.Cells" HeadersVisibility="GridHeadersVisibility.Column" Style="@("max-height:50vh;height:50vh;")">
          <FlexGridColumns>
              <GridColumn Header="Active"  Binding="Active"  />
              <GridColumn Header="First Name" Binding="FirstName"  />
              <GridColumn Header="Last Name" Binding="LastName"  />
              <GridColumn Header="OrderCount" Binding="OrderCount" />
              <GridColumn Header="LastOrderDate" Binding="LastOrderDate"  />
          </FlexGridColumns>
          <FlexGridRows>
              @if(_customers.Count == 0)
              {
                  <GridRow IsReadOnly="true" AllowMerging="true" Height="100" >
  
                  </GridRow>
              }
          </FlexGridRows>
      </FlexGrid>
  }
  <style>  
      .flexgrid-cell.merged-cell{
          justify-content:center!important;
      }
  </style>
  
  
  @code {
      FlexGrid? grid;
      string[] data = "US,UK,Japan,India,Italy".Split(',');
      public ObservableCollection<Customers> _customers;
      protected override void OnAfterRender(bool firstRender)
      {
          if (firstRender)
              PopulateUnboundGrid();
      }
      public void PopuplateData()
      {
          grid.Rows[0].IsVisible = false;
          for (int i = 0; i < grid.Columns.Count; i++)
          {
              grid.Columns[i].AllowMerging = false;
          }
          grid.AllowMerging = GridAllowMerging.None;
          _customers = Customers.GetCustomers(100);
          grid.ItemsSource = _customers;
      }
      private void PopulateUnboundGrid()
      {
          if(_customers.Count ==0)
          {
              for (int r = 0; r < grid.Rows.Count; r++)
              {
                  for (int c = 0; c < grid.Columns.Count; c++)
                  {
                      grid.Columns[c].AllowMerging = true;
                      grid[r, c] = string.Format("No Records to display!!!", r, c);
                  }
              }
  
          }
  
      }
      protected override void OnInitialized()
      {
          _customers = Customers.GetCustomers(0);
      }
  }

  Hope it helps!

  Regards,
  
  Manish Gupta