grid passing paramenters

1 Answer 29 Views
Grid
n/a
Top achievements
Rank 1
Iron
Iron
n/a asked on 22 Mar 2022, 10:31 AM

hello,

I have a grid as a parent component and within it there is a TelerikWindow - child of the grid.

Within the TelerikWindow I've nested a component as WindowContent. This component should take as a paramenter one of the model's properties (which is a list of line items).

How do I pass this parameter from the grid to the component nested in the Telerik Window?

 

Please see the grid and window below:

 

<TelerikTileLayout Columns="1"
                   ColumnWidth="100%"
                   RowHeight="85vh"
                   Resizable="false"
                   Reorderable="false">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Global Invoice Schedules" Class="tile-with-overflow">
            <Content>
                @if(selectInvoicesNotificationMessage != null)
                {
                    <div style="margin-bottom:18px;" class="general-validation-message">@selectInvoicesNotificationMessage</div>
                }
                <TelerikLoaderContainer LoaderType="LoaderType.Pulsing" OverlayThemeColor="light" Visible="@(invLoadingStatus == DataLoadStatus.Loading ? true: false)"></TelerikLoaderContainer>
                @if(invLoadingStatus == DataLoadStatus.LoadedSuccessfully)
                    {
                        <TelerikGrid Data="@Invoices"
                             Sortable="true"
                             Resizable="true"
                             ScrollMode="GridScrollMode.Scrollable"
                             Height=100%
                             @bind-SelectedItems="SelectedInvoices"
                             SelectionMode="@GridSelectionMode.Multiple"
                             >
                             <GridToolBar>
                                <GridCommandButton Class="k-action-buttons" Command="SetInvoicesToReady" OnClick="(()=>SetToReady(true))"><span class="check-button"><TelerikIcon Icon="check"/></span>Ready</GridCommandButton>
                                <GridCommandButton Class="k-action-buttons" Command="SetInvoicesToReady" OnClick="(()=>SetToReady(false))"><span class="x-button"><TelerikIcon Icon="x"/></span>Not Ready</GridCommandButton>
                            </GridToolBar>
                            <GridColumns>
                                <GridCheckboxColumn />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.Ready))" Width="70px" Title="Ready">
                                    <Template>
                                        @{
                                            var icon = (context as GlobalInvoiceSchedule_Invoice).Ready ? "check" : "x";
                                            <div style="text-align: center;" class=@icon>
                                                <TelerikIcon Icon=@icon/>
                                            </div>
                                        }
                                    </Template>
                                </GridColumn>

                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.ScheduledDate))" DisplayFormat="{0:dd/MM/yyyy}" Width="230px" Title="Scheduled Date" />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.ClientName))" Width="230px" Title="Client Name" />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.BillingProfile))" Width="230px" Title="Billing Profile" />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.InvoiceType))" Width="230px" Title="Invoice Type" />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.Gross))" Width="230px" Title="Gross" />
                                <GridCommandColumn Width="172px">
                                    <GridCommandButton OnClick="OpenInvoiceLineItems" Icon="search">Line Items</GridCommandButton>
                                </GridCommandColumn>
                            </GridColumns>
                        </TelerikGrid>
                    }
                    else if(invLoadingStatus == DataLoadStatus.LoadFailed)
                    {
                        <p>Data could not be loaded, if the problem persists please report the issue to the system administrator</p>
                    }
            </Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>
</div>

<TelerikNotification @ref="@EventNotifier" Class="hlxNotification"></TelerikNotification>

<TelerikWindow Class="hlxModal" Width="600px" Height="555px" Centered="true" @bind-Visible=@modalIsVisible Modal="true">

    <WindowTitle>
    <strong>Invoice Line Items</strong>
    </WindowTitle>

    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>

    <WindowContent>

        <GlobalSchedule_LineItems InvoiceLineItems=  />

    </WindowContent>
</TelerikWindow>

 

The component nested in the windwo is <GlobalSchedule_LineItems   /> and the paramenter is InvoiceLineItems. This paramenter should be a list of line itmes belonging to each of the rows of the grid. 

I have tried:

InvoiceLineItems="(context as GlobalInvoiceSchedule_Invoice).InvoiceLineItems" -- not working (obviously)

 

InvoiceLineItems="GlobalInvoiceSchedule_Invoice.InvoiceLineItems" -- object reference is required (obviously)

 

Thank you.

Kind regards

        

1 Answer, 1 is accepted

Sort by
0
Apostolos
Telerik team
answered on 25 Mar 2022, 10:15 AM

Hello Astig,

The GridCommandColumn provides access to the data item via its context.

In your case, pass the context as a parameter to the OpenInvoiceLineItems method in order to get the specific row data.

Use a lambda expression in the OnClick event of the GridCommandButton:

<GridCommandColumn Context="commandColumnContext">
   <GridCommandButton OnClick="@( () => OpenInvoiceLineItems(commandColumnContext as GlobalInvoiceSchedule_Invoice) )" Icon="search">Line Items</GridCommandButton>
</GridCommandColumn>

I guess it's clear from this point on - set the data item to a property of the Razor component and pass it inside the Window.

On a side note, I suggest to use a named context variable to avoid errors in nested components that expose contexts.

Regards,
Apostolos
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.

n/a
Top achievements
Rank 1
Iron
Iron
commented on 28 Mar 2022, 09:22 AM

Thank you Apostolos. I did just that and it worked!

Kind regards,

Astig

Tags
Grid
Asked by
n/a
Top achievements
Rank 1
Iron
Iron
Answers by
Apostolos
Telerik team
Share this question
or