I have been using Telerik Data Grid, When the total count of record in the grid is equals to the pagination options(5, 10, 20), the blank value is selected in the page size dropdown. I have total data record of 10, for the first time the page size is showing, when I select the 20 and again select 10 it disappears.

Repl demo link: https://blazorrepl.telerik.com/cROhmgvP088tMZDF58 

Unexpected scroll behaviour is seen after selecting an item in a DropDownList/Multiselect with a scroll mode set to virtualise. We are unable to easily scroll upwards using the scroll bar in the control or using a mouse/trackpad. The scroll position immediately snaps back to the selected item. Sometimes we are able 'escape' this by rapidly scrolling but this does not feel like intended behaviour.

Downward scrolling seems okay and using the keyboard arrow keys also seems unaffected. This is reproducible on the demo page: Blazor DropDownList - Virtualization - Telerik UI for Blazor and https://docs.telerik.com/blazor-ui/components/multiselect/virtualization.

Reproduction steps on Chrome:

1. Navigate to demo page and render local example preview
2. Select item "Name 27"
3. try to scroll up with the arrow buttons on the scrollbar or the mouse wheel

Minimal reproducible example: Blazor MultiSelect - Virtualization - Telerik UI for Blazor

 

In TreeView the selected and checked items have to be provided as IEnumerable<object>.  This can make things a bit of a pain if you have for example outside events that are also trying to change the list of checked items. Not insurmountable or hard but just a pain.

For example to remove an item since IEnumerable is immutable you to have to completely re-assign the collection.  SelectedItems = SelectedItems.Where[Some condition] .  Instead of SelectedItems.Remove, add etc.

I realize the reasons you are binding to IEnumerable<object> and not using generics 

I propose adding "CheckedField" and "SelectedField" in your observable treeview binding and then we would not have to pass in Checked / Selected Items at all and just bind those fields to the Data we are passing in.  Make life a lot easier.

The same thing likely applies to some other controls that have the same problem.  So keep it consistent.

Currently the TabStrip solution for dynamic tabs is very inefficient, any change to the collection of Tabs (add/remove) would trigger the render of all tabs, even the ones that were already loaded, in scenarios where the Tab content contains complex components with nested components at different levels this is a pain, not only to load components but to load necessary information related to the component. It would be a breeze if we could reuse a component instance instead of creating a new one or only re-render (maybe with ShouldRender) the new added Tab.

Hello,

I need to perform some tasks in case of pressing some keyboard shortcuts. For example when a user press Alt+Enter key combination. But it seems that your grid catches this key combination as well and performs its action (Editing the current cell and jumping to the next one below). How can I suppress this behavior please? Maybe not just for this key combination but more generally.

I attached a small sample to better demonstrate the problem. Just run the sample please, focus some cell in the grid and press Alt+Enter.

Very thanks.

Miroslav

I would like to see the OrgChart in the Telerik UI for Blazor suite.

Hi Team,

I was implemeting the approach mentioned in the below URL in my Blazor .Net Project

https://github.com/telerik/blazor-ui/tree/master/common/pdf-jpg-export-js

But getting this error while execution, can someone please look into this or help me.

Microsoft.JSInterop.JSException: Could not find 'telerikClientExporter.exportPDF' ('telerikClientExporter' was undefined).
Error: Could not find 'telerikClientExporter.exportPDF' ('telerikclientexporter' was undefined).

 

Are you thinking about developing an app builder for Blazor to create a project and add telerik component and finally export it as Blazor app (server or wasm)?

(like this one develop from Infragistics https://appbuilder.indigo.design/app/)
This tool export every single page as razor page.

BR,

Flavio

Is there any scope to add a Blazor Ranged Bar/Column Chart component as seen in other products:

• Telerik Web Forms Range Column Chart - RadHtmlChart - Telerik UI for ASP.NET AJAX
• Demo of core features in jQuery Range Bar Charts widget | Kendo UI for jQuery (telerik.com)? 

We attempted to work around this by adding an invisible stacked series underneath our dataset. However, without the Ability to customize the highlighted/hovered series item (telerik.com), we are not able to effectively hide the invisible series from the user. We will have to fall back into the jQuery Kendo UI components once again. Alternatively, are there any other known work arounds to achieve this in Blazor?

Please include symbols in the package to support source-level debugging by which the developer can either have the source code downloaded automatically or download it separately and point the debugger to the source code.

We have had major complaints from users when using the combo box.  They use the filter, see the first item highlighted, then click tab and the item in not selected.  They do a lot of data entry and don't want to use the mouse or use the down arrow to select it.  They are used to a regular HTML select control which works that way.  Is there any Javascript workaround for this?  If not, I probably have to go back to using a standard select box.  The reason I am using the combobox and not the dropdown is because your dropdown doesn't support tabbing out of the box and that was a deal breaker for them.

I saw an article on using the PopupClass for the ComboBox but that isn't a supported property.

Thanks!

Right now, when calling the ToDataSourceResult extension method on IQueryable object, the DB is queried using the given filters for example from a DataSourceRequest object. However, if I want to apply complex queries based on those filters, this is not possible unless rewriting the existing extension method to return an IQueryable.

Proposal Example API

 

Is it possible for this to be added as an extension method? I am currently doing this using a custom class that parses the dataSourceRequest class and returning the IQueryable, but it would be nice if this was an included extension method.

Thank you.

Hi,

When we use the TelerikDropDownList with a large amount of data (client side) in Blazor, the dropdown takes several seconds to open the popup. (*)
Even with the most simple version of the TelerikDropDownList component:

But isn't it strange the same dropdownlist in Kendo for jQuery (AngularJS) with exactly the same dataset, doesn't react slow and opens on the fly..?
Is the DOM manipulation in Blazor that much slower then? 

(*) We know Virtualization fixes this problem, but it has some limitations.

Thanks in advance.

I'd like to use the adaptive rendering but I also need to keep AllowCustom feature.

===

ADMIN EDIT

===

This request applies to all components that support AllowCustom feature and adaptive rendering: for example, ComboBox, MultiColumnComboBox.

Hi 

I am trying to do very simple InCell editing of various columns string etc. In my model i have various Decimal? types fields. When i update the grid incell  the

OnUpdate event fires but the property value is always null. Its like its not biding properly. Seems like you have had similar to this bug in previous versions. Seems like a very simple functionality that the grid should support.

Also it doesn't allow me to enter more than 1 digit after this also as if i type a decimal point it jsut clears it.

I have added a video showing this behaviour. 

Please assist.  This is the Grid code below.

 

 @if (_stockOrderLinePOCO != null)
                                    {
                                    <TelerikGrid @ref="_stockOrderLineGrid"
                                                     Width="@AppStateService.ViewPortWidth"
                                                     Height="100%"
                                                     Data=@_stockOrderLinePOCO.Current
                                                     Sortable="@false"
                                                     FilterMode="@GridFilterMode.None"
                                                     Pageable="true"
                                                     Groupable="false"
                                                     PageSize="@AppSettings.Value.DataPageSize"
                                                     Resizable="true"
                                                     Reorderable="false"
                                                     EditMode="GridEditMode.Incell"
                                                     PageChanged="@StockOrderLineGridPageChangedHandler"
                                             OnRowRender="@StockOrderLineGridRowRenderHandler"
                                             OnUpdate="@StockOrderLineGridUpdateHandler" OnEdit="@StockOrderLineGridEditHandler" OnCancel="@StockOrderLineGridCancelHandler" OnDelete="@StockOrderLineGridDeleteHandler" OnStateInit="@((GridStateEventArgs<StockOrderLine> args) => OnStockOrderLineStateInitHandler(args))">
                                            <GridColumns>
                                            @{
                                                    foreach(PropertyInfo prop in (typeof(StockOrderLine)).GetProperties())
                                                    {
                                                        switch (prop.Name)
                                                        {
                                                            case "ID":
                                                                <GridColumn Field=@prop.Name Title=@Localizer["Line"] FieldType=@prop.GetType() Editable="false"> Width="1rem"</GridColumn>
                                                                break;

                                                            case "ProductID":
                                                                <GridColumn Field=@prop.Name Title=@Localizer["Product"] FieldType=@prop.GetType() Editable="true" Width="40rem">
                                                                <Template>
                                                                    @{
                                                                        CurrentlyEditedStockOrderLine = context as StockOrderLine;

                                                                        @CurrentlyEditedStockOrderLine.ProductID  @CurrentlyEditedStockOrderLine.ProductDescription
                                                                    }
                                                                </Template>
                                                                <EditorTemplate>
                                                                    @{
                                                                        CurrentlyEditedStockOrderLine = context as StockOrderLine;

                                                                        <div class="row">
                                                                            <div class="col mr-0">
                                                                                <TelerikComboBox @bind-Value="CurrentlyEditedStockOrderLine.ProductID" Data="@_priceListProducts" TextField="ProductID" ValueField="ProductID" FillMode=@ThemeConstants.DropDownList.FillMode.Outline Filterable="true">
                                                                                    <ItemTemplate Context="subContext">
                                                                                        @subContext.ProductID  @subContext.Description_en_AU
                                                                                    </ItemTemplate>
                                                                                </TelerikComboBox>
                                                                            </div>
                                                                            <div class="col ml-0">
                                                                                <TelerikButton class="mb-0 ml-0" ButtonType="ButtonType.Button" Size="lg" FillMode="outline" Icon="search" @onclick="LookupItem">
                                                                                </TelerikButton>
                                                                            </div>
                                                                        </div>
                                                                    }
                                                                </EditorTemplate>
                                                            </GridColumn>
                                                            break;

                                                        case "ProductDescription":
                                                            <GridColumn Field=@prop.Name Title=@Localizer["Description"] FieldType=@prop.GetType() Editable="true"> </GridColumn>
                                                                break;

                                                        case "QuantityOrdered":
                                                            <GridColumn Field=@prop.Name Title=@Localizer["Qty"] FieldType=@prop.GetType() Editable="true"></GridColumn>
                                                            break;

                                                        case "SalePrice":
                                                            <GridColumn Field=@prop.Name Title=@Localizer["Price"] FieldType=@prop.GetType() Editable="true"></GridColumn>
                                                            break;

                                                        case "Value":
                                                            <GridColumn Field=@prop.Name Title=@Localizer["Amount"] FieldType=@prop.GetType() Editable="false"></GridColumn>
                                                            break;

                                                            default:
                                                                break;
                                                        }
                                                    }

                                                <GridCommandColumn Width="4rem">
                                                        <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
                                                    </GridCommandColumn>
                                            }
                                            </GridColumns>
                                        </TelerikGrid>
                                    }

 

Normally, when we develop we try to give a homogeneous behavior to our applications for the user.

This is a uncomfortable when the default behavior of our application does not match those of the Telerik controls because it becomes verbose and repetitive. I look at my code and constantly repeat configurations for the different controls.

For example, in 99% times I use:

Changing "Delete" icon in the whole application seems trivial, but think that you could modify the default behavior homogeneously in the whole application or in part of it if the configuration file had a hierarchical behavior, changing one properpty in one place.

I think it would be a very useful functionality to give homogeneity to an application in a very effective way, without breaking changes and making a less verbose and repetitive code.

 

Thank you for reading me !

Hello there,

I encountered an issue with the TelerikGrid component. This started to be an issue from version 4.1.0 and can be reproduced from here:

https://docs.telerik.com/blazor-ui/components/grid/columns/visible#toggle-the-visibility-of-a-column-on-button

If this line from the example:

similar to https://www.telerik.com/products/wpf/pivotgrid.aspx

Since the animation containers just get appended inside <body>, instead of the page it was placed in, it becomes difficult to style a specific animation container.  The templates are nice, but in the case of DropDownList, I have no way to style the <ul> of the dropdown list.  It would be nice if we could assign the associated animation container a class or id.

Can you update the templates that come with Telerik Blazor?

For example, you are using an EditForm control instead of the telerik Blazor Form control.

There is an expression, eat your own dog food.  I often spin up template projects to play with new features or tweak existing ones.  Be nice take full advantage of current state of blazor components and provide samples that people can use as a learning tool or launching point. 

Peter