Hi,

I'd like to set the selected items of a treeview from an async method. The values to set come from an web api. So it's an async call.

I tested the case with the provided Telerik sample. With version 2.25 it works. With the latest version selected items are not set within the treeview.

What do I miss?

@page "/"
<TelerikTreeView Data="@FlatData"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 CheckParents="@true"
                 CheckChildren="@true"
                 CheckOnClick="@false"
                 @bind-CheckedItems="@SelectedItems">
    
</TelerikTreeView>

@code {
    List<TreeItem> FlatData { get; set; }
    IEnumerable<object> SelectedItems { get; set; } = new List<object>();
    protected override async Task OnInitializedAsync()
    {
        await GenerateData();
        await SelectDefault();
    }

    async Task SelectDefault()
    {
        await Task.Delay(100);
        SelectedItems = FlatData.Where(data => data.Id == 2);
    }

    async Task GenerateData()
    {
        FlatData = new List<TreeItem>();

        FlatData.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentId = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        FlatData.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentId = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        FlatData.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentId = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }
}

Hi,

I am using TelerikCalendar Blazor component and set its SelectionMode="@CalendarSelectionMode.Multiple".

It works fine on computer as there is CTRL key to hold and click multiple dates to select them.

My question is how to make multi-selection on mobile/touch screen devices. There is no CTRL key.

How does TelerikCalendar support mult-selection on those devices?

Thanks

Kan

This is driving me nuts.

I have tried the .clear() and I have tried re-init the object. Nothing seems to clear this from the UI that the user sees.

on the razor page:

<TelerikMultiSelect @ref="DDLFil1"
                                    Class="my-multiselect"
                                    Data="@DDLFil1List"
                                    TextField="Result"
                                    TItem="DDLList"
                                    ValueField="Result"
                                        TValue="string"

                                    Placeholder="Select the items you need"  
                                    AutoClose="false"
                                    Filterable="true"
                                    ClearButton="true"
                                    >
                    <MultiSelectSettings>
                        <MultiSelectPopupSettings Height="500px" />
                    </MultiSelectSettings>  
                    <HeaderTemplate>
                        <label style="padding: 4px 8px;">
                                <TelerikCheckBox TValue="bool" Value="@DDLFil1_IsAllSelected()" ValueChanged="@( (bool v) => DDLFil1_ToggleSelectAll(v) )"></TelerikCheckBox>
                            &nbsp;Select All
                        </label>
                    </HeaderTemplate>
                </TelerikMultiSelect>

In the CS behind the code page:

 public TelerikMultiSelect<DDLList, string> DDLFil1 { get; set; }  // Ctrl on the webpage
        private bool blnHideDDLFil1 { get; set; } = true;
        string DDLFil1Lbl = "";
        List<DDLList> DDLFil1List = new List<DDLList>();
        string? _DDLFil1SelectedId;
        string DDLFil1SelectedId
        {
            get
            {
                return _DDLFil1SelectedId;
            }
            set
            {
                _DDLFil1SelectedId = value;
            }
        }
        List<string> DDLFil1Values { get; set; } = new List<string>();
        List<string> DDLFil1Results { get; set; } = new List<string>();

Clearing code:

if (DDLFil1.Value != null)
                {
                    if (DDLFil1.Value.Count() > 0)
                    {  // Items have been selected!
                        DDLFil1.Value.Clear();
                    };               

                };

How does one Clear the selected items for the user to re-use without having them to unselect each item.

You have a ClearSelectAll Button on the Control. sometimes hard for the user to see it with multiple items selected.

Would be nice if i could call that in code!!!

DDLFil1.ClearSelectedAll();

I really need this feature.

Thanks

I have a DatePicker and a DateInput bound to the same nullable DateTime property (for behavior testing purposes).

<TelerikDateInput @bind-Value="@TestDate" />
<TelerikDatePicker @bind-Value="@TestDate" />

public DateTime? TestDate { get; set; } = null;

As it isn't a required field, the user can fill in the field and delete it afterwards (by selecting the full date and pressing the "Del" key). When this happens, the DateInput, in terms of layout behaves as if it has never been filled. On the other hand, the DatePicker shows a red border as if it was a required field that has yet to be filled in.

Is there any way to not show the red border when the DatePicker is cleared?

Hi, I am currently evaluating the Telerik Grid and I need to have, in my grid, a command column that stays sticked to the right of the grid no matter the width of the other elements. Note that I also allow resize of all columns (except the command column itself).

In other words, I would like for the white space in the attached picture to move from after the command column to between the rating and command columns.

Is that at all possible? Thanks.

Hi,

Within the Grid I use a custom filter row as it is shown at https://demos.telerik.com/blazor-ui/grid/custom-filter-row

Is there any way to filter a numeric column for lines with or without a value given? Normally this is available for string types.

Best regards,

Rayko

Hi,

I'm trying to create EditForm with child components inside it.

Child component has two drop down lists, that after selection should return single value.
You can see attached Component.razor and razor.cs with the code.

However, my EditForm throws me error regarding ValueExpression.

If I understand right, I can reference it to specific model property, but I have 2 dropdown menus and I dont hold value for any of them in my object? So how I should use it?

I'm currently trying to use it like this:

<Customs.UI.Shipments.Components.Common.LocodeComponent DateRequired="true" Title="Collection" Export="@(Shipment.Export)" @bind-CityId="Shipment.CollectionCityId" />

Last screenshot of it working absolutely fine outside EditForm..

Any help or guidance would be so much appreciated!