How to Create a Generic and Reusable Data Grid Component in Blazor

How to Create a Generic and Reusable Data Grid Component in Blazor

Roozbeh Shad

2 года назад

54,087 Просмотров

Ссылки и html тэги не поддерживаются


Комментарии:

Data Science Engineer
Data Science Engineer - 07.08.2023 14:00

Hello Sir, i want to add OnRowClick="OnRowClicked" event, please tell me how can i do?
Below is my code, but i am getting Error
@using BlazorApp1.Client.Models

@page "/"
<Table Items="@twoColumnDataList" OnRowClick="OnRowClicked">
<Columns>
<Column Name="Column1" Label="Column1"/>
<Column Name="Column2" Label="Column2"/>
</Columns>
</Table>
@code{
IList<TwoColumnData> twoColumnDataList;

protected override void OnInitialized()
{
// Creating the IList with two items
twoColumnDataList = new List<TwoColumnData>
{
new TwoColumnData { Column1 = "Value 1A", Column2 = "Value 1B" },
new TwoColumnData { Column1 = "Value 2A", Column2 = "Value 2B" }
};
}

private void OnRowClicked(TwoColumnData twocolumnData)
{

}
}

below is table content

@attribute [CascadingTypeParameter(nameof(TItem))]
@typeparam TItem

@if (Items == null)
{
<p><em>Loding....</em></p>
}
else
{
<table class="table">
<thead>
<tr>
@Columns(default(TItem))
</tr>
</thead>
<tbody>
@foreach (var item in Items)
{
<CascadingValue Value="item">
<tr @onclick="() => OnRowClick.InvokeAsync(item)">

@Columns(item)
</tr>
</CascadingValue>
}
</tbody>
</table>
}


@code {

[Parameter]
public IList<TItem> Items { get; set; }

[Parameter]
public RenderFragment<TItem>? Columns { get; set; }

[Parameter]
public EventCallback<TItem> OnRowClick { get; set; }

}

Error: Argument 2: cannot convert from 'method group' to 'Microsoft.AspNetCore.Components.EventCallback'

Ответить
NIRANJAN CHIGULLA
NIRANJAN CHIGULLA - 01.08.2023 20:12

Git hub link for complete custom Grid (pagination, sorting)

Ответить
Midhun Kunnummal
Midhun Kunnummal - 01.08.2023 06:30

Great Video - Between one question - what if we need to have action button on particular column, let's say Delete or Edit on each row, How we can able to manage the event and action ? Since you are appending @Columns(item) in the table body section how we can mention there is a special event for a single column ?

Ответить
Hosein Azimi
Hosein Azimi - 04.07.2023 16:42

Practical and useful. Thankful

Ответить
sotiris zegiannis
sotiris zegiannis - 04.04.2023 20:18

Hi great video. I have a MudDataGrid and i would like to have an event on row-cell click. I want the particular cell that was clicked. Any change anyone know how to do this?

Ответить
Brian McBride
Brian McBride - 23.02.2023 14:48

Clear explanation of principles and at a good slow pace to help Blazor novices like me to follow 👍

Ответить
HK
HK - 19.02.2023 00:45

Good articles!
Have you thought about creating a github account? Maybe better than google drive?

Ответить
Micah Epps
Micah Epps - 14.01.2023 02:38

Heck yeah! Lots of concepts covered practically with clear reasons why.

Ответить
khalili khalili
khalili khalili - 04.01.2023 14:30

سلام مهندس عزیز
وقتتون بخیر
خیلی متشکرم از اینکه این ویدئوی مفید رو آپلود کردین
من توی برنامه خودم میخوام که یه TEntity رو به صورت پارامتر به یه کامپوننت ارسال کنم ولی هر کاری کردم نشد.
پیشنهاد شما چی هست؟

Ответить
Fayiz muhammed
Fayiz muhammed - 22.12.2022 08:40

Very well explained.
Really informative.
Keep up the good work.
Thanks.

Ответить
Kenneth Lamb
Kenneth Lamb - 31.10.2022 22:49

Will there be a follow up to implement the paging?

Ответить
nicklebot9
nicklebot9 - 27.10.2022 03:44

I couldn't find a guide this in depth anywhere else, I appreciate your video! It was very helpful.

Ответить
Nadeem Mustafa
Nadeem Mustafa - 14.07.2022 07:16

Good work. 👍

Ответить
Rogelio Gonzalez Rosas
Rogelio Gonzalez Rosas - 28.06.2022 19:41

Great video tutorial, keep the good work

I'm new to your channel, where can I download the source code to play around with it?

Best Regards

Ответить
Abrari
Abrari - 29.05.2022 06:56

Just AMAZING 😍..
Keep coding
Thank you so much.

Ответить
WalkingDadJokes
WalkingDadJokes - 14.04.2022 15:25

I think this is what I've been looking for. Thank you

Ответить
Mohamed Cisse
Mohamed Cisse - 19.03.2022 02:21

Hi
The CRUD operations do not show how the images are saved in the database ?
Thanks

Ответить
Hint SoftTech Pvt. Ltd.
Hint SoftTech Pvt. Ltd. - 27.02.2022 12:34

request you to make it inline editable with blazor custom textbox component. please..

Ответить
Sina Yazdanshenas Shad
Sina Yazdanshenas Shad - 22.02.2022 11:02

Magnificent 👏

Ответить