grid passing paramenters

[n/a]

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

        

[Apostolos]

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

[n/a]

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

Kind regards,

Astig