find a specific row in a grid

[Giovanni Zomer]

this should be a simple question, but I cannot find the answer as a beginner;
which would be the easiest way to find a specific row in a grid (i.e. need to find a row looking for column ID=100)?
I would then like to update or remove the row …
which methods should I use to get this result?

[Yavor Dashev]

Hi Giovanni Zomer,

I have created a code example for you in order to showcase the functionalities that you require.

Link to the complete demo: https://codepen.io/yavor_htmlelement/pen/dyVOEpY?editors=1010

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[Giovanni Zomer]

thank you very much! I will have a detailed look at it!!

[oliver.aldrian]

Hi,

 

having the same problem/taks (find rowId of certain data id value) with the grid in the smart.blazor framework.

Could you also help out with bit of code?

 

KR Oliver

[martin-jq]

Hello Oliver,

If you need to update or remove rows you can use the dataRecords field of the Grid.
You can check the Dynamic Rows demo from Blazor Grid Demos.

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[oliver.aldrian]

Unfortunately this is not what I need to do.

I need the row id of an element where I have the value of an identifying column.

I have a grid with entries, where I want to preselect a row on page load, and to my knowledge grid.selectRow only does take an id.

 

Or is the id in the grid always the same as in the dataRecords object? But what if I have applied filtering and sorting?

[admin]

Hi Oliver,

It is easily possible to get a row id by index by using the getRowId( rowIndex: number) method of the Grid, if row id is necessary. In the next version, we will also introduce selection methods by index as it seems to be much requested functionality by our customers.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[oliver.aldrian]

Hm… I think I don’t understand…

 

I have a class

class Person{
Guid Id { get; set; }
string Name { get; set; }
}

and I have a page

@page "/persons"

@implements IAsyncDisposable

@code {

Grid grid;
private HubConnection? hubConnection;
private List persons;

protected override async Task OnInitializedAsync()
{
hubConnection = new HubConnectionBuilder()
.WithUrl(NavigationManager.ToAbsoluteUri("/datahub"))
.Build();

hubConnection.On<List>("ReceivePersons", async (persons) =>
{
this.persons = persons;
StateHasChanged();
});

await hubConnection.StartAsync();

await hubConnection.SendAsync("GetPersons");
}

public async ValueTask DisposeAsync()
{
if (hubConnection is not null)
{
await hubConnection.DisposeAsync();
}
}

An for some reason I want to select all rows that contain an entry with the name “Oliver” on page load.

How would I do that?

I tried grid.SelectRows(persons.Where(x => x.Name.Contains("Oliver"))) but in OnInitializedAsync grid is still null, and persons did not arrive either (SignalR does need a bit). Then I moved it to OnAfterRender but there the grid.Rows are still Empty even if they are already displayed in the browser.

Do you have an Idea / code snippet?

• This reply was modified 2 years, 6 months ago by oliver.aldrian. Reason: typo

[martin-jq]

Hello Oliver,

You can use the OnReady event of the Grid.
Here is an example:

private void OnReady(Grid grid)
 { 
     grid.SelectRowsByIndex(dataRecords.Where(record => record.Id % 2 == 0).Select((x) => x.Id).ToArray());
 }

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[oliver.aldrian]

I have

<Grid @ref="grid" OnCellClick="CellClicked" OnReady="(x) => GridReady(x)" DataSource="@projects">
<Columns>
                  <Column DataField="Id" Label="" Visible="false" AllowEdit="false" AllowSelect="false" />
                  <Column DataField="Name" Label="Name" AllowEdit="false" AllowSelect="false" />
</Columns>
</Grid>

and

private async void GridReady(Grid grid)
{
var selectedProjectId = await LocalStorage.GetItemAsync("SelectedProject");

if (!selectedProjectId.Equals(Guid.Empty) && projects.Any(x => x.Id.Equals(selectedProjectId)))
{
grid.SelectRows(projects.Where(x => x.Id.Equals(selectedProjectId)));
}
else
{
ClearSelection();
}
}

1. I don’t have the index of the row I want to select, I have the object that is displayed in the row
2. Setting a breakpoint into the GridReady Method I can see the page and grid load in the browser and can clearly see the entries in the grid. BUT grid.Rows is STILL EMPTY in this method.

Additional information: I am on Blazor .NET6 WebAssebmly and use the latest smart.Blazor version that nuget suggested.

[martin-jq]

Hello Oliver,

Thank you for the feedback!

I would suggest you use the dataRecords collection(in your case projects) instead grid.Rows.

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[oliver.aldrian]

But I want to select a row… and if there are no rows in the grid, how can I select one???

can you at least confirm that following statement is correct?

grid.SelectRows(projects.Where(x => x.Id.Equals(selectedProjectId)));

with projects being a List<Project> and Project being a class in my project.

[admin]

Hi Oliver,

SelectRows expects an array of Row ids. The method’s description is Selects multiple rows by their ids. It will not work with row objects i.e. passing List will not work, passing the IDs in a List would be ok.

Example how to use SelectRows

@page "/grid"

@using Smart.Blazor.Demos.Data
@inject WeatherForecastService ForecastService

<Example Name="Grid">
	<h1>Weather forecast</h1>

	<p>This component demonstrates fetching data from a service.</p>

	@if (forecasts == null)
	{
		<p><em>Loading...</em></p>
	}
	else
	{
		<Grid OnReady="GridReady" SummaryRow="summary" Sorting="@sorting" Appearance="@appearance" Selection="@selection" Style="width: 80%;">
			<Columns>
				<Column DataField="Date" Label="Date"></Column>
				<Column DataField="TemperatureC" Label="TemperatureC"></Column>
				<Column DataField="TemperatureF" Label="TemperatureF"></Column>
				<Column Summary="@columnSummary" DataField="Summary" Label="Summary"></Column>
			</Columns>
			<Rows>
				@foreach (var forecast in forecasts)
				{
					<Row>
						<Cell Content="@forecast.Date.ToShortDateString()"></Cell>
						<Cell Content="@forecast.TemperatureC"></Cell>
						<Cell Content="@forecast.TemperatureF"></Cell>
						<Cell Content="@forecast.Summary"></Cell>
					</Row>
				}
			</Rows>
		</Grid>
	}
</Example>

@code {
    string[] columnSummary = new string[] { "count" };

	GridSummaryRow summary = new GridSummaryRow() { Visible = true };
    GridSorting sorting = new GridSorting() { Enabled = true };
    GridAppearance appearance = new GridAppearance() { AlternationCount = 2 };
    GridSelection selection = new GridSelection()
    {
        Enabled = true,
        Mode = GridSelectionMode.Many,
        CheckBoxes = new GridSelectionCheckBoxes()
        {
            Enabled = true
        }
    };

    void GridReady(Grid grid)
    {
        var rows = grid.Rows;
        grid.SelectRows(new int[] { 0, 1, 2 });
    }
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[oliver.aldrian]

ok, so the grid does not support it natively to select something if I don’t have the Id ie. rowNumber.
I could work around that, iterate over the rows get the details, and compare them to the elements in my list, to get the correct row number.

BUT as I already described: When the OnReady fires, grid.Rows is still empty even though I can clearly see the rows in the browser.

[admin]

Hi oliver.aldrian,

You do not need Grid.Rows. You need Grid.DataSource. In the current version 14 Grid.Rows = Grid.DataSource.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts