Ticket T815632
Visible to All Users

Data Grid for Blazor - How to refresh DxDataGrid after changing its data source

created 6 years ago (modified 6 years ago)

Hello support,

I am using the Data Grid control in my Blazor application. I have implemented async functions for RowRemoving, RowUpdating and RowInserting. The functions work and the data is updated. However, after the RowRemoving and RowInserting functions finish and the data source is updated the grid does not reflect the insert or deletion.

Here is my data grid:

HTML
<DxDataGrid Id="DxGrid1" Data="@objDs" PageSize="20" RowRemoving="@((dataItem) => OnRowRemoving(dataItem))" RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))" RowInserting="@((newValues) => OnRowInserting(newValues))" > <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn> <DxDataGridColumn Field="@nameof(objAM.Origcity)" Caption="Orig. City" TextAlignment="@DataGridTextAlign.Right"></DxDataGridColumn> <DxDataGridComboBoxColumn Field="@nameof(objAM.Origstate)" Caption="Summary" Data="@summaries"></DxDataGridComboBoxColumn> <DxDataGridColumn Field="@nameof(objAM.Destcity)" Caption="Dest City" TextAlignment="@DataGridTextAlign.Right"></DxDataGridColumn> <DxDataGridComboBoxColumn Field="@nameof(objAM.Deststate)" Caption="Dest State" Data="@summaries"></DxDataGridComboBoxColumn> <DxDataGridColumn Field="@nameof(objAM.Rtmiles)" Caption="Miles" TextAlignment="@DataGridTextAlign.Right"></DxDataGridColumn> </DxDataGrid>

Here is my code with functions for RowRemoving and RowInserting:

C#
@functions { //Begin Code public TAIContext _db = new TAIContext(); public Anamiles objAM; IEnumerable<Anamiles> objDs; public int DeleteId; public string NewValue; public string name; bool success; string[] summaries = new string[] { " ", "AJ", "AL", "AK", "AB", "AZ", "AR", "BC", "CA", "CO", "CT", "DE", "DC", "DU", "FL", "FU", "GA", "HI", "ID", "IL", "IN", "INTL", "IA", "KS", "KY", "LA", "ME", "MB", "MD", "MA", "DF", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NB", "NH", "NJ", "NM", "NY", "NF", "NC", "ND", "NT", "NS", "OH", "OK", "ON", "OR", "PA", "PE", "PR", "QC", "RA", "RI", "SK", "SH", "SC", "SD", "TN", "TX", "UM", "UT", "VT", "VA", "WA", "WV", "WI", "WY", "YT" }; protected override async Task OnInitializedAsync() { objAM = _db.Anamiles.FirstOrDefault(); objDs = await _db.Anamiles.ToListAsync(); name = await sessionStorage.GetItemAsync<string>("name"); } async void OnRowRemoving(Anamiles dataItem) { _db.Anamiles.Remove(dataItem); await _db.SaveChangesAsync(); objDs = await _db.Anamiles.ToListAsync(); NewValue = "OnRowRemoving"; await sessionStorage.SetItemAsync("name", "Record removed"); } void OnRowUpdating(Anamiles updatingDataItem, Dictionary<string, object> newValues) { object objOut; success = newValues.TryGetValue("Rtmiles", out objOut); if (success == true) { updatingDataItem.Rtmiles = Convert.ToInt32(objOut); } success = newValues.TryGetValue("Origcity", out objOut); if (success == true) { updatingDataItem.Origcity = Convert.ToString(objOut); } success = newValues.TryGetValue("Destcity", out objOut); if (success == true) { updatingDataItem.Destcity = Convert.ToString(objOut); } success = newValues.TryGetValue("Origstate", out objOut); if (success == true) { updatingDataItem.Origstate = Convert.ToString(objOut); } success = newValues.TryGetValue("Deststate", out objOut); if (success == true) { updatingDataItem.Deststate = Convert.ToString(objOut); } _db.Anamiles.Update(updatingDataItem); _db.SaveChanges(); objDs = _db.Anamiles.ToList(); NewValue = "success"; } async void OnRowInserting(Dictionary<string, object> newValues) { Anamiles updatingDataItem = new Anamiles(); object objOut; success = newValues.TryGetValue("Rtmiles", out objOut); if (success == true) { updatingDataItem.Rtmiles = Convert.ToInt32(objOut); } else { updatingDataItem.Rtmiles = 0; } success = newValues.TryGetValue("Origcity", out objOut); if (success == true) { updatingDataItem.Origcity = Convert.ToString(objOut); } success = newValues.TryGetValue("Destcity", out objOut); if (success == true) { updatingDataItem.Destcity = Convert.ToString(objOut); } success = newValues.TryGetValue("Origstate", out objOut); if (success == true) { updatingDataItem.Origstate = Convert.ToString(objOut); } success = newValues.TryGetValue("Deststate", out objOut); if (success == true) { updatingDataItem.Deststate = Convert.ToString(objOut); } _db.Anamiles.Add(updatingDataItem); await _db.SaveChangesAsync(); objDs = await _db.Anamiles.ToListAsync<Anamiles>(); NewValue = "OnRowInserting"; await sessionStorage.SetItemAsync("name", "Record added"); } void OnClick() { // await sessionStorage.SetItemAsync("name", ""); NavigationManager.NavigateTo(@"\AdminTools"); } //End Code }

Is there something I am missing to tell the Data Grid to refresh from the Data Source ? Also, what are the properties to control the appearance of the buttons inside the data grid? Any suggestions would be greatly appreciated.

Thanks,

Keith Hunt

Answers approved by DevExpress Support

created 6 years ago (modified 5 years ago)

Hello Keith,
 
UPDATED:

We changed our code so that the StateHasChanged method doesn't affect the grid in version 19.2.1. Now the Refresh method should be called instead

Previous version:
I recommend you add the following code to update DxDataGrid after changing the data source:

C#
async void OnRowRemoving(Anamiles dataItem) { //... await InvokeAsync(StateHasChanged); }

Let me know if it helps

Also, what are the properties to control the appearance of the buttons inside the data grid?

DxDataGrid doesn't provide any API to change the appearance of the command buttons (like "New", "Edit", "Update", etc.). However, our DxDataGrid's appearance can be changed using different Bootstrap themes (you can check it with our demos). The appearance of the command buttons is changed in the case as well.
 
Regards,
Vova

    Show previous comments (1)
    Vova (DevExpress Support) 6 years ago

      You are welcome!

        This work on my master grid but don't work in my detail grid. It refresh the detail grid if I click on the the next row in my master grid and go back to the row of the detail grid.

        Vova (DevExpress Support) 5 years ago

          Hello,

          I've created a separate ticket on your behalf (T889455: DataGrid for Blazor - How to refresh the detail grid). It has been placed in our processing queue and will be answered shortly.

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.