Add Item To Grid In Code

4 Answers 66 Views
Grid
Graham
Top achievements
Rank 2
Iron
Iron
Graham asked on 09 Aug 2021, 05:14 PM

Telerik Grid for Blazor, how to add a row through code. Should be easy, but I cannot find a straightforward answer anywhere. Here's my grid:

                    <TelerikGrid Data=@GridPallets
                                 Height="200px"
                                 FilterMode="@GridFilterMode.None"
                                 Sortable=true
                                 Pageable=true>
                        <GridColumns>
                            <GridColumn Field=@nameof(PalletGridModel.Type) />
                            <GridColumn Field=@nameof(PalletGridModel.Quantity) />
                            <GridColumn Field=@nameof(PalletGridModel.Weight) />
                            <GridColumn Field=@nameof(PalletGridModel.DeliveryCharge) Title="Delivery Charge" />
                            <GridColumn Field=@nameof(PalletGridModel.HubCharge) Title="Hub Charge" />
                        </GridColumns>
                    </TelerikGrid>

Here's some code on the same page to create a new item to add to the grid:

PalletGridModel pgm = new PalletGridModel();

pgm.DeliveryCharge = palletType == "QTR" ? 10 : palletType == "HALF" ? 20 : palletType == "FULL" ? 30 : 40;
pgm.HubCharge = palletType == "QTR" ? 4 : palletType == "HALF" ? 5 : palletType == "FULL" ? 6 : 10;
pgm.Quantity = quantity;
pgm.Type = palletType;
pgm.Weight = weight;

Everything I've tried after that to add that new item to the grid doesn't work - from adding the item to the grid data with a simple list.add(item) to trying to use the grid's update handler - but so far, nothing has worked. Surely something as simple and straightforward as this can't be this difficult?

4 Answers, 1 is accepted

Sort by
1
Accepted
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
answered on 10 Aug 2021, 03:39 PM | edited on 10 Aug 2021, 04:05 PM

Hi Graham,

there are several solutions to this that could fix the problem.
a) Use your own method (you probably already do) like LoadList...
b) Show the grid after the data is already loaded (as a test, where the problem could be) 
c) Load the data as follows (also as a test)

 

public ObservableCollection<Models.PalletGridModel> GridPallets { get; set; } public List<Models.PalletGridModel> GridPalletsList { get; set; }=new List<Models.PalletGridModel>();

//..your stuff.... PalletGridModel pgm = new PalletGridModel(); pgm.DeliveryCharge = palletType == "QTR" ? 10 : palletType == "HALF" ? 20 : palletType == "FULL" ? 30 : 40; pgm.HubCharge = palletType == "QTR" ? 4 : palletType == "HALF" ? 5 : palletType == "FULL" ? 6 : 10; pgm.Quantity = 1; pgm.Type = palletType; pgm.Weight = weight; for (int i = 0; i < quantity; i++) GridPalletsList.Add(pgm);// end

GridPallets=new ObservableCollection<Models.PalletGridModel>(GridPalletsList);

I had never problems with adding rows to the grid as long I use an ObservableCollection. 
0
Marin Bratanov
Telerik team
answered on 09 Aug 2021, 07:35 PM

Hello Graham,

Take a look at this article to see how to make the grid re-render after you change its data: https://docs.telerik.com/blazor-ui/components/grid/refresh-data

Regards,
Marin Bratanov
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.

0
Graham
Top achievements
Rank 2
Iron
Iron
answered on 10 Aug 2021, 08:40 AM

Martin: thanks for pointing me to that article which I hadn't seen. However, on updating the grid's data, it's still crashing with an error. Here are the key parts of my page:


@using System.Collections.ObjectModel

                            <TelerikGrid Data=@GridPallets
                                         Height="600px"
                                         Sortable=true
                                         Pageable=true>
                                <GridColumns>
                                    <GridColumn Field=@nameof(PalletGridModel.Type) />
                                    <GridColumn Field=@nameof(PalletGridModel.Quantity) />
                                    <GridColumn Field=@nameof(PalletGridModel.Weight) />
                                    <GridColumn Field=@nameof(PalletGridModel.DeliveryCharge) Title="Delivery Charge" />
                                    <GridColumn Field=@nameof(PalletGridModel.HubCharge) Title="Hub Charge" />
                                </GridColumns>
                            </TelerikGrid>

    public ObservableCollection<Models.PalletGridModel> GridPallets { get; set; }

        PalletGridModel pgm = new PalletGridModel();

        pgm.DeliveryCharge = palletType == "QTR" ? 10 : palletType == "HALF" ? 20 : palletType == "FULL" ? 30 : 40;
        pgm.HubCharge = palletType == "QTR" ? 4 : palletType == "HALF" ? 5 : palletType == "FULL" ? 6 : 10;
        pgm.Quantity = 1;
        pgm.Type = palletType;
        pgm.Weight = weight;

        for (int i = 0; i < quantity; i++)
            GridPallets.Add(pgm);

The moment the line GridPallets.Add(pgm); is run, the page crashes with the error "An unhandled error has occurred. Reload".

0
Graham
Top achievements
Rank 2
Iron
Iron
answered on 11 Aug 2021, 10:56 AM
@Matthias Making the grid data type an ObservableCollection instead of a List, your final suggestion, is a good answer - thanks.
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
commented on 11 Aug 2021, 11:01 AM

Thanks for the feedback! Have a nice day. Greetings Matthias 
Tags
Grid
Asked by
Graham
Top achievements
Rank 2
Iron
Iron
Answers by
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Marin Bratanov
Telerik team
Graham
Top achievements
Rank 2
Iron
Iron
Share this question
or