Hi guys,
I am fairly new to Blazor/Telerik but trying to get this to work. I introduced OnRead to my code so I can try to capture the grid row count. The problem is when WorkRecord is called it quits refreshing the grid. I have to F5 to see my updates.
Its almost as if OnRead gets in the middle of things and doesn't allow things to complete.
Any idea what I am doing wrong here?
@using Telerik.DataSource.Extensions
@inject DapperRepository<S4PSector4UpdateList> S4GridManager
@inject IJSRuntime js
@if (@S4Records != null && @cpar != null && @cpar.Initialized == true)
{
//FilterMode="@GridFilterMode.FilterRow"
<TelerikGrid
@ref="@GridRef"
OnUpdate=@UpdateItem
Data="@S4Records.ToArray()"
EnableLoaderContainer="true"
OnRead="@OnGridRead"
Pageable="true"
Sortable="true"
Resizable="true"
EditMode="@GridEditMode.Incell"
Size="@ThemeConstants.Grid.Size.Small"
SelectionMode="@GridSelectionMode.Single"
SelectedItems="@SelectedRecord"
ScrollMode="@GridScrollMode.Scrollable">
<GridToolBarTemplate>
<span class="k-toolbar-spacer"></span> @* add this spacer to keep the searchbox on the right *@
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">Not Started/Assigned</label> 
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">In Progress</label> 
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">Update Complete</label> 
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">Show Only My Records</label> 
<select name="cars" id="cars">
<option value="volvo">100</option>
<option value="saab">50</option>
<option value="opel">20</option>
<option value="audi">10</option>
</select>
<button >Assign Records</button>
<GridCommandButton Command="ExcelExport" Icon="@FontIcon.FileExcel">Export to Excel</GridCommandButton>
<GridSearchBox Width="200px"/>
</GridToolBarTemplate>
<GridColumns>
<GridColumn Field="@nameof(@S4PSector4UpdateList.geid)" Width="75px" Title="GEID" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(@S4PSector4UpdateList.soeid)" Width="55px" Title="SOEID" Editable="false" HeaderClass="center-me"/>
<GridCommandColumn Width="45px">
<GridCommandButton Command="WorkRecord" OnClick="@WorkRecord" Size="@ThemeConstants.Button.Size.Small">Work</GridCommandButton>
</GridCommandColumn>
<GridColumn Field="@nameof(S4PSector4UpdateList.primaryfullname)" Width="175px" Title="Full Name" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.process_name)" Width="80px" Title="Process Name" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.worked_status)" Width="75px" Title="Status" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.worked_by_user_soeid)" Width="75px" Title="User SOEID" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.worked_by_user_date)" DisplayFormat="{0:MM/dd/yyyy}" Title="Worked Date" Width="85px" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.insertdate)" DisplayFormat="{0:MM/dd/yyyy}" Title="Insert Date" Width="85px" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.note)" Title="Note" Width="150px" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.note_added_by)" Width="80px" Title="Added By" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.note_added_date)" DisplayFormat="{0:MM/dd/yyyy}" Title="Note Date" Width="85px" Editable="false" HeaderClass="center-me"/>
<GridColumn Field="@nameof(S4PSector4UpdateList.insertdate)" DisplayFormat="{0:MM/dd/yyyy}" Title="Insert Date" Width="85px" Editable="false" HeaderClass="center-me" />
<GridColumn Field="@nameof(S4PSector4UpdateList.sector_4_eligible_group)" Width="130px" Title="Sector 4 Eligible Group" Editable="false" HeaderClass="center-me"/>
</GridColumns>
</TelerikGrid>
}
@* 👇 Not Visible Components *@
<DisplayAndLogErrorComponent @ref="displayandlogcomponent"></DisplayAndLogErrorComponent>
@code
{
[CascadingParameter(Name = "S4pars")] S4CascadingParameters cpar { get; set; }
[Parameter] public Action Refresh { get; set; }
List<S4PSector4UpdateList> S4Records { get; set; }
public TelerikGrid<S4PSector4UpdateList> GridRef { get; set; }
private DisplayAndLogErrorComponent displayandlogcomponent;
//public S4PSector4UpdateList SelectedRecord { get; set; }
public IEnumerable<S4PSector4UpdateList> SelectedRecord { get; set; } = Enumerable.Empty<S4PSector4UpdateList>();
public int recordcount;
private async Task OnGridRead(GridReadEventArgs args)
{
var result = S4Records.ToDataSourceResult(args.Request);
args.Data = result.Data;
args.Total = result.Total;
recordcount = result.Total;
}
protected override async Task OnInitializedAsync()
{
try
{
if (cpar.Initialized == true)
{
goto finish;
}
cpar.Initialized = true;
goto finish;
finish:;
await LoadAllRecords();
}
catch (Exception ex)
{
displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
}
finally
{
StateHasChanged();
Refresh?.Invoke();
}
}
async Task LoadAllRecords()
{
try
{
await Task.Delay(0);
var result = await S4GridManager.GetAsync("Select * from wta_application.fn_s4_get_active_records() order by id;");
S4Records = result.ToList();
}
catch (Exception ex)
{
displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
}
finally
{
StateHasChanged();
Refresh?.Invoke();
}
}
async Task UpdateItem(GridCommandEventArgs args)
{
try
{
S4PSector4UpdateList item = (S4PSector4UpdateList)args.Item;
var updated = await S4GridManager.UpdateAsync(item);
await LoadAllRecords();
cpar.message = new MessagePars(1, "Record updated successfully!", true);
}
catch (Exception ex)
{
displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
}
finally
{
StateHasChanged();
Refresh?.Invoke();
}
}
private async Task WorkRecord(GridCommandEventArgs args)
{
try
{
var model = args.Item as S4PSector4UpdateList;
//Update Table with user soeid and in progress.
var dictionary = new Dictionary<string, object>
{
{ "@in_soeid", cpar.authuserinfo.soeid },
{ "@in_id", model.id }
};
var parameters = new DynamicParameters(dictionary);
S4GridManager.ExecuteStoredProcedure("wta_application.sp_s4_work_record", parameters);
//Update Count Here
//Copy to clipboard, place success message and select row.
await js.InvokeVoidAsync("navigator.clipboard.writeText", model.soeid.Trim());
cpar.message = new MessagePars(1, model.soeid + " copied to clipboard.", true);
await LoadAllRecords();
//Highlight the row on the grid they selected
SelectedRecord = GridRef.Data.Where(x => x.id == model.id).ToList();
}
catch (Exception ex)
{
displayandlogcomponent.DisplayAndLogError(1, ex, cpar, MethodBase.GetCurrentMethod().DeclaringType.FullName);
}
finally
{
StateHasChanged();
Refresh?.Invoke();
}
}
public void Refreshed()
{
StateHasChanged();
}
}
1 Answer, 1 is accepted
Hello Dustin,
I see that you are using both the Data parameter and the OnRead event in the Grid. This configuration is not correct. These options provide different ways to pass data to the Grid and they cannot be used together. The Data parameter allows you to provide the whole collection of items to the Grid while the purpose of the OnRead event is to fetch only the relevant chunks of data in case you are working with large collections. See more details here: Grid Data Binding.
Once you have clarified the data binding approach you want to use, you may force data refresh in different ways:
- If Data parameter is used, you can use Observable Data, create a new collection reference or invoke the Rebind method.
- If OnRead event is used the options are to invoke the Rebind method or force the Grid fire OnRead.
I hope this will help you move forward with the implementation on your end. Please let us know if further questions appear.
Regards,
Nadezhda Tacheva
Progress Telerik