Add row to FlexGrid programmatically

Add row to FlexGrid programmatically

Posted by: daniel.koffler on 5 April 2023, 8:18 pm EST

• 

  daniel.koffler

  • Post Options:
  • Link
    Copy

  Posted 5 April 2023, 8:18 pm EST

  Hello,

  how can I add a new row to FlexGrid programmatically. The grid is bound to an ObservableCollection. I have set NewRowPosition=“GridNewRowPosition.None” as I want to implement my own logic (e.g. setting default values)

  If adding a new row the row should be marked as new with the “star” character in the row header.

  Thank you
  
  Daniel

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 11 April 2023, 7:52 pm EST - Updated 11 April 2023, 7:57 pm EST

  Hi Daniel,

  To add the rows programmatically, you could use the Insert() method available on the ObservableCollection that inserts an element at specified position.

  You could create an object with default values and insert it to the ObservableCollection using the Insert method.

  You could override the GetCellContentRenderFragment method, check for the “RowHeader” cell type and show the “*” character in the row header.

  You could either show the “" character only on the first row when a new row is added or you could show the "” character on all the new rows added with default values.

  Kindly refer to the following code snippet and the attached sample:

      // Function to add New Row
      private void AddNewRow()
      {
          // Create a new Object
          dynamic weatherForecast = new ExpandoObject();
          weatherForecast.Date = new DateTime();
          weatherForecast.Summary = "Default Value";
          weatherForecast.TemperatureC = 25;
          // Insert the item
          forecasts.Insert(0, weatherForecast);
          newRowCount += 1;
          isNewRowInserted = true;
      }
  
      private void ClearNewRowIndicator()
      {
          newRowCount = 0;
          isNewRowInserted = false;
      }
  
          public override RenderFragment GetCellContentRenderFragment(GridCellType cellType, GridCellRange range)
          {
              // For single row to show indicator use
              // (cellType == GridCellType.RowHeader && range.Row == 0 && isNewRowInserted)
              if (cellType == GridCellType.RowHeader && range.Row < newRowCount)
              {
                  // Render a Fragment with Empty String
                  RenderFragment rf3 = (builder) =>
                 {
                     builder.OpenElement(0, "div");
                     builder.AddAttribute(2, "class", "custom-class");
                     builder.AddContent(1, "*");
                     builder.CloseElement();
                 };
                  return rf3;
              }
              else
              {
                  return base.GetCellContentRenderFragment(cellType, range);
              }
          }
  

  Single Row to Show Indicator:

  

  Multiple Rows to Show Indicator:

  

  Regards,

  Ankit

  Sample: AddRowsToFlexGridProgamatically.zip

• 

  daniel.koffler

  • Post Options:
  • Link
    Copy

  Posted 11 April 2023, 10:36 pm EST

  Thank you.
  
  If using NewRowPositon and starting to enter data for the new row but then press ESC, the new but not yet committed (focus is removed from new row) the row is removed again. How can I achieve this behaviour?

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 13 April 2023, 9:20 pm EST - Updated 13 April 2023, 9:25 pm EST

  Hi Daniel,

  As per my understanding, if the new row hasn’t been committed, you want to delete the newly added row on “Esc” key press.

  You could override the OnKeyDown() method of the GridCellFactory class, handle the Esc key press, check if it has been committed or not, then remove the item from the Observable Collection.

  Kindly refer to the following code snippet and the attached sample:

          protected override bool OnKeyDown(KeyboardEventArgs e)
          {
              if (e.Key == "Escape")
              {
                  OnEscKeyPress();
              }
              if(e.Key == "Enter")
              {
                  OnEnterKeyPress();
              }
  
              return base.OnKeyDown(e);
          }
  
      private static void OnEscKeyPress()
      {
          if(_grid.ActiveEditor == null && isNewRowInserted == true)
          {
              // Delete the Data
              forecasts.RemoveAt(0);
              isNewRowInserted = false;
              _grid.Refresh();
          }
  
      }
  
      private static void OnEnterKeyPress()
      {
          if(_grid.Selection.Row == 0 && isNewRowInserted == true)
          {
              isNewRowInserted = false;
              _grid.Refresh();
          }
      }
  

  If you have a different use case, kindly elaborate it so that we could have a better understanding of your use case and could assist you accordingly.

  Regards,

  Ankit

  Sample: AddRowsToFlexGridProgamatically.zip