Need More Info
Last Updated: 18 May 2021 12:00 by Lutz

There doesn't seem to be a way to deselect the selected row either by clicking on a selected row again or by two-way-binding and setting it to an empty list.

 

This would be pretty handy as currently the only way that makes sense for me is to make no use of selection mode at all.

Completed
Last Updated: 18 May 2021 06:07 by ADMIN
It I possible to customize the Dialog component (e.g Yes/No instead of OK/Cancel)?
Unplanned
Last Updated: 14 May 2021 05:48 by ADMIN
Created by: Danilo
Comments: 3
Category: Grid
Type: Feature Request
15

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; }
    }
}

---

Unplanned
Last Updated: 13 May 2021 17:07 by ADMIN
Created by: Wes
Comments: 0
Category: Grid
Type: Feature Request
1

When you set widths to some columns in the grid, the rest of the columns stretch to accommodate the rest of the width. Thus, the row drag column can stretch and become unexpectedly wide. A screenshot of the problem is attached.

Perhaps the GridRowDraggableSettings could have a parameter for the width of the draggable column.

Completed
Last Updated: 13 May 2021 17:05 by ADMIN
Release 2.24.0
Created by: Wei
Comments: 4
Category: Grid
Type: Feature Request
34
there is a feature we want to implement in grid for a row to be dragged and dropped onto another row. is this something we can do with blazor grid?

drag one row or multiple row over another row and have the drop event exposed so we can handle it?
Duplicated
Last Updated: 12 May 2021 10:29 by Rajesh
Created by: Rajesh
Comments: 4
Category: UI for Blazor
Type: Feature Request
1
In Telerik blazor grid  Incell editing mode once we edit existing grid row and modified and save.  after that how to add new row programmatically (automatically like excel).  No need to bother user to  click add button again and again to add row.
Completed
Last Updated: 12 May 2021 04:56 by ADMIN
Release 2.24.0
Created by: Ben Hayat
Comments: 2
Category: UI for Blazor
Type: Feature Request
13
Card:
A Card component similar to what can be done with Bootstrap. However a pre made Blazor component that we can quickly give it size parameters, shading and etc. to create a card where we can put content in the card.
Planned
Last Updated: 11 May 2021 09:01 by ADMIN
Scheduled for 2.25.0
Created by: Graham
Comments: 4
Category: UI for Blazor
Type: Feature Request
29

I would like components like the TextBox, NumericTextBox, TextArea, Button to have a method in their reference similar to the FocusAsync() which Microsoft included to the ElementReference in .NET5.

---

ADMIN EDIT

For the time being, you can use JS interop and prepare a suitable selector. Here is a basic example for the button:

@inject IJSRuntime _js

Notes:<br />
- Move this script to a proper place, it is hacked into the component to make this snippet short
- Make sure the ID is unique if you use IDs. THere are other selectors you can use (such as classes, or you can even cascade your selectors to make them more specific)
<br /><br />

<script suppress-error="BL9992">
    function focusElement(selector) {
        var elem = document.querySelector(selector);
        if (elem && elem.focus) {
            setTimeout(function () {
                elem.focus();
            }, 30);
        }
    }
</script>

<TelerikButton OnClick="@FocusBtn">Focus the other button</TelerikButton>

<br /><br />

<TelerikButton Id="@btnId" OnClick="@SpecialBtnAction">I will be focused programmatically</TelerikButton>

@code{
    string btnId = "my-special-btn";

    async Task FocusBtn()
    {
        await _js.InvokeVoidAsync("focusElement", $"#{btnId}");
    }

    async Task SpecialBtnAction()
    {
        Console.WriteLine("special button clicked");
    }
}

---

Unplanned
Last Updated: 10 May 2021 07:28 by ADMIN

I am working on a form where experienced agents need to input data quickly. Often enough they know the codes and so they can type them in the combo box, but they shouldn't have to look for the mouse to select the item, the combo box should select it when the user presses Tab to move to the next field.

This should happen only when the user has filtered the combo box so they see some items (and so the dropdown is open) - I want them to be able to select only items from the available options, AllowCustom does not work for me.

---

ADMIN EDIT

Here is one workaround you can consider:

 

@inject IJSRuntime _js

@* Move this script to a proper place in your project, the suppress-error hack is to keep it here in the component for easy copy-paste *@
<script suppress-error="BL9992">
    function getComboHighligtedItem() {
        // gets the currently focused item in this particular combobox
        var selItemElem = document.querySelector(".special-combobox .k-item.k-state-focused");
        if (selItemElem) {
            return selItemElem.innerText;
        }
    }
</script>

Selected value: @selectedValue
<br />

<TelerikComboBox OnBlur="@Test" PopupClass="special-combobox"
                 
                 Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue" 
                    Placeholder="Select an item..." ClearButton="true" Filterable="true" FilterOperator="@StringFilterOperator.Contains">
</TelerikComboBox>

<input placeholder="other form elements" />

@code {
    async Task Test()
    {
        string currInput = await _js.InvokeAsync<string>("getComboHighligtedItem");
        Console.WriteLine("--------------");
        Console.WriteLine(currInput);
        Console.WriteLine("--------------");
        // note - this relies on the item template of the combo rendering the text, or not being used at all
        // if you use other item templates, you may need to delve deeper in the DOM or otherwise recognize the item
        if (!string.IsNullOrEmpty(currInput))
        {
            // match the filter operation to the filter operator of the combo box - Contains in this sample
            var matchingItem = myComboData.Where(itm => itm.MyTextField.ToLowerInvariant().Contains(currInput.ToLowerInvariant())).FirstOrDefault();
            if (matchingItem != null)
            {
                selectedValue = matchingItem.MyValueField;
            }
        }

    }
   
    // just dummy data follows

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

 

---

Unplanned
Last Updated: 10 May 2021 06:42 by ADMIN
Created by: Peter
Comments: 0
Category: Editor
Type: Feature Request
1
I would like to be able to add media tags in the editor, such as video. 
Unplanned
Last Updated: 10 May 2021 06:23 by ADMIN
Created by: Brian
Comments: 1
Category: Grid
Type: Feature Request
2
I would like to use the endless scrolling feature (like in the Telerik UI for jQuery) with the Telerik Blazor Grid.
Duplicated
Last Updated: 09 May 2021 06:28 by ADMIN
Created by: shanthu
Comments: 1
Category: UI for Blazor
Type: Feature Request
2
Many LOB applications have to play video within their web applications. MediaPlayer for Blazor is definitely needed.
Unplanned
Last Updated: 08 May 2021 06:52 by ADMIN
Created by: Roy
Comments: 5
Category: TabStrip
Type: Feature Request
29

At the moment, when tabs hide their components are removed, so when you go back to a tab, it initializes again  - for example, the OnInitializedAsync event fires where you fetch data, so you have to fetch the data again.

This behavior should be controlled through a property so one can keep the original behavior where the components are cleared from the DOM and memory.

Perhaps an option can be added where tabs are initialized not on initial load, but upon first activation only. Maybe the feature can become something like an enum - LoadMode="InitialRender|FirstRender|EveryRender" (working title off the top of my head).

At the moment, a solution you can use is to send the data to the tab from its contents through an event, and to pass it to them as a Parameter so you can check for it before fetching data.

Completed
Last Updated: 07 May 2021 13:28 by ADMIN
Release 2.24.0
Created by: ali
Comments: 15
Category: Grid
Type: Feature Request
34

how to use Multiple Column Header in grid?

thanks

Completed
Last Updated: 07 May 2021 11:06 by ADMIN
Release 2.24.0
Created by: ben
Comments: 4
Category: ComboBox
Type: Feature Request
25

Transitioning our application from Telerik React to Blazor, our comboboxes in our React application are hooked up to OData endpoints because of the amount of data they could display, some as large as 30mb of json.

Server filtering, https://feedback.telerik.com/blazor/1447481-server-filtering-with-custom-data-request-event-that-can-accommodate-remote-data, almost works, however:

  • I can't set PageSize on the combobox
  • I can't set TotalCount on the combobox
  • Using Telerik.Blazor.ExtensionMethods.ToOdataString throws a NullReferenceException when I try to use it in the ReadItems method with the ComboBoxReadEventArgs args.Reqeuest.ToOdataString()

I tried setting up my combobox like my OData Grid, i.e.


<TelerikComboBox Data="@Dtos"
                         OnRead="@ReadItems"
                         Filterable="true"
                         Placeholder="Find what you seek by typing"
                         @bind-Value="@SelectedValue"
                         TextField="Name" 
                         ValueField="Id"
                         Pageable="true" 
                         PageSize="20" 
                         TotalCount=@Dtos.Count
                         >

However it throws an exception:

blazor.webassembly.js:1 WASM: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TelerikComboBox`2[[MyType, MyNamespace, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[System.Guid, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'Pageable'.

Was hoping this would 'just work' like it does with the Grid, which is amazing!

Unplanned
Last Updated: 07 May 2021 06:44 by ADMIN
Created by: Michael
Comments: 0
Category: StockChart
Type: Feature Request
1
I would like to control the markers in the StockChart like in the "regular" chart
Unplanned
Last Updated: 07 May 2021 00:29 by Baires
Created by: Yuri
Comments: 1
Category: Dialog
Type: Feature Request
2

Can I define the Cancel home button by default? When deleting a line I use Confirm Dialogs, I want the default (active) button to be Cancel (not Ok)

---

ADMIN EDIT

Here is a solution you can use:

@inject IJSRuntime _js

@* move this script to a proper place in your project and remove the 
    suppress-error hack that lets it stay in the component - it is here for brevity only *@
<script suppress-error="BL9992">
    function focusCancelDialogButton() {
        setTimeout(function() {
            var cancelButtons = document.querySelectorAll(".k-dialog .k-dialog-buttongroup .k-button");
            if(cancelButtons && cancelButtons.length > 1) {
                cancelButtons[1].focus();
            }
        }, 100);
    }
</script>

<TelerikButton OnClick="@ShowConfirm">Show Confirm</TelerikButton>

@code {
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }

    public async Task ShowConfirm()
    {
        await _js.InvokeVoidAsync("focusCancelDialogButton");
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?");

        if (isConfirmed)
        {
            Console.WriteLine("The user is sure, continue.");
        }
        else
        {
            Console.WriteLine("The user changed their mind");
        }
    }
}

---

Completed
Last Updated: 06 May 2021 16:27 by ADMIN
Release 2.22.0

I would like the grid to behave like Excel for editing, and so I am using the InCell editing mode. I would like that pressing Tab would open the next cell in the row instead of moving the focus to the next focusable element.

---

ADMIN EDIT

The feature is rather complex and we want to make sure it is done right. To this end, we have postponed its implementation for the year 2021 instead of the November 2020 release. When a concrete release is known, this page will be updated. To get notifications for that, click the Follow button.

---

Completed
Last Updated: 06 May 2021 15:20 by ADMIN
Release 2.24.0
Created by: Datafyer
Comments: 7
Category: UI for Blazor
Type: Feature Request
33

Having the ability to specify sections and then allowing the user to expand the section can be very helpful for complex content or menus.

The sections can be expanded so 1 is visible always or multiple can be expanded.

In Development
Last Updated: 05 May 2021 19:36 by Douglas
Scheduled for 2.25.0

Grid column header and content alignment (horizontal +Vertical)

---

ADMIN EDIT

For the time being, this is possible through the CellRender event, see below in the thread for an example.

---

1 2 3 4 5 6