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

Hi,

I had to update to .net 6.0.3. The Fileuploader don't work anymore. I can choose a file from the OS-Select Popup, but then nothing happens. The popup closes, no preview (the row with icon, filename, progress) and no error-message and no upload. The same in Firefox and Edge.

Attached is the screen shot which shows both Color palette and Color picker in the cell template of the grid. How can I set the Color picker width similar to the Color palette. I have tried setting the class of the Color picker to be width 100 % or fit-content or stretch. But none of them seem to be working.

Attached image file marks the color picker in red and color palette in blue. The color picker should have width similiar to the palatte.

Below is the code and css style.

<GridColumn Field="Color" Title="Color" Width="100px" TextAlign="ColumnTextAlign.Center" FieldType="@(typeof(string))" >              
                        <Template>
                                @{
                                     @colorUpdate.ColorCode;                                        
<TelerikColorPicker @bind-Value="colorUpdate.ColorCode" ValueFormat="ColorFormat.Hex" Class="k-colorpicker" > 
                                            <ColorPickerViews>
                                                <ColorPickerGradientView ShowOpacityEditor="false" Format="ColorFormat.Hex">
                                                </ColorPickerGradientView>                                                
                                            </ColorPickerViews>                       
                                        </TelerikColorPicker>     
 <TelerikColorPalette Colors="@ColorList" TileHeight="25px" TileWidth="25px"  >                                            
                                        </TelerikColorPalette>                      
                                }                
</Template>
</GridColumn>

.k-colorpicker {
    width: stretch;  /*tried using 100% or fit-content */
}

.k-colorpicker .k-selected-color {
    width: stretch; /*tried using 100% or fit-content */
}

span.k-colorpicker{
 width: stretch; /*tried using 100% or fit-content */
}

Thank you for your help.

Beena.

Hi I would like to build a dark mode toggle like the one on use on  Dark Mode - Tailwind CSS

Have been looking at the documentation for the content menu and the "normal" menu.
I can see that you can use a template but can I build a template that's accept svg?

Any plans on implementing headless-ui for blazor? I really like the concept.

Could use Bootstrap dropdown, but again why use another framework?

Dropdowns · Bootstrap v5.1 (getbootstrap.com)