Right now when a DropDownList has PopupHeight="Auto" the popup gets the height necesaary to display its items properly.

But when there are many items the popup also displays all items without a vertical scrollbar (maybe over the entire page and beyond), which is not good.

My suggestion would be to add a property for specifyig a "MaxPopupHeight" to limit the growth of the popup.

Also if "PopupHeight" is not specified it should take "Auto" as the default value instead of a static height in px, instead give the new "MaxPopupHeight" a limiting default value.

***Admin Edit***

Released in 3.0.0 through PopupSettings tag: https://docs.telerik.com/blazor-ui/upgrade/breaking-changes/3-0-0#popup-settings

***Admin Edit***

Expose colored ranges (Plot Bands) to allow highlighting certain areas in the chart plot area - similar to https://demos.telerik.com/kendo-ui/bar-charts/plotbands.

---

ADMIN EDIT

---

This feature will allow you to define certain color ranges in the plot area. If you are looking for ability to color the whole plot area in alternating way, you may check this feature request - Is it possible to change the plot area background color in an alternating way.

At the moment, if I have many tabs, their titles go off the screen (or the container of the tab strip). I want that they don't stretch my layout, or they don't become invisible.

---

ADMIN EDIT

For the time being, there are two workarounds you can consider:

• adding a scrollbar to the tabs list:
  

  <style>
      /* sample settings for the parent of the tab strip to showcase how the rules below work */
      .tab-container {
          border: 1px solid red;
          width: 30%;
      }
      
      /* tab titles will now produce a scrollbar when too wide */
      .tab-container .k-tabstrip .k-tabstrip-items {
          flex-flow: inherit;
          max-width: 100%;
          overflow-x: auto;
          overflow-y: hidden;
      }
  
      /* just to showcase what happens when the content is wide - a separate scrollbar */
      .wide-content {
          background: yellow;
          width: 1200px;
      }
  </style>
  
  <div class="tab-container">
      <TelerikTabStrip>
          @foreach (var item in Enumerable.Range(1, 10))
          {
              <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
          }
      </TelerikTabStrip>
  </div>

  
  
• making the tabs drop into multiple rows:

  <style>
      /* sample settings for the parent of the tab strip to showcase how the rules below work */
      .tab-container {
          border: 1px solid red;
          width: 30%;
      }
  
          /* tabs will wrap on more than one row if there are too many to fit */
          .tab-container .k-tabstrip .k-tabstrip-items {
              flex-wrap:wrap;
          }
  </style>
  
  <div class="tab-container">
      <TelerikTabStrip>
          @foreach (var item in Enumerable.Range(1, 10))
          {
              <TabStripTab Title="@( $"Item {item}" )"><div class="wide-content">Content for item @item</div></TabStripTab>
          }
      </TelerikTabStrip>
  </div>

---

I would like to use scaffolding with Telerik UI for Blazor

**Admin Edit**

The plan is to be released in 3.3.0 release once extensions are thorougly tested.

**Admin Edit**

I have four tabs in my tab strip, and the content in each tab is of varying width. The tab item resizes to the width of the content as it changes. I want to be able to set a fixed width for all the tabs so they don't expand and contract all the time.

===========

ADMIN EDIT

===========

In the meantime, you can control the width of the TabStrip with some custom CSS. You can use its Class parameter to set a custom CSS class to the main wrapping container of the component and then apply the desired styles. Thus, you will be styling only this specific instance of the TabStrip and not all instances on the page/app (in case needed, you can of course add the same CSS class to all instances to have the same styles).

The sample below demonstrates the described approach. First instance of the TabStrip has the default setup, no additional styles added. Second instance has fixed width.

<TelerikTabStrip>
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the problem.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

<style>
    .tab-with-width {
        width: 600px;
    }
</style>

<TelerikTabStrip Class="tab-with-width">
    <TabStripTab Title="First">
        First tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Second tab heading longer than others">
        Second tab content. Go to the third tab to see the behavior when the TapSrtrip has fixed width.
    </TabStripTab>
    <TabStripTab Title="Third">
        <div style="width: 2000px;">lorem ipsum</div>Third tab content.
    </TabStripTab>
</TelerikTabStrip>

Currently the blazor grid must be a specific, static height.  If one is not provided, the grid uses a default of 500px.

Kendo grid implementations in other UI frameworks allow for more flexibility in the height of the grid.  It would be great if the blazor implementation could support this as well. 

Two specific scenarios that are valueable:

1) Grid height adjusts to accomodate all of the items in the grid

For other kendo grid implementations, this is typically the case when "Scrollable" is set to false.   If there is a plan to allow toggling scrolling for the blazor grid, then I think that this would come along with that.

2) Ability to set grid height to 100%

With other kendo implementations this is normally done via CSS, and is useful for when you want a "full screen" grid.  This is normally combined with "Scrollable=true" and often combined with Pagination="true" as well.   Currently it's not possible to do this - since the height is defined on the k-grid element, it cannot be overridden with CSS.

The TreeView should automatically update when a change in data fields occur. Changes in the `ItemsField`, `HasChildren` are crucial to be tracked to allow easy manipulation of data in binding to hierarchical data. This request will fulfill the observable collection support of the TreeView.

---

ADMIN EDIT

Changes in the ExpandedField of the element have been previously handled in the TreeView. However, this has been a side effect of incorrect code in our component that was causing performance hit. We reviewed our component and how it could provide better coverage in user scenarios, so here are our steps:

- Implement tracking of data item changes with ObservableCollection, so that we could fully support binding to observable data - click the Vote and Follow buttons on the current page to raise the priority of this feature implementation and to get notified for status updates.



We've been evaluating a major change where the ExpandedItems to be controlled via parameter/state. So, we would really appreciate if you could share feedback whether this change would be good for your project and use case.

- Implementation of ExpandedItems in TreeView to substitute ExpandedField in the collection: https://feedback.telerik.com/blazor/1448095-expanded-items-handling-feedback-requested

We believe that the above steps are the way to go with the maturing of the TreeView component.

A workaround could be reinitializing the Data when you update the property of the item, that will force the treeview to update:

TreeViewData = new List<MyModel>(TreeViewData)

---

My grid starts with Groupable=false and at some point I may need to make it groupable. The group panel appears, but I cannot drag the column headers to it to actually group.

---

ADMIN EDIT

A workaround is to hide the grid so it can re-initialize with the new groupable setting:

Is Groupable: @IsGroupable
<TelerikButton OnClick="@ToggleGroupable">Toggle Groupable</TelerikButton>

@if (isGridVisible)
{
    <TelerikGrid Data=@GridData @ref="@GridRef" Groupable="@IsGroupable" Pageable="true" Height="400px">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.Name) Groupable="false" />
            <GridColumn Field=@nameof(Employee.Team) Title="Team" />
            <GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
        </GridColumns>
    </TelerikGrid>
}

@code {
    bool IsGroupable { get; set; }
    bool isGridVisible { get; set; } = true;
    TelerikGrid<Employee> GridRef { get; set; }
    async Task ToggleGroupable()
    {
        //save state (sorting, paging,...) - it will be lost when we hide the grid
        var state = GridRef.GetState();

        //hide the grid so it can later re-initialize with the new groupable setting
        isGridVisible = false;
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        IsGroupable = !IsGroupable;
        isGridVisible = true;

        //afte the grid re-initialized and rendered with the new setting, restore its state
        await InvokeAsync(StateHasChanged);
        await Task.Delay(20);
        await GridRef.SetState(state);
    }


    public List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 15; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }
}

---

Can NumericTextBox Format Be Updatedat run time?  In other words, if numerictextbox is being used for dimensions and the user changes the preferred dimensional unit from "centimeters" to "inches" can the Format be changed from "0.## cm" to "0.## in" at runtime?

Same applies if I want to dynamically change the Decimals or Step values. Currently it looks like a dynamic change in the NumericTextBox parameters is not possible.

---

ADMIN EDIT

Here is a workaround that re-initializes the component:

<TelerikButton OnClick="@ChangeFormat">Change format</TelerikButton>
<br />
The value is: @theValue
<br />
@if (isVisible) {
<TelerikNumericTextBox Format="@theFormat" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>
}
@code {
    private decimal theValue { get; set; } = 1.234m;
    string theFormat { get; set; } = "0.## cm";

    bool isVisible { get; set; } = true;
    async Task ChangeFormat()
    {
        //workaround
        isVisible = false;
        await Task.Delay(30);
        await InvokeAsync(StateHasChanged);

        // change the format
        theFormat = "0.## in";

        //workaround
        isVisible = true;
        //await InvokeAsync(StateHasChanged);
    }
}

---

• Wizard for inserting new tables
• Drag to resize tables and columns

Similar to https://demos.telerik.com/kendo-ui/editor/index

Create code snippets for all Blazor controls.

Provide either automation for installing into the Visual Studio toolbox or just provide as a web page for users to copy paste them into the Toolbox.

The inputs now have DebounceDelay property but it will be useful to also have such functionality for other components that incorporate inputs - AutoComplete, for example.

I am loading data from the server based on the input that the user does. As it is not possible to predict how long the server takes to answer, it would be useful to only change the value after the user stops editing for about certain milliseconds.

• Missing overflow hamburger functionality. When small devices some item should move to the hamburger overflow.
• Floating items left or right as on kendo ui toolbar.

As per the current component configuration, when the EditContext changes, the Form descendants are not disposed and recreated. Thus when the change occurs, you need to explicitly add any validation (be that DataAnnotationsValidation or custom one).

This request serves for indicating research on how the Form behavior could be improved upon changing the EditContext.

Hi,

I'm testing the grid on mobile and I've noticed that the pager can end up being cut off the edge of the screen. The app is designed to not allow scrolling in the HTML window but it does allowing scrolling in the grid (and navbar). This works, but the pager is cutting off. Is there any way it can be made more responsive or made to wrap in a relatively neat way without breaking the control?

See attached image.

Thanks,

Nick

I would like to be to allow the user to resize the Blazor Telerik Window component to their individual liking. For example, like a resizable textbox but for a window/modal. I would assume this would function the same way as I would resize a window in Windows OS by dragging the corner or sides of an open window.