Completed
Last Updated: 26 May 2022 18:38 by ADMIN
Release 3.4.0
When I try to add a CSS class to the automatically generated columns with the Class parameter it does not appear in the HTML.
Completed
Last Updated: 26 May 2022 18:31 by ADMIN
Release 3.4.0

I set the Enabled parameter to false, but it didn't disable the input.

Wrap the Switch inside label HTML element and set Enabled to false. Switch will remain enabled. This problem occurs only when you wrap the Switch inside a label. If the Switch is wrapped in another HTML element, the Enabled parameter will work as expected.

 

----------ADMIN EDIT----------

In the meantime, there are two possible workarounds:

  • If you want to use the label HTML element, you can add a custom CSS rule that disables the click. You can see the following example. 
    @if (isEnabled == false)
    {
        <style>
            .switch {
                pointer-events: none;
            }
        </style>
    }
    
    <label class="switch">
        <TelerikSwitch @bind-Value="@isSelected" Enabled="@isEnabled" />
        @( isSelected ? "Selected" : "Not selected" )
    </label>
    
    @code {
        private bool isSelected { get; set; }
        static bool isEnabled { get; set; } = false;
    }
  • The second option is to avoid using label and wrap the Switch with a different HTML element.
Completed
Last Updated: 26 May 2022 18:19 by ADMIN
Release 3.4.0

The exception is -

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

Here is a test page, based on this one -

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
@using System.IO

<TelerikGrid TItem="@object"
             LoadGroupsOnDemand="true"
             Groupable="true"
             OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
             OnRead="@ReadItems"
             ScrollMode="@GridScrollMode.Virtual" PageSize="20" RowHeight="60"
             Navigable="true" Sortable="true" FilterMode="@GridFilterMode.FilterRow" Height="600px">
    <GridColumns>
        <GridColumn Field="@nameof(Employee.Name)" FieldType="@typeof(string)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.Team)" FieldType="@typeof(string)" Title="Team" />
        <GridColumn Field="@nameof(Employee.Salary)" FieldType="@typeof(decimal)" Groupable="false" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" FieldType="@typeof(bool)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<object> GridData { get; set; }

    protected async Task ReadItems(GridReadEventArgs args)
    {
        DataEnvelope<Employee> result = await MyService.GetData(args.Request);

        if (args.Request.Groups.Count > 0)
        {
            args.Data = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();
        }
        else
        {
            args.Data = result.CurrentPageData.Cast<Employee>().ToList();
        }

        args.Total = result.TotalItemCount;

        if (args.Request.Groups.Count > 0)
        {
            try
            {
                List<AggregateFunctionsGroup> items = result.GroupedData.Cast<AggregateFunctionsGroup>().ToList();

                await using var s = new MemoryStream();
                await System.Text.Json.JsonSerializer.SerializeAsync(s, items);
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
            }
        }
    }

    void OnStateInitHandler(GridStateEventArgs<object> args)
    {
        // set initial grouping
        GridState<object> desiredState = new GridState<object>()
        {
            GroupDescriptors = new List<GroupDescriptor>()
    {
                new GroupDescriptor()
                {
                    Member = "Team",
                    MemberType = typeof(string)
                },
                new GroupDescriptor()
                {
                    Member = "IsOnLeave",
                    MemberType = typeof(bool)
                }
            }
        };

        args.GridState = desiredState;
    }

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

    public class DataEnvelope<T>
    {
        public List<AggregateFunctionsGroup> GroupedData { get; set; }
        public List<T> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public static class MyService
    {
        private static List<Employee> SourceData { get; set; }
        public static async Task<DataEnvelope<Employee>> GetData(DataSourceRequest request)
        {
            if (SourceData == null)
            {
                SourceData = new List<Employee>();
                var rand = new Random();
                for (int i = 1; i <= 2500; i++)
                {
                    SourceData.Add(new Employee()
                    {
                        EmployeeId = i,
                        Name = "Employee " + i.ToString(),
                        Team = "Team " + i % 100,
                        IsOnLeave = i % 3 == 0,
                        Salary = rand.Next(1000, 5000)
                    });
                }
            }

            await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app

            // retrieve data as needed, you can find more examples and runnable projects here
            // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server
            var datasourceResult = SourceData.ToDataSourceResult(request);

            DataEnvelope<Employee> dataToReturn;

            if (request.Groups.Count > 0)
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    GroupedData = datasourceResult.Data.Cast<AggregateFunctionsGroup>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }
            else
            {
                dataToReturn = new DataEnvelope<Employee>
                {
                    CurrentPageData = datasourceResult.Data.Cast<Employee>().ToList(),
                    TotalItemCount = datasourceResult.Total
                };
            }

            return await Task.FromResult(dataToReturn);
        }
    }
}

Completed
Last Updated: 23 May 2022 09:48 by ADMIN
Release 3.4.0

When a filter descriptor is created and the value is of type DateTime? (nullable DateTime) the serialized value is incorrect.

    DataSourceRequest request1 = new()
    {
         Filters = new[] {new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) {MemberType = typeof(DateTime)}},
         Sorts = new List<SortDescriptor>()
    };

    DataSourceRequest request2 = new()
    {
         Filters = new[] { new FilterDescriptor("Test", FilterOperator.IsEqualTo, DateTime.Now.Date) { MemberType = typeof(DateTime?) } },
         Sorts = new List<SortDescriptor>()
    };

    string query1 = request1.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12T00:00:00.0000000Z)&$skip=0
    string query2 = request2.ToODataString(); // outputs $count=true&$filter=(Test%20eq%202022-05-12%2000:00:00)&$skip=0

 

Completed
Last Updated: 20 May 2022 09:25 by ADMIN
Release 3.4.0
Created by: Amanatios Amanatidis
Comments: 0
Category: ColorPicker
Type: Bug Report
0

When a culture that has comma for decimal separator is used, the ColorPicker formats the rgba() CSS rule as rgba(255,255,255,0,6) which is incorrect. The alpha value should always have a dot as a decimal separator.

<TelerikColorPicker @bind-Value="@value">

@code {
    public string Value { get; set; } = "#282f89";
}

Set the culture of the application so that the default decimal separator is a comma (el-GR).

// in Program.cs file
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("el-GR");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("el-GR");
Open the picker and set the value to the Alpha numeric textbox to 0,6. Apply the changes.

The rgba() rule is formatted as rgba(255, 255, 255, 0,6) but should be formatted as rgba(255, 255, 255, 0.6).

Completed
Last Updated: 17 May 2022 11:19 by ADMIN
Release 3.4.0
Created by: Jason
Comments: 0
Category: NumericTextBox
Type: Bug Report
0

The NumericTextBox does not allow pasting from an Excel cell. Pasting from the plain text textbox at the top of the Excel interface works.

The problem is caused by a new line character, which Excel adds to the clipboard value when copying the cell directly. A possible workaround is:

  1. Subscribe to the paste event of the NumericTextBox <input>
  2. Check for "invalid" pasted content that you need
  3. Set the <input> value manually with JavaScript
  4. Notify the component's instance in the .NET runtime

The important thing to keep in mind is: the JavaScript workaround should work only for pasted content, which the NumericTextBox does not allow. Otherwise the app will edit the value one extra time. In the example below, the script checks specifically for a new line at the end of the pasted value.

@inject IJSRuntime js

<TelerikNumericTextBox @bind-Value="@NumValue" Width="200px" Class="fix-paste" />

@* suppress-error allows script tags in Razor components. Move this script to a proper place in production environment. *@
<script suppress-error="BL9992">function fixPaste() {
    var inputs = document.querySelectorAll(".fix-paste .k-input-inner");
    inputs.forEach(element => {
        element.addEventListener("paste", function(e) {
            // get pasted content
            debugger;
            var pastedString = e.clipboardData.getData("text/plain");
            // check for specific content, which DOES NOT pass the built-in validation
            // adjust this conditional statement, according to the application scenario
            if (pastedString.indexOf("\n") == pastedString.length - 1) {
                // assign the pasted content manually
                e.target.value = pastedString.trim();
                // tell the component's .NET instance to change the value
                e.target.dispatchEvent(new Event("input", { bubbles: true, cancelable: true }));
            }
        });
    });
}</script>

@code {
    double NumValue { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("fixPaste");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

 

Completed
Last Updated: 16 May 2022 22:05 by ADMIN
Created by: Dale
Comments: 2
Category: Filter
Type: Bug Report
1

If the CompositeFilterDescriptor is set with a predefined filter before the filter component is rendered on the page it locks up the UI.

 

I've noticed this issue if the Filter is user under a TabStrip.. You set the filter and navigate way from the tab and back it will lock up.

Completed
Last Updated: 06 May 2022 13:23 by ADMIN
Release 3.3.0

A ComboBox is databound via OnRead. It has an initial value, but no data arrives after the first OnRead call. We call Rebind() to fetch data and then it populates, but the component value doesn't show.

Click the button. The ComboBox should show its initial value, but doesn't. A similar scenario worked until version 2.30, when there was no Rebind(), but we set Data directly.

The workaround is to set raise a flag in OnRead and set the value in OnAfterRenderAsync.

@using Telerik.DataSource.Extensions

<TelerikButton OnClick="@BindCombo">Rebind Combo</TelerikButton>

<TelerikComboBox TItem="@ComboItem"
                 TValue="int"
                 @ref="@ComboRef"
                 TextField="Text"
                 ValueField="Id"
                 OnRead="OnComboRead"
                 Width="200px"
                 @bind-Value="@ComboValue">
</TelerikComboBox>

@code {
    string FilterValue { get; set; } = "A";
    int ComboValue { get; set; } = 2;
    bool BindFlag { get; set; }
    bool ShouldResetValue { get; set; }
    IEnumerable<ComboItem> LegacyComboData { get; set; }

    TelerikComboBox<ComboItem, int> ComboRef { get; set; }

    void BindCombo()
    {
        BindFlag = true;
        ComboRef.Rebind();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ShouldResetValue)
        {
            // comment out the initially set value above to make the following line work
            ComboValue = 2;
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    async Task OnComboRead(ComboBoxReadEventArgs args)
    {
        if (BindFlag)
        {
            var service = new MyService();

            var data = await service.GetComboItem(FilterValue);
            var result = await data.ToDataSourceResultAsync(args.Request);

            args.Data = result.Data;

            //ShouldResetValue = true;
        }
    }

    public class ComboItem
    {
        public int Id { get; set; }
        public string Code { get; set; }
        public string Text { get; set; }
    }

    public class MyService
    {
        public async Task<IEnumerable<ComboItem>> GetComboItem(string code)
        {
            await Task.Delay(300);

            var data = new[]
            {
                    new ComboItem{ Id = 1, Code = "A", Text = "ValueA1" },
                    new ComboItem{ Id = 2, Code = "A", Text = "ValueA2" },
                    new ComboItem{ Id = 3, Code = "A", Text = "ValueA3" },
                    new ComboItem{ Id = 4, Code = "B", Text = "ValueB4" },
                    new ComboItem{ Id = 5, Code = "B", Text = "ValueB5" },
                    new ComboItem{ Id = 6, Code = "B", Text = "ValueB6" },
                    new ComboItem{ Id = 7, Code = "C", Text = "ValueC7" },
                    new ComboItem{ Id = 8, Code = "C", Text = "ValueC8" },
                    new ComboItem{ Id = 9, Code = "C", Text = "ValueC9" },
                };

            return data.Where(x => x.Code == code).ToList();
        }
    }
}

 

Completed
Last Updated: 04 May 2022 20:15 by ADMIN
Release 3.3.0
the dropdown options display correctly until some come from a second service call.

The problem is that if the selected option is in the options added later then it does not show it as the selected value.

Example below shows correct function for "6" but incorrect for "7".

---

ADMIN EDIT

Here is a reproducible with the workaround highlighted in green:

 

@using System.Collections.ObjectModel

<h4>Option Selected: 6 @selectedSix</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSix" />

<h4>Option Selected: 7 @selectedSeven</h4>
<br />

<TelerikDropDownList Data="@myDdlData"
                     TextField="MyTextField"
                     ValueField="MyValueField"
                     @bind-Value="@selectedSeven">
</TelerikDropDownList>

<TelerikButton OnClick="@AddOption">Add Item</TelerikButton>

<ul>
    @foreach (var item in myDdlData)
    {
        <li>@item.MyValueField</li>
    }
</ul>

@code {
    int selectedSix { get; set; } = 6;
    int selectedSeven { get; set; } = 7;

    ObservableCollection<MyDdlModel> myDdlData = new ObservableCollection<MyDdlModel>(Enumerable.Range(1, 5).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x }));

    protected override async Task OnInitializedAsync()
    {
        AddOption();

        await Task.Delay(TimeSpan.FromSeconds(1));

        AddOption();
    }

    void AddOption()
    {
        myDdlData.Add(new MyDdlModel { MyTextField = "item " + (myDdlData.Count + 1), MyValueField = myDdlData.Count + 1 });

        int origSelection = selectedSeven;
        selectedSeven = 0;
        StateHasChanged();
        //add this if it does not work
        //await Task.Delay(30);//wait a rendering frame
        selectedSeven = origSelection;
        //add this if it does not work
        //StateHasChanged();
    }

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

 

Note: This behavior also occurs if the initial data is received after the component is initialized. The workaround in this case will be similar - set the selected value after the data is received.

---

Completed
Last Updated: 04 May 2022 18:48 by ADMIN
Release 3.3.0
Field and Value properties from GridCommandEventArgs don't populate in Incell editing. Their value is always null and thus I cannot get information for the edited field.
Completed
Last Updated: 04 May 2022 09:45 by ADMIN
Release 3.3.0

The upload status hangs on "Uploading..." if the Upload component is hosted in a Dialog and the OnSuccess event is used.

 

<AdminEdit>

As a workaround, you can host the Upload in a Window, where this issue is not present

</AdminEdit>

Completed
Last Updated: 04 May 2022 08:01 by ADMIN
Release 3.3.0

On the DateTimePicker, when the "Set" button is clicked, the focus is given to the DateTimePicker field, so when the user clicked outside the component, the OnChange event is fired.

But the behaviour of the TimePicker is different. Indeed, after clicking on the "Set" button the TimePicker field does not get the focus, so the user can't click outside of it to fire the OnChange event.

The following code allows to manually set the focus on each ValueChanged event, but because of it the two-way binding can't be used. This code allows the TimePicker to have the same behaviour than the DateTimePicker :


<TelerikTimePicker @ref="@timepicker" Value="MyDate" OnChange="MyDateChanged"
    ValueChanged="@((DateTime d) => { MyDate = d; timepicker.FocusAsync(); })"></TelerikTimePicker>

@code {
    private DateTime MyDate { get; set; }
    private TelerikTimePicker<DateTime> timepicker;

    public void MyDateChanged(object theUserInput)
    {
        Console.WriteLine("Event OnChange fired");
    }
}

---

ADMIN EDIT

Reproducible

1. Go to the TimePicker demo https://demos.telerik.com/blazor-ui/timepicker/overview
2. open the popup
3. set a time with the Set button

**Note**: same goes for the Cancel button

### Current

focus goes somewhere (maybe on the body)

### Expected

focus goes to the input of the time picker

---

Completed
Last Updated: 04 May 2022 07:40 by ADMIN
Release 3.3.0

The ComboBox will not display an initial selected item, if the value is equal to the type's default. Applies to integers, guids, etc.

This used to work until version 2.30.

Here is a REPL test page.

If the value type is nullable, a zero int value will work for initial item selection.

Completed
Last Updated: 02 May 2022 12:28 by ADMIN
Release 3.3.0

ADMIN EDIT

You can use the code snippet below to test this behavior in your app. At the end of the post you will find two sample apps attached that use that same code - one is OK, the other exhibits the issue. The difference in them is the layout. The one that works OK has the old MS template from over a year ago where there is an <app> element above the root of the blazor components, and that element has display: flex. The problematic app has the newer template without such a parent element - the parent element is not the <body> and it does not have display:flex. You can add in the following rule to it to see it will fix the dialog overlay error (but it can damage the layout of the app).

sample rule to fix the issue in the problematic app

    body {
        display:flex;
    }

sample code to test the behavior

<TelerikWindow Modal="true" @bind-Visible="@isModalVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        I am modal so the page behind me is not available to the user.
        <br />
        <TelerikButton OnClick="@( _ => isSecondModalVisible = true )">Open the SECOND window</TelerikButton>
        <TelerikButton OnClick="@ShowConfirmWithTitle">Show Confirm</TelerikButton>
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikWindow Modal="true" @bind-Visible="@isSecondModalVisible">
    <WindowTitle>
        <strong>The SECOND</strong>
    </WindowTitle>
    <WindowContent>
        Second modal!
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    [CascadingParameter]
    public DialogFactory Dialogs { get; set; }
    bool isModalVisible { get; set; }
    bool isSecondModalVisible { get; set; }
    async Task ShowConfirmWithTitle()
    {
        bool isConfirmed = await Dialogs.ConfirmAsync("Are you sure?", "Confirmation!");

        Console.WriteLine($"The user is sure: {isConfirmed}.");
    }
}

Completed
Last Updated: 29 Apr 2022 14:22 by ADMIN
Release 3.3.0

When you paste a table in the Editor or insert one through the InsertHTML tool, most of the Editor Table tools don't work on the pasted table. Only Delete Table tool can be used. The rest of the Table tools do not seem to invoke any action with the table.

If you create table using the Create Table tool this behavior is not present, you can accordingly apply the built-in Table tools.

Completed
Last Updated: 29 Apr 2022 12:42 by ADMIN
Release 3.3.0

Steps to reproduce:

https://demos.telerik.com/blazor-ui/editor/overview

1. Clean content
2. Insert sentence
3. Center it and press Enter
4. Type new sentence and select whole content (Ctrl + A)
5. Align not possible, because is selected

Expected: All paragraphs in the editors receive center alignment

Actual: Align is possible

Completed
Last Updated: 29 Apr 2022 09:55 by ADMIN
Release 3.3.0

The following knowledge base article describes how to select the default value in a drop down, but if there's no default value the selection is not cleared using this method.

https://docs.telerik.com/blazor-ui/knowledge-base/inputs-clear-selection-value?_ga=2.18517947.380379649.1635269411-1661447875.1621547203

When setting the bind value to null (or the default, or frankly anything that doesn't exist in the drop down) I'd like the drop down list selection to be cleared when there's no default value set on the DropDownList.

 

@page "/"

<br />

<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />

@code {
    List<string> data = new() { "selection" };
    string selectedValue;

    void ClearSelection()
    {
        // This does not cause the drop down to clear the selection and I think it should.
        selectedValue = null;
    }
}

Completed
Last Updated: 29 Apr 2022 09:19 by ADMIN
Release 3.3.0
Created by: Emran
Comments: 0
Category: Editor
Type: Bug Report
2

If I click accidentally click on one of the alignment options, I cannot then unselect it.

===========

ADMIN EDIT

Video of the current behavior attached.

===========

 

Completed
Last Updated: 27 Apr 2022 13:04 by ADMIN
Release 3.3.0
I am using a bool property to control whether the rows of the Grid would be draggable. When I try to toggle the value of this property the feature is not enabled or disabled accordingly. 
Completed
Last Updated: 26 Apr 2022 19:33 by ADMIN
Release 3.3.0

After the 3.1 update, the OnChange event no longer fires. It fires only on Enter key press.

See this REPL link.

1 2 3 4 5 6