Declined
Last Updated: 02 Jan 2020 16:31 by ADMIN
Sten
Created on: 12 Nov 2019 09:37
Category: UI for Blazor
Type: Bug Report
0
Placeholder text for ComboBox does not work properly

I have a TelerikComboBox in an EditorTemplate within a Grid. Code looks like this:


                   <TelerikComboBox Data="@CustomerPayCodes"
                                                     @bind-Value="@PayItemMapInEdit.ClientPayCode.UniqueId"
                                                     Placeholder="Select..."
                                                     Filterable="true"
                                                     TextField="PayCodeDisplayName"
                                                     ValueField="UniqueId"
                                                     @ref="_clientPayCodeComboBox"
                                                     Width="auto"
                                                     Enabled="@(string.IsNullOrEmpty(_payItemTextBoxRef?.Value))">
                                    </TelerikComboBox>

 

Where reference prop looks like this:

 

    private TelerikComboBox<PayCode, Guid> _clientPayCodeComboBox;

 

When adding a new row, the Placeholder text becomes the empty GUID, until I click in the box and then outside, upon it changes to correct "Select...". The GUID is never supposed to be showed at all in the box, that is only the binded value.

 

See attached pictures.

 

Please advice.

 

Br,

Sten

4 comments
ADMIN
Marin Bratanov
Posted on: 02 Jan 2020 16:31

Hi Ion,

Thank you for your feedback. I also think that chronological order for all posts in the thread would be better, instead of the current reverse order for all posts but the first one. I have raised this with our management so this UX can be reviewed and hopefully improved.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Ion
Posted on: 02 Jan 2020 14:04

@Marin,

Sorry for completely-out-of-topic comment: all those support threads are not chronologically sorted, so it is difficult to follow the discussions (especially those with many comments). Can you solve the inconvenience?

Thanks!

Ion

ADMIN
Marin Bratanov
Posted on: 27 Nov 2019 19:29

It has been a couple of weeks without further information on this case and so I am closing it. If new information becomes available, we can reopen it.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 12 Nov 2019 12:49

Hello Sten,

The default value of a GUID is an empty guid (all zeroes) and not null, which makes it likely that the Value of the combo in the new row is not null. To show the placeholder, there must be no value (null). So, something has to invoke a change so that the Value becomes null or 0 or something that will show the placeholder (the exact value depends on the model definitions).

That said, here's an example I made based off on the provided snippet and it seems to show the placeholder properly for me when adding a new item (a short video from my tests is attached below so you can confirm if I am missing something) - the critical bit is that the field in the grid data model is nullable so a new item will have a null Value, and not a new Guid() value like the data I seed in OnInitialized:

 

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px" OnUpdate="@UpdateHandler" OnCreate="@CreateHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Role) Title="Position" Width="400px">
            <EditorTemplate>
                @{
                    CurrentlyEditedEmployee = context as SampleData;
                    <TelerikComboBox Placeholder="Select..." Data="@myDdlData" @bind-Value="@CurrentlyEditedEmployee.Role"
                                     TextField="MyTextField" ValueField="MyValueField" Filterable="true"
                                     @ref="@_clientPayCodeComboBox"
                                     Enabled="@( CurrentlyEditedEmployee.Name != "name 2" )">@* Some sample condition to disable one combo *@
                    </TelerikComboBox>
                }
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = new Guid() // intentionally all zeroes so we can easily see the edited items
            });
        }
    }

    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public Guid? Role { get; set; }
    }

    public List<SampleData> MyData { get; set; }

    public class MyDdlModel
    {
        public Guid? MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

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

    private TelerikComboBox<MyDdlModel, Guid?> _clientPayCodeComboBox;

    //sample data handling follows, should not be relevant to this example

    public SampleData CurrentlyEditedEmployee { get; set; }

    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

    public void CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        item.ID = MyData.Count + 1;

        MyData.Insert(0, item);
    }
}

 

Could you try comparing against this to see if this helps you resolve the issue? If not, can you modify this sample to showcase the problem?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor