Completed
Last Updated: 12 Jul 2024 07:36 by ADMIN
Release 2024 Q2 (May)
Created by: Jerome
Comments: 8
Category: Filter
Type: Feature Request
35
Is there a way to create a custom template for the FilterField? I would like to create autocomplete/comboboxes for some of the options.
Completed
Last Updated: 12 Jul 2024 07:29 by ADMIN
Release 2024 Q3 (Aug)
Created by: Michael
Comments: 2
Category: DateInput
Type: Bug Report
2

The input should be focused after the user clicks the clear button.

Completed
Last Updated: 09 Jul 2024 10:48 by ADMIN
Release 2024 Q3 (Aug)
Created by: Nikolaj Herting
Comments: 2
Category: Editor
Type: Feature Request
12

Please expose the ability to allow additional HTML attributes in the Editor content.

===ADMIN EDIT===

Provide support for:

  • custom attributes for the Editor elements
  • custom tags
Completed
Last Updated: 05 Jul 2024 10:57 by EMMANUEL
Release 2.30.0
Created by: Danilo
Comments: 4
Category: Grid
Type: Feature Request
26

I have a grid with the excell Export. Now I have two custom Export buttons on the Page (Over and under the Grid).

Can I somehow trigger the Grid Excell Export command Manually? 

---

ADMIN EDIT

Here is a workaround - a bit of JS to click the desired button and the second snippet shows how to invoke it from a blazor component and code.

 <script>
        function clickButton(selector) {
            var btn = document.querySelector(selector);
            if (btn && btn.click) {
                btn.click();
            }
        }
    </script>

@inject IJSRuntime _js

<style>
    /* hide the built-in button if you like */
    .myExcelExportButton {
        display:none;
    }
</style>

<button @onclick="@MyExternalExportTrigger">my external export button</button>

<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true"
             Class="@GridClass">
    <GridToolBar>
        <GridCommandButton Class="@ExportBtnClass" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
        <label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>
    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
        <GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    // cascade through classes on the grid and/or on the built-in button to click it with JS
    // so that it can invoke the built-in export operations
    string GridClass { get; set; } = "MyGrid";
    string ExportBtnClass { get; set; } = "myExcelExportButton";
    async Task MyExternalExportTrigger()
    {
        var selector = $".{GridClass} .k-header .{ExportBtnClass}";
        await _js.InvokeVoidAsync("clickButton", selector);
    }



    List<SampleData> GridData { get; set; }
    bool ExportAllPages { get; set; }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
        {
            ProductId = x,
            ProductName = $"Product {x}",
            UnitsInStock = x * 2,
            Price = 3.14159m * x,
            Discontinued = x % 4 == 0,
            FirstReleaseDate = DateTime.Now.AddDays(-x)
        }).ToList();
    }

    public class SampleData
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int UnitsInStock { get; set; }
        public decimal Price { get; set; }
        public bool Discontinued { get; set; }
        public DateTime FirstReleaseDate { get; set; }
    }
}

---

Completed
Last Updated: 04 Jul 2024 21:35 by Aldo
Release 2024 Q3 (Aug)

In a filterable Grid, if a column is not bound to a field from the model the Grid uses, it throws with:

Error: System.ArgumentNullException: Value cannot be null. (Parameter 'nullableType')

Reproduction: https://blazorrepl.telerik.com/GyEUlFEs04AUJoJ601.

The issue is reproducible :

  • For `FilterRow` -  on initialization even if the column is not filterable.
  • For `FilterMenu` - on initialization when the column is filterable.

===

ADMIN EDIT

===

A possible workaround for the time being is to set the FieldType of the column: https://blazorrepl.telerik.com/wSugvFui10jhcpZy00.


Completed
Last Updated: 02 Jul 2024 13:45 by Al
Created by: Al
Comments: 2
Category: UI for Blazor
Type: Feature Request
1
Request the TelerikNotification supports MarkupString or HTML or at least Multiline text
Completed
Last Updated: 02 Jul 2024 11:01 by ADMIN
Release 2024 Q3 (Aug)
Created by: Nathan
Comments: 2
Category: Popover
Type: Bug Report
11

A basic example of the issue is using the Popover with a Grid: https://blazorrepl.telerik.com/cyuGvQPB37aekvo514.

On initial load, the Popover is properly attached to the span elements in the Grid cells. If I filter, however, the elements are disposed and re-initialized - after that, the Popover is not attached to the new elements even though they have the same class used as a target selector.

Completed
Last Updated: 28 Jun 2024 14:12 by ADMIN
Release 2024 Q3 (Aug)
Created by: Andrew
Comments: 0
Category: ListView
Type: Bug Report
1

The DropDownButton/DropDownList in the ListView Template does not open on the user's click after a few interactions.

Steps to reproduce:

  1. Open the REPL link.
  2. Click on the DropDownButton.
Completed
Last Updated: 28 Jun 2024 11:44 by ADMIN
Release 2024 Q3 (Aug)

---

ADMIN EDIT

Here is a workaround - using a bit of JS to clear the checked state of the checkbox element when you clear the SelectedItems collection:

At the end of this post you can find attached a sample project that showcases a more complex scenario where you may want to keep some rows selected but cancel the selection of others (in that sample, only one row with a given ItemType can be selected). It shows how you can get the index in the rendering of a particular row to use for a slightly modified version of the JS function.

@inject IJSRuntime _js

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
    function uncheckGrid() {
        var checkboxes = document.querySelectorAll(".no-select .k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<style>
    .no-select {
        cursor: not-allowed;
    }

    .no-select .k-checkbox {
        pointer-events: none;
    }
</style>

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@SelectedEmployees"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" OnCellRender="@OnGridCellRender" />
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Active)" />
    </GridColumns>
</TelerikGrid>

@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    private List<Employee> GridData { get; set; } = new List<Employee>();

    private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();

    private void OnGridCellRender(GridCellRenderEventArgs args)
    {
        var product = (Employee)args.Item;
        if (!product.Active)
        {
            args.Class = "no-select";
        }
    }

    protected void OnSelect(IEnumerable<Employee> newSelected)
    {
        var validItemsToSelect = newSelected.Where(x => x.Active);
        SelectedEmployees = validItemsToSelect;
        if (validItemsToSelect.Count() < newSelected.Count())
        {
            _js.InvokeVoidAsync("uncheckGrid");
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = $"Employee {i}",
                Team = $"Team {i % 3 + 1}",
                Active = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool Active { get; set; }
    }
}

Completed
Last Updated: 28 Jun 2024 09:01 by ADMIN
Release 2024 Q3 (Aug)
When you have a Navigable Grid with a Material theme, the sorting on each click does not work. You have to click outside of the header and click again in it to sort. The behavior can be seen only in version 6.0.0.
Completed
Last Updated: 28 Jun 2024 05:40 by ADMIN
Release 2024 Q3 (Aug)
The amount of clicks on the + button and the amount of mouse wheel scrolls is different if you refresh the Map component. 
Completed
Last Updated: 28 Jun 2024 05:30 by ADMIN
Release 2024 Q3 (Aug)
Created by: Eugenie
Comments: 5
Category: UI for Blazor
Type: Feature Request
52

I would like the DropDownList to automatically detect the boundaries of the screen in order not to truncate items when the popup is opened.

 

===========

ADMIN EDIT

===========

The request is also valid for the rest of the popups including AutoComplete, ComboBox, Context Menu, MultiSelect.

This is also valid for the Window.

Completed
Last Updated: 24 Jun 2024 08:29 by ADMIN
Release 2024 Q3 (Aug)

Implementation of one or both of these features:

- Screen boundary detection: The list of child items expands to the opposite direction when necessary to prevent screen boundaries from being crossed.

- ExpandDirection: Gets or sets the direction in which child items will open.

Completed
Last Updated: 21 Jun 2024 12:44 by ADMIN
Release 2024 Q2 (May)
Created by: Ryan
Comments: 2
Category: Dialog
Type: Bug Report
4

There is a bug where DialogFactory is not resetting custom button text. In this example, if you click Show Prompt, the buttons are OK/CANCEL, then click Show Prompt with Title, Default Input Text and Custom Buttons, the buttons show READY/REJECT, clicking Show Prompt a second time will show the button text as READY/REJECT.

Completed
Last Updated: 20 Jun 2024 14:11 by Brian
Release 5.0.0 (15 Nov 2023) (R1 PI1)

I have a ComboBox/DropDownList that gets data from a remote service, using virtualization. When the PageSize property is big enough (in my case 20), I have issues scrolling up the selection box dropdown list. I'm trying to scroll but then resets to the currently selected item making it almost impossible to scroll up. You can use your own demo examples to replicate this issue.

To reproduce the issue, try the ComboBox - Virtualization, in Telerik REPL (Demo), change the PageSize from 10 to 20. Open the dropdown and select an item. Then, open again the dropdown and scroll slowly up.

Completed
Last Updated: 18 Jun 2024 12:58 by Brian
Release 2024 Q3 (Aug)
According to the Rendering Changes in 6.0.0 article, "k-level-0" CSS class should be added to the "li.k-drawer-item" element. This class, however, is never added.
Completed
Last Updated: 13 Jun 2024 11:43 by ADMIN
Release 2024 Q3 (Aug)
Created by: Matthijs
Comments: 4
Category: DropDownList
Type: Bug Report
5

Steps to reproduce:

  1. Open the Edit in Telerik REPL link from the demo page for DropDownList - Grouping.
  2. Add Filterable="true" to TelerikDropDownList.
  3. Run.
  4. Open the dropdown.
  5. Type in for instance the last item of the list "Röd Kaviar", that belongs to the category "Seafood".

Expected: the group name should change to "Seafood".

Actual: the group name is still "Beverages".

Completed
Last Updated: 12 Jun 2024 13:49 by ADMIN
Release 2024 Q3 (Aug)

I have a Grid using checkbox selection and when I un-check a row, the SelectedItemsChanged event is not firing. I'm using an async handler.

The problem appears to happen when a row is selected and then un-selected. The event is firing when it is selected but is not firing when it is un-selected.

<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
                                 ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
                                 SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
                                 FilterMode="GridFilterMode.FilterRow">
                        <GridColumns>
                            <GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
                            <GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
                        </GridColumns>
                    </TelerikGrid>

    private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
    {
        selectedStrategic = selectedItems;

        var state = tacticalGrid.GetState();

        var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
        foreach (var item in selectedItems)
        {
            compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
            {
                Member = "ParentId",
                Operator = FilterOperator.IsEqualTo,
                Value = item.Id
            });
        }

        state.FilterDescriptors.Clear();
        state.FilterDescriptors.Add(compositeFilter);

        await tacticalGrid.SetState(state);
    }

Completed
Last Updated: 12 Jun 2024 11:29 by ADMIN
Release 2.18.0

Please add an attribute to Blazor GridColumn which allows to easily format data with the default .NET standard formats

e.g. <GridColumn Field="@(nameof(Item.Price))" Title="Price" Format="0#.##" />

It's a little bit annoying always having to define a template for this purpose.

 


Not Logged in

Completed
Last Updated: 12 Jun 2024 10:51 by ADMIN
Release 2024 Q3 (Aug)

Reproduceable example: https://blazorrepl.telerik.com/QSEganvg12BVw2ZU37

Steps to reproduce:

  • Add a TelerikGrid to the page - most properties on the grid do not matter for this issue
  • Implement the OnStateInit event
  • Define the GridAggregates render fragment within the TelerikGrid, but leave it empty - do not put any components inside it
  • When the page initializes, note that OnStateInit is never fired

If you remove the GridAggregates emtpy render fragment, or put at least one GridAggregate component in it, OnStateInit fires like expected.

In my project, I've created a component that wraps around the TelerikGrid that I use on all my pages, so that I can have many properties and functions set to reasonable defaults for my use case. My component has an option to conditionally include GridAggregate components within the inner TelerikGrid's GridAggregates render fragment based on separate configuration. If no separate configuration is provided, no GridAggregate components are included, and the GridAggregates render fragment is left blank. Since my component is built in razor markup, there isn't a great option for nulling out that render fragment if it's empty. I had no problems with this exact same code in UI for Blazor version 5.1, and I hope this can be fixed.

1 2 3 4 5 6