How to add columns and Rows in SfDataGrid Programatically From ViewModel ?

[Charwaka]

Hi ,

i want to add rows and columns to SfDataGrid Programatically From ViewModel .let me know how can i do this .and also  i want whenever scrolling i want to know what is the first element in the Grid Row "0" column "0" . 
?

[Divakar Subramaniam]

Hi Charwaka, 

 

 

Thanks for contacting Syncfusion Support. 

 

 

You can achieve your requirement (add rows/columns programmatically from ViewModel) using Command. Please refer the below code snippet. 

 

<StackLayout> 

    <Button x:Name="btn1" 

            Command="{Binding AddRowCommand}" 

            CommandParameter="{x:Reference dataGrid}" 

            Text="ClickToAddRow" /> 

 

    <Button x:Name="btn2" 

            Command="{Binding AddColumnCommand}" 

            CommandParameter="{x:Reference dataGrid}" 

            Text="ClickToAddColumn" /> 

 

    <sfGrid:SfDataGrid ………> 

</StackLayout> 

 

// In ViewModel 

public ViewModel() 

{ 

    _addRow = new Command(ExecuteAddRow); 

    _addColumn = new Command(ExecuteAddColumn); 

} 

 

#region Command methods 

 

private void ExecuteAddRow(object obj) 

{ 

    this.OrdersInfo.Insert(0,new OrderInfo() { OrderID = 10000, Country = "US", CustomerID = "Alfki",Freight = "345", IsClosed = true }); 

} 

 

private void ExecuteAddColumn(object obj) 

{ 

    var dataGrid = obj as SfDataGrid; 

    (obj as SfDataGrid).Columns.Insert(0,new GridTextColumn() { MappingName = "OrderID" }); 

} 

 

#endregion 

 

#region Commands 

 

private Command _addRow; 

 

public Command AddRowCommand 

{ 

     get 

     { 

         return _addRow; 

     } 

     set 

     { 

         _addRow = value; 

     } 

} 

 

private Command _addColumn; 

 

public Command AddColumnCommand 

{ 

     get 

     { 

         return _addColumn; 

     } 

     set 

     { 

         _addColumn = value; 

     } 

} 

 

#endregion 

 

 

We have prepared a simple sample by achieved your requirement and you can dwonlaod the same from the below link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/128850/ze/DataGridDemo1722961943  

 

 

It is not possible to get the first column/row while scrolling happens. However, you can get the first row/column using the below code snippet. 

 

dataGrid.GridLoaded += DataGrid_GridLoaded; 

 

private void DataGrid_GridLoaded(object sender, GridLoadedEventArgs e) 

{ 

    var firstColumn = dataGrid.Columns[0]; 

    var firstRow = dataGrid.GetRowGenerator().Items.FirstOrDefault(x => x.RowType == RowType.DefaultRow).RowData; 

} 

 

 

 

Regards, 

Divakar. 

 

[Charwaka]

i am trying to add columns dynamically like this. but as well as i need to generate Rows also for this Columns .how can i do this ? please find attached screenshot

private async Task ExecutePullToRefresh()

        {

            var days = GetDaysInYear(DateTime.Now.Year);

            for (int i = 0; i < days; i++)

            {

                if (DateTime.Now.AddDays(i).Day == 1)

                {

                    App.CurrentGrid.Columns.Add(new GridTextColumn() { MappingName = "Month", HeaderText = DateTime.Now.AddDays(i).ToString("Y") });

                }

                else

                {

                    App.CurrentGrid.Columns.Add(new GridTextColumn() { MappingName = "Date", HeaderText = String.Format("{0}" + Environment.NewLine + "{1}", DateTime.Now.AddDays(i).Day.ToString(), DateTime.Now.AddDays(i).DayOfWeek.ToString().Substring(0, 3)) });

                }

            }

        }

 

             public static int GetDaysInYear(int year)

        {

            var thisYear = new DateTime(year, 1, 1);

            var nextYear = new DateTime(year + 1, 1, 1);

            return (nextYear - thisYear).Days;

        }

Attachment: Screenshot_2_cecf2cb8.rar

[Divakar Subramaniam]

Hi Charwaka, 

 

Thanks for the update. 

 

We have understand that you need to add the rows at runtime (like using PullToRefresh command) through viewmodel. We have modified the sample by adding the rows through PullToRefresh as you required and you can download the same from the below link. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/128850/ze/DataGridDemo1116377312  

 

Please let us know if you have any concerns. 

 

Regards, 

Divakar.