Unplanned
Last Updated: 10 Jul 2020 19:15 by ADMIN
Robert
Created on: 10 Jul 2020 15:48
Category: UI for Blazor
Type: Feature Request
1
Dropdowns and date/time pickers - open the dropdown on component focus

I would like to have a boolean flag like ExpandDropdownOnFocus which when set to true and the component is focused the dropdown will be expanded.

ADMIN EDIT: When voting, please add your comment on how you would like this to be implemented. At the moment, there are two ideas:

  • A parameter that, when set to true, will make the dropdowns shop up when the component receives focus - less code, but solves only one specific scenario
  • An OnFocus event plus an instance method that opens the dropdown - a little more code (handle an event, populate a reference, call its method) which will provide more functionality and flexibility as the event will let you know that focus happened and you can add more logic (calculations, change CSS classes,...)
1 comment
ADMIN
Marin Bratanov
Posted on: 10 Jul 2020 19:15

At the moment, you could use a workaround similar to the following code:

 

@inject IJSRuntime _js
@* The approach from https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events to capture focus *@

<span @onfocusin="@ExpandCombo">
    <TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
                     Placeholder="Select an item..." ClearButton="true" Filterable="true" Id="myCombo">
    </TelerikComboBox>
</span>

@code {
    async Task ExpandCombo()
    {
        await _js.InvokeVoidAsync("expandCombo", "myCombo");
    }

    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

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

    int selectedValue { get; set; } = 3; //usually the current value should come from the model data
}

 

 

    <script>
        // for the combo box we start from the input ID, and we walk the DOM to find the dropdown element to click it
        // for other components this may differ (the element you need to simulate a click on my be different)
        // and for some components it may be impossible at the moment due to their internal logic - like the AutoComplete that requires user input
        // you can also refactor this - e.g., pass an element reference from the wrapping element to traverse the DOM from it instead of an ID
        function expandCombo(elemId) {
            var elem = document.querySelector("#" + elemId);
            if (elem) {
                while (elem.parentNode != null && !elem.classList.contains("k-widget")) {
                    elem = elem.parentNode;
                }
                var dropdownArrow = elem.querySelector(".k-select");
                if (dropdownArrow && dropdownArrow.click) {
                    dropdownArrow.click();
                }
            }
        }
    </script>

 

Or something like this for a date picker

@inject IJSRuntime _js
@* The approach from https://docs.telerik.com/blazor-ui/knowledge-base/inputs-handle-keyboard-events to capture focus *@

<span @onfocusin="@ExpandPicker" @ref="@pickerWrapperRef">
    <TelerikDatePicker @bind-Value="@DatePickerValue"></TelerikDatePicker>
</span>

@code {
    ElementReference pickerWrapperRef { get; set; }
    async Task ExpandPicker()
    {
        await _js.InvokeVoidAsync("expandPicker", pickerWrapperRef);
    }

    DateTime DatePickerValue { get; set; } = DateTime.Now.AddDays(-5);
}

    <script>
        function expandPicker(wrapperElem) {
            var popupBtn = wrapperElem.querySelector(".k-select");
            if (popupBtn && popupBtn.click) {
                setTimeout(function () { 
                    popupBtn.click();
                }, 50);
            }
        }
    </script>

Regards,
Marin Bratanov
Progress Telerik