Unplanned
Last Updated: 23 Jan 2021 10:03 by ADMIN
Created by: Darryl
Comments: 2
Category: UI for Blazor
Type: Feature Request
20

I know that I can bind the PageSize property to a variable, but then I have to build a dropdown with the available page sizes in a separate control. Are there plans to integrate a page size selection into the existing paging controls? Perhaps a PageSizes property that takes an array of integers.

Example:

PageSizes = "[10, 25, 50, 100]"

These would then be converted into a dropdown integrated into the existing paging controls on the grid.

Unplanned
Last Updated: 22 Jan 2021 13:29 by ADMIN
Created by: Alberto
Comments: 5
Category: Menu
Type: Feature Request
11

At the moment, when you click a menu item it does not hide.

A method can be exposed to hide the expanded items that can be invoked from the OnClick handler.

---

ADMIN EDIT

Here is a potential workaround - when the menu item is clicked, we use a little bit of JS to go over the menu items at the root and make the browser think that the user moved the mouse away from them which is the signal for the menu dropdowns to hide. Do test this carefully before using in production, though.

@inject IJSRuntime _js

@* Move this script together with other scripts in the project, it is here to make the snippet shorter *@
<script suppress-error="BL9992">
    function closeMenu() {
        setTimeout(function () {
            var mouseLeaveEvent = new Event('mouseleave');
            var rootNodes = document.querySelectorAll("li.k-menu-item");
            rootNodes.forEach(function (elem) { elem.dispatchEvent(mouseLeaveEvent); })
        }, 30);
    }
</script>

<TelerikMenu Data="@MenuItems"
                ItemsField="@nameof(MenuItem.SubSectionList)"
                TextField="@nameof(MenuItem.Section)"
                UrlField="@nameof(MenuItem.Page)"
                OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    async Task OnClickHandler(MenuItem item)
    {
        await _js.InvokeVoidAsync("closeMenu");
    }



    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
                {

            new MenuItem()
            {
                Section = "fetchdata",
                Page = "fetchdata"

            },
            new MenuItem()
            {
                Section = "counter",
                Page = "counter"
            },

// sample URLs for SPA navigation
new MenuItem()
{
    Section = "Company",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Overview",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Events",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Careers",
            Page = "counter"
        }
    }
},
// sample URLs for external navigation
new MenuItem()
{
    Section = "Services",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Consulting",
            Page = "counter"
        },
        new MenuItem()
        {
            Section = "Education",
            Page = "fetchdata"
        }
    }
},
new MenuItem()
{
    Section = "Contact",
    Page = "counter"
}
};

        base.OnInitialized();
    }
}

---

Unplanned
Last Updated: 21 Jan 2021 14:15 by ADMIN

First, let me thank you for adding the Width in the latest update (2.21). Much appreciated! 

https://www.w3schools.com/tags/tag_textarea.asp

 

We need a fixed height for our text areas to encourage user-interaction and ease the UX for the end user. Having (now a wide), but very narrow description field is not ideal and since it's basically a feature of HTML5, I don't see why it be exempt from Blazor UI.

<TelerikTextArea Rows="10" Width="100%" />

 

 

 

Unplanned
Last Updated: 21 Jan 2021 12:40 by ADMIN
Created by: Datafyer
Comments: 15
Category: UI for Blazor
Type: Feature Request
26

Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

  • Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
  • Fluent UI - based on the Fluent UI by Microsoft
  • Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
  • Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

 

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

Unplanned
Last Updated: 20 Jan 2021 12:59 by Giuseppe
Created by: Tyler
Comments: 1
Category: Tooltip
Type: Feature Request
6

I would like to be able to do something like the following - cause the tooltip to close from my code:

<TelerikTooltip TargetSelector="#tooltip1" ShowOn="@TooltipShowEvent.Click" @ref="@TooltipRef">     
            <Template>
                 Content Here
                <button type="button" class="btn btn-primary" @onclick="tipClose">Save</button>                
            </Template>
</TelerikTooltip>

<a href="#" id="tooltip1" class="btn btn-secondary">open</a>

@code{
 Telerik.Blazor.Components.TelerikTooltip TooltipRef { get; set; }

void tipClose()
    {
       // TooltipRef ?
    }


}

Unplanned
Last Updated: 20 Jan 2021 09:44 by ADMIN
Created by: Al
Comments: 2
Category: Scheduler
Type: Feature Request
1
I would like to click on a schedule item and be able to open a linked page or item. For instance if the schedule item Title is a File # I would like to be able to click on that item and go to a file # details page. Is that possible? 
Unplanned
Last Updated: 20 Jan 2021 09:34 by ADMIN
Created by: Durga
Comments: 3
Category: Scheduler
Type: Feature Request
14

I have a requirement to design our own custom add/edit template form for scheduler control.

I looked at  custom edit form example and found very helpful, However this example does not demonstrate how to use RecurrenceEditor and use them in custom template.

Unplanned
Last Updated: 18 Jan 2021 12:04 by ADMIN

I'm in the same situation as the OP in this post: https://www.telerik.com/forums/how-do-you-always-edit-series-when-editing-a-recurring-appointment


In my case, I'm working with with the Blazor Scheduler Component. How can I disable the prompt and automatically select "Edit the series"? Or at least "disable" the "Edit this occurrence" button when updating/deleting an appointment? 

---

ADMIN EDIT

Please comment with suggestions on how you would like to see this feature exposed. Ideally it might have to be dynamic so you can toggle it based on conditions, so perhaps it could be a parameter (not flexible), an event argument to OnEdit, or a separate event/setting.

Here is a sample code you can try to achieve this - comments in the code explain how the templates are used to capture the edit action and some JS is used to fake-click the button to simulate a user choice:

 

@inject IJSRuntime _jsInterop
@* this errors suppression is a hack to make this sample succinct
    move this script to a proper place for a real app*@
<script suppress-error="BL9992">
    function clickSchedulerPromptButton(btnIndex) {
        setTimeout(function () {
            var buttons = document.querySelectorAll(".k-dialog-content .text-right button");
            if (buttons && buttons.length >= btnIndex) {
                var chosenButton = buttons[btnIndex];
                chosenButton.click();
            }
        }, 50);
    }
</script>

@* appearance setting for the template - make the custom template tall as the appointment to capture all clicks *@
<style>
    .tallAppt {
        height: 100%;
    }
</style>

<TelerikScheduler Data="@Appointments"
                  OnUpdate="@UpdateAppointment"
                  OnCreate="@AddAppointment"
                  OnDelete="@DeleteAppointment"
                  AllowCreate="true" AllowDelete="true" AllowUpdate="true"
                  @bind-Date="@StartDate" Height="600px" @bind-View="@CurrView">
    <ItemTemplate>
        @{
            SchedulerAppointment appt = context as SchedulerAppointment;
        }
        <div title="@appt.Start - @appt.End" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
    </ItemTemplate>
    <AllDayItemTemplate>
        @{
            SchedulerAppointment appt = context as SchedulerAppointment;
        }
        <div title="@appt.Start.ToShortDateString() - @appt.Title" class="tallAppt" @ondblclick="@( () => ChooseEditMode(appt) )"><div class="k-event-template">@appt.Title</div></div>
    </AllDayItemTemplate>
    <SchedulerViews>
        <SchedulerDayView StartTime="@DayStart" />
        <SchedulerWeekView StartTime="@DayStart" />
        <SchedulerMultiDayView StartTime="@DayStart" NumberOfDays="10" />
    </SchedulerViews>
</TelerikScheduler>

@code {
    //async void so we don't block the execution
    //we will have a small timeout in the script to let it wait for the popup
    async void ChooseEditMode(SchedulerAppointment appt)
    {
        // check if we have a recurring appointment or a member of one
        if (appt.RecurrenceId != null || !string.IsNullOrEmpty(appt.RecurrenceRule))
        {
            int btnIndexToClick = 0;//the first button - edit instance
                                    // make it 1 for the second button - the series

            await _jsInterop.InvokeVoidAsync("clickSchedulerPromptButton", btnIndexToClick);
        }

    }

    //the rest is sample data and sample CUD operations handling



    // sample data and scheduler settings
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
    public DateTime StartDate { get; set; } = new DateTime(2019, 12, 2);
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0); //the time portion is important

    List<SchedulerAppointment> Appointments { get; set; }

    async Task UpdateAppointment(SchedulerUpdateEventArgs args)
    {
        SchedulerAppointment item = (SchedulerAppointment)args.Item;

        await MyService.Update(item);
        await GetSchedulerData();
    }

    async Task AddAppointment(SchedulerCreateEventArgs args)
    {
        SchedulerAppointment item = args.Item as SchedulerAppointment;

        await MyService.Create(item);
        await GetSchedulerData();
    }

    async Task DeleteAppointment(SchedulerDeleteEventArgs args)
    {
        SchedulerAppointment item = (SchedulerAppointment)args.Item;

        await MyService.Delete(item);
        await GetSchedulerData();
    }






    public class SchedulerAppointment
    {
        public Guid Id { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public List<DateTime> RecurrenceExceptions { get; set; }
        public Guid? RecurrenceId { get; set; }

        public SchedulerAppointment()
        {
            Id = Guid.NewGuid();
        }
    }

    async Task GetSchedulerData()
    {
        Appointments = await MyService.Read();
    }

    protected override async Task OnInitializedAsync()
    {
        await GetSchedulerData();
    }

    // the following static class mimics an actual data service that handles the actual data source
    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
    public static class MyService
    {
        private static List<SchedulerAppointment> _data { get; set; } = new List<SchedulerAppointment>()
{
            new SchedulerAppointment
            {
                Title = "Board meeting",
                Description = "Q4 is coming to a close, review the details.",
                Start = new DateTime(2019, 12, 5, 10, 00, 0),
                End = new DateTime(2019, 12, 5, 11, 30, 0)
            },

            new SchedulerAppointment
            {
                Title = "Vet visit",
                Description = "The cat needs vaccinations and her teeth checked.",
                Start = new DateTime(2019, 12, 2, 11, 30, 0),
                End = new DateTime(2019, 12, 2, 12, 0, 0)
            },

            new SchedulerAppointment
            {
                Title = "Planning meeting",
                Description = "Kick off the new project.",
                Start = new DateTime(2019, 12, 6, 9, 30, 0),
                End = new DateTime(2019, 12, 6, 12, 45, 0)
            },

            new SchedulerAppointment
            {
                Title = "Trip to Hawaii",
                Description = "An unforgettable holiday!",
                IsAllDay = true,
                Start = new DateTime(2019, 11, 27),
                End = new DateTime(2019, 12, 05)
            },

            new SchedulerAppointment
            {
                Title = "Morning run",
                Description = "Some time to clear the head and exercise.",
                Start = new DateTime(2019, 11, 27, 9, 0, 0),
                End = new DateTime(2019, 11, 27, 9, 30, 0),
                RecurrenceRule = "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR"
            }
        };

        public static async Task Create(SchedulerAppointment itemToInsert)
        {
            itemToInsert.Id = Guid.NewGuid();
            _data.Insert(0, itemToInsert);
        }

        public static async Task<List<SchedulerAppointment>> Read()
        {
            return await Task.FromResult(_data);
        }

        public static async Task Update(SchedulerAppointment itemToUpdate)
        {
            var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
            if (index != -1)
            {
                _data[index] = itemToUpdate;
            }
        }

        public static async Task Delete(SchedulerAppointment itemToDelete)
        {
            if (itemToDelete.RecurrenceId != null)
            {
                // a recurrence exception was deleted, you may want to update
                // the rest of the data source - find an item where theItem.Id == itemToDelete.RecurrenceId
                // and remove the current exception date from the list of its RecurrenceExceptions
            }

            if (!string.IsNullOrEmpty(itemToDelete.RecurrenceRule) && itemToDelete.RecurrenceExceptions?.Count > 0)
            {
                // a recurring appointment was deleted that had exceptions, you may want to
                // delete or update any exceptions from the data source - look for
                // items where theItem.RecurrenceId == itemToDelete.Id
            }

            _data.Remove(itemToDelete);
        }
    }
}

 

---

Unplanned
Last Updated: 14 Jan 2021 14:52 by ADMIN
Created by: Grinden
Comments: 0
Category: UI for Blazor
Type: Feature Request
1
Like the Kendo UI one, please.
Unplanned
Last Updated: 13 Jan 2021 10:30 by SturmA
Created by: Peter
Comments: 1
Category: UI for Blazor
Type: Feature Request
20
Please make the source code available to people with paid licences.
Unplanned
Last Updated: 11 Jan 2021 17:39 by ADMIN
Created by: Wei
Comments: 0
Category: DropDownList
Type: Feature Request
4
I would like a boolean AutoWidth parameter that controls the width of the popup element of the dropdown and adjust its width based on the data. 
Unplanned
Last Updated: 11 Jan 2021 13:05 by ADMIN
Created by: Philip
Comments: 1
Category: TreeView
Type: Feature Request
1

Currently there does not appear to be a way to provide validation of the drag & drop action prior to the OnDrop hook. The result is that the user experience looks as if they are able to drag and drop nodes to places where they should not be able to based on custom logic. It appears there is some logic behind the scenes that provide an icon during the hover of the drag and drop action but the logic determining this icon is not extendable to my knowledge. What I'd like to be able to do is override or extend the logic determines on hover UI feedback of the drag and drop action.  Specifically, for my case, I would like to be able to validate with business logic if the drag and drop action is allowed prior to the OnDrop so invalid actions look something like the below picture. This picture from your demo site shows the feedback provided when you try to drag and drop a node onto itself. It shows a clear icon that suggest the action is not allowed but as I mentioned the logic to produce this result does not appear to be extensible.

 

Unplanned
Last Updated: 11 Jan 2021 13:04 by ADMIN
Created by: Philip
Comments: 0
Category: TreeView
Type: Feature Request
1
I would like to have an event that fires when the Drag operation starts. 
Unplanned
Last Updated: 07 Jan 2021 19:46 by ADMIN
Created by: Jason
Comments: 0
Category: MaskedTextBox
Type: Feature Request
1
I would like to prevent the user from entering certain characters. At the moment, the closest feature is using validation to inform them of invalid input after the fact, but I'd like to prevent them from inputting it in the first place. Being able to define my own rules like in React (see the second example here) would be nice.
Unplanned
Last Updated: 06 Jan 2021 18:58 by ADMIN
Created by: Naveed
Comments: 1
Category: MultiSelect
Type: Feature Request
6

Like https://docs.telerik.com/blazor-ui/components/combobox/custom-value and https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/ so the user can input tags on their own without them being in the app data source.

---

ADMIN EDIT

The following sample may be useful in implementing this in the meantime: https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item

---

Unplanned
Last Updated: 04 Jan 2021 08:29 by ADMIN
Created by: Srdjan
Comments: 1
Category: UI for Blazor
Type: Feature Request
2

Greetings!

 

Since the focus events are natively supported by blazor, could they be implemented in the input controls? Workarounds via JS are possible but they create a lot of redundant and cluttered code around the code base. OnChange/ValueChange only fire when the value has changed. Though, we have a lot of scenarios where we need the focus events when a value did not change.

Unplanned
Last Updated: 30 Dec 2020 09:19 by Giuseppe

I want to have an option to prevent tooltips from closing and having multiple tooltips attached to different elements, all visible simultaneously/independently.

 

 

Unplanned
Last Updated: 24 Dec 2020 10:04 by ADMIN
Created by: JeffSM
Comments: 4
Category: Menu
Type: Feature Request
11

Dear,

 

the blazor menu UI adapt it self for hamburguer menu when mobile?

best,

 

Jeff

---

ADMIN EDIT

I have attached to this post a sample implementation that you can use as base. Another option is to add more conditional markup to remove the menu altogether and replace it with another structure for small screens. A third option is to use the Drawer component as it collapses anyway (see here and here).

----

Unplanned
Last Updated: 23 Dec 2020 15:06 by ADMIN

I localize the names of my columns in the models. This works for the root-level model I bind to the grid, but using nested (navigation) properties does not let them pick up the title.

---

ADMIN EDIT

A sample project is attached that showcases the localization of the displayname attribute, and how that works for the main model. Since it does not work for the nested models, a small helper method to extract the required resource manually is added to the Title parameter of such a column.

---

Unplanned
Last Updated: 23 Dec 2020 10:00 by ADMIN
Created by: Alexandre
Comments: 12
Category: Grid
Type: Feature Request
18
Sometimes, we just want a simple equal filter in grid, without operators options
1 2 3 4 5 6