grid passing paramenters

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


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"
        <TileLayoutItem HeaderText="Global Invoice Schedules" Class="tile-with-overflow">
                @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"
                                <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>
                                <GridCheckboxColumn />
                                <GridColumn Field="@(nameof(GlobalInvoiceSchedule_Invoice.Ready))" Width="70px" Title="Ready">
                                            var icon = (context as GlobalInvoiceSchedule_Invoice).Ready ? "check" : "x";
                                            <div style="text-align: center;" class=@icon>
                                                <TelerikIcon Icon=@icon/>

                                <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>
                    else if(invLoadingStatus == DataLoadStatus.LoadFailed)
                        <p>Data could not be loaded, if the problem persists please report the issue to the system administrator</p>

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

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

    <strong>Invoice Line Items</strong>

        <WindowAction Name="Close" />


        <GlobalSchedule_LineItems InvoiceLineItems=  />



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
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>

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.

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.

Top achievements
Rank 1
commented on 28 Mar 2022, 09:22 AM

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

Kind regards,


Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question