Declined
Last Updated: 06 Jul 2022 11:05 by ADMIN
Rod
Created on: 02 Mar 2022 22:12
Category: UI for .NET MAUI
Type: Bug Report
0
RadDataGrid Binding From Button Click

I have a form with a RadDataGrid on it.

I am trying to bind it's itemssource with the following code:

var products = JsonSerializer.Deserialize<List<Product>>(response);
dataGrid.ItemsSource = products;

No data is showing up in the grid.

If I set the value in the Constructor of the form (like in the demo code provided it binds fine.)

private void OnCounterClicked(object sender, EventArgs e)
{

      try
      {
          var criteria = txtSearchBox.Text;
          var response = client.DownloadString($@"http://rebelscum/apiswise/product/search?searchCriteria={criteria}");
       
          var products = JsonSerializer.Deserialize<List<Product>>(response);
          dataGrid.ItemsSource = products;
       
        }
        catch (Exception ex)
      {
       
          var x = 1;
      }

 

    <telerikDataGrid:RadDataGrid x:Name="dataGrid" Grid.Row="3" AutoGenerateColumns="False" >
                <telerikDataGrid:RadDataGrid.Columns>
                    <telerikDataGrid:DataGridTextColumn PropertyName="id" 
                                                        HeaderText="Id">
                        <telerikDataGrid:DataGridTextColumn.CellContentStyle>
                            <telerikDataGrid:DataGridTextCellStyle TextColor="Green" 
                                                                   FontSize="15" 
                                                                   SelectedTextColor="Orange"  />
                        </telerikDataGrid:DataGridTextColumn.CellContentStyle>
                    </telerikDataGrid:DataGridTextColumn>
                    <telerikDataGrid:DataGridTextColumn PropertyName="description1" 
                                                        HeaderText="Description">
                        <telerikDataGrid:DataGridTextColumn.CellContentStyle>
                            <telerikDataGrid:DataGridTextCellStyle TextColor="Green" 
                                                                   FontSize="15" 
                                                                   SelectedTextColor="Orange"  />
                        </telerikDataGrid:DataGridTextColumn.CellContentStyle>
                    </telerikDataGrid:DataGridTextColumn>
                </telerikDataGrid:RadDataGrid.Columns>
            </telerikDataGrid:RadDataGrid>
2 comments
ADMIN
Lance | Senior Manager Technical Support
Posted on: 03 Mar 2022 00:11

Hi Rod,

I forgot to mention, if you're looking for technical assistance, the Bug Report / Feature Request channels in the Feedback Portal are not a good way to do this. this location is specific to Bug Reports and can take significant time to investigate and develop, the approach is very different than looking into issues you're having with implementations.

Instead, please post questions for technical help in the MAUI Forums => Questions on UI for .NET MAUI Forum | Telerik Forums

When .NET MAUI becomes a release framework, we will also release UI for MAUI. At that time, you can then open support tickets. as it stand right now, the fastest way to get answers is in the forums.

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Lance | Senior Manager Technical Support
Posted on: 03 Mar 2022 00:07

Hello Rod,

The DataGrid should automatically detect changes and show the new items. 

I suspect the DataGrid might be inside a parent container that is restricting its height. Although this article if for Xamairn.Forms, the concept is still the same in MAUI, so I recommend you give it a read to become familiar with the situation Controls Are Not Appearing.

 

Can you make sure it is not inside a StackLayout or a Grid RowDefinition with Height set to auto? (not just direct parent, any StackLayout to root will cause this. Other than that, I can't see why a Button click wouldnt work, it is beign invoked ont he UI thread.,

A typical better way to handle dynamic data is to use an ObservableCollection.

In the constructor, you set up a new, empty collection and set it as the DataGrid's ItemsSource

class MyPage
{
    private ObservableCollection<Product> products;

    public MyPage()
    {
        InitializeComponent();

        products = ObservableCollection<Product>();

        dataGrid.ItemsSource = products;
    }
}

then, in you button click, after fetching the data, you add those items to the ObservableCollection. 

class MyPage
{
    private ObservableCollection<Product> products;
    private HttpClient client;

    public MyPage()
    {
        InitializeComponent();
        client = new HttpClient();
        products = ObservableCollection<Product>();
        dataGrid.ItemsSource = products;
    }
    
    private async void OnCounterClicked(object sender, EventArgs e)
    {
      try
      {
          var criteria = txtSearchBox.Text;
          
          var jsonString = await client.GetStringAsync($@"http://rebelscum/apiswise/product/search?searchCriteria={criteria}");
       
          var result = JsonSerializer.Deserialize<List<Product>>(jsonString);
          
          foreach(var product in result)
          {
              products
          }
          
          dataGrid.ItemsSource = products;
       
        }
        catch (Exception ex)
        {
          var x = 1;
        }
    }
}

The DataGrid automatically shows any changes that happen inside the ObservableCollection (this would not happen for List<T> because it doent have an internal CollectionChanged event).

A final note: I can't tell what kind of client you're using, but I've updated the web code to use the modern HttpClient. This is particularly important if you're trying to search, you don't want to block the UI thread while waiting for synchronous results.

Regards,
Lance | Manager Technical Support
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.