Add row to FlexGrid programmatically

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

  • 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

  • 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

  • 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?

  • 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

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels