I'm getting the following error after upgrading from 2.x to 3.x of the Blazor library. 

Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikMultiSelect` 
does not have a property matching the name 'ChildContent'.

This happens when this control attempts to load.

 <FormItem Field="@nameof(NoteVM.AssignedToUser)">
     <Template>
         <TelerikMultiSelect Data="Users"
                             AutoClose="false"
                             Placeholder="Select Assign To Users"
                             Width="100%"
                             Filterable="true"
                             TextField="@nameof(UserInfoVM.UserName)"
                             ValueField="@nameof(UserInfoVM.UserName)"
                             @bind-Value="@AssignedToUsers">
                      <MultiSelectPopupSettings>
                      <DropDownListPopupSettings Height="200px" />
                      </MultiSelectPopupSettings>
                      </TelerikMultiSelect>
     </Template>
 </FormItem>

Is there documentation covering using UI for Blazor as Razor Components mixed within Razor Pages and MVC?  Currently the focus of the docs seem to only cover Blazor only type apps?

Admin edit: Here is a link to an example: https://github.com/telerik/blazor-ui/tree/master/common/razor-components

I have the following set up.

 <TelerikMultiSelect Data="@lstXfers" @ref="@Xrefs"
       @bind-Value="@lstSelectedXfers"
         TextField="FermentationName" ValueField="FermentationXferId"
          Width="250px" ClearButton="true" AutoClose="false"
          OnBlur="OnXferBlur"
          OnRead="OnXferRead"
           Filterable = "true" FilterOperator="StringFilterOperator.Contains"
       />
                                                

I am doing custom filter to  allow the user to enter a filter and, when the control loses focus, if the typed in filter is an exact match to one of the available items, then the typed in item will be added.

Everything works great, with one exception. I can't seem to clear the Request.Filters Telerik.DataSource.FilterDescriptor collection.

private FilterDescriptor filter;        
 
protected void OnXferRead(MultiSelectReadEventArgs args)
        {
            if (args.Request.Filters.Count() > 0)
            { 
                filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;

                var q1 = from a in db.Fermentations
                         where a.IsActive == true && a.SiteId == appData.SiteId
                         select new FermentationXferModel()
                         {
                             FermentationName = a.FermentationName,
                             FermentationXferId = a.FermentationId
                         };
                q1 = q1.OrderBy(a => a.FermentationName).Distinct();

                lstXfers = q1.ToList();
                args.Data = lstXfers;
                var lstSelectedItemsToExclude = (from a in lstXfers
                                             where lstSelectedXfers.Contains(a.FermentationXferId)
                                             select a).ToList();
                var filterItems = (from a in lstXfers
                             where !a.FermentationName.ToLower().StartsWith(filter.Value.ToString().ToLower())
                             select a).Except(lstSelectedItemsToExclude).ToList();
                args.Data = (from a in (List<FermentationXferModel>)args.Data select a).Except(filterItems);
              
            }
            else
                args.Data = lstXfers;

        }
        

public void OnXferBlur()
        {
            if (filter != null)
            {
                FermentationXferModel filterEntry;
                filterEntry = (from a in lstXfers
                               where a.FermentationName.ToLower() ==
                               filter.Value.ToString().ToLower()
                               select a).FirstOrDefault();
                if (filterEntry != null)
                {

                    // mark it as selected
                    filterEntry.Selected = true;
                    // create a new list to force a refresh.
                    // this thing doesn't support observablecollections.
                    List<int> lst = new List<int>(lstSelectedXfers);
                    // add the matching entry
                    lst.Add(filterEntry.FermentationXferId);
                    //copy the list to the bound variable
                    lstSelectedXfers = new List<int>(lst);
                    // Clean up the typed in filter
                    Task.Run(async () => await jsRuntime.InvokeVoidAsync("clearMultiselectInput"));
                }
                else
                {
                    var q1 = from a in db.Fermentations
                             where a.IsActive == true && a.SiteId == appData.SiteId
                             select new FermentationXferModel()
                             {
                                 FermentationName = a.FermentationName,
                                 FermentationXferId = a.FermentationId
                             };
                    q1 = q1.OrderBy(a => a.FermentationName).Distinct();

                    lstXfers = q1.ToList();
                    Xrefs.Data = lstXfers;
                }
            }

        }

And teh js:

Ideally, in the OnBlur handler if the private FilterDescriptor filter property is not null, then I want to clear it.

How???

Thanks... Ed

Is the ChartSeriesStyle.Smooth  property supposed to work on Area chart as well?

seems like it's working on a line chart only for me

Hi,

I'm using Blazor for UI 3.1.0 with a TelerikGrid. I want to implement a custom background color for certain rows in the grid.

As a test I started with setting up a style for the row and attaching a OnRowRender event:

            <style>
                .PriorPeriodAdjustedRowFormatting {
                    background-color: orange;
                }

                .ApprovalForPaymentRowFormatting {
                    background-color: lightgreen;
                }
            </style>

            <TelerikGrid Data="@TransactionsGridData" EditMode="@GridEditMode.Popup" Height="450px"
                         Pageable="true" PageSize="20" Sortable="false" Groupable="true"
                         FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                         Resizable="true" Class="smallerFont" Reorderable="true" 
                         SelectionMode="@GridSelectionMode.Multiple"  SelectedItems="@SelectedTransactions" SelectedItemsChanged="@((IEnumerable<MixedTransactions> list) => OnTransactionsSelected(list))"
                         OnStateInit="@((GridStateEventArgs<MixedTransactions> args) => OnStateInitHandler(args))"
                         OnRowRender="@OnTransactionsRowRender">

... then in the OnTransactionsRowRender event I just forced every row to match one of the styles as a test, like so:

        void OnTransactionsRowRender(GridRowRenderEventArgs args)
        {
            args.Class = "PriorPeriodAdjustedRowFormatting";
        }

This should turn the background color on every row orange but it doesn't, it only turns half of them orange:

If I repeat the same test but ask for the color to be orange (instead of the background color) it turns all the text orange. So for example if the style is this:

            <style>
                .PriorPeriodAdjustedRowFormatting {
                    color: orange;
                }

                .ApprovalForPaymentRowFormatting {
                    background-color: lightgreen;
                }
            </style>

then it does color the text in each row orange:

It looks like the alternating row style is overwriting any custom settings for the background-color in OnRowRender but it respects the custom settings for color. Can it be fixed so it applies properly when set via OnRowRender?

1. I need to add a center label to my Donut Chart

2. make the percentage label always visible (not only on mouseover)

How can I achieve this?

Hi,

I'm using UI for Blazor version 3.1.0. I have a grid with multi-row selection turned on that triggers an OnEmployeesSelected event when the selected items change. I also have a GridCheckboxColumn as well. The code looks like so:

            <TelerikGrid Data="@EmployeeGridData" EditMode="@GridEditMode.Popup" Height="240px"
                         Pageable="true" PageSize="20" Sortable="true" Groupable="false"
                         FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
                         Resizable="true" Class="smallerFont" Reorderable="true" 
                         SelectionMode="@GridSelectionMode.Multiple" SelectedItems="@SelectedEmployees" SelectedItemsChanged="@((IEnumerable<EmployeeList> list) => OnEmployeesSelected(list))">
                <GridColumns>
                    <GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All">

The issue is the @SelectedEmployees variable holding the selected items for the grid gets out of sync with what it displayed. Part of that may be due to this behavior:

• If I click on the GridCheckboxColumn to check a row that was previously unchecked the OnEmployeesSelected event triggers immediately, the checkbox is displayed in the column, and the @SelectedItems collection appears to be accurate.
• If I click on the GridCheckboxColumn to uncheck a row that was previously checked the OnEmployeesSelected event does not trigger. The checkbox is removed from the displayed column however the @SelectedItems collection still has it. 
• Selecting other rows in the grid by clicking somewhere else in the row (i.e. by not clicking on the GridCheckboxColumn), after the @SelectedItems is out of sync from the 2nd note above, gets the @SelectedItems collection even further out of sync.

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