Create a general purpose component to allow dragging and dropping of other components or files from the filesystem. Expose events that let us get access to the files that were dropped so that we can access the contents of those files or send them off to be uploaded.

Currently in Blazor we can do this with the InputFile component. But I would like the ability to create a droppable UI and have any kind of child content in it. And also get at the file content of files dropped.

Hi,

is it possible to add control of vertical timeline like this (https://antblazor.com/en-US/components/timeline) with extra features like:

• adding new items with button on top
• inline edit
• item selection
• item actions

I also attached image of what i build based on control from link above, I would like to implement something similar with Telerik.

Maybe you can recommend some other controls to replace it with?

Thank you :)

Maybe I'm doing it wrong...

I have a Telerik Window that is modal=true

Within the Telerik Window, I have a component... and within that component, other components.

I want to post a TelerikDialog.  "Do you want to save changes?"

If I add it to the component, it appears behind the main modal.

If I add it to the main Telerik Window, it doesn't appear at all.

How do you show a TelerikDialog on a TelerikWindow that is modal?

-Bert

Hello,

first of all, thank you for relelasing Dialog, it is what we are "simulating" by modal Window on any kind of heavy data editing app,again and again and again :) .

The problem is,
- when you put DropDownList in Dialog, using OnRead async task event, the UI is still "empty". => Iam fiddled with reassigning datasource, changing order of assigning source, nothing helped.
- same dropdownlist scenario inside window, working/displayed as expected.

Steps to reproduce:
1) click on then button to show window by -> async task
2) event OnRead of the dropdownlist is correctly called, data to the IEnumerable<model> is loaded
3) window appear, but DropDownList is empty
4) when you filter by typeing inside DropDownList, OnRead is called and model populated, but GUI is still empty

What doesnt worked:
- statechaned, reassign datasource, clear datasource, task delay

What partially worked:
- OnRead=> async Task changed to just: OnRead=> Task

Thanks for info what should be made done else.

Stripped sample:
<TelerikButton @onclick="@(() => ParamEd(4444, null))">open window or dialog</TelerikButton>
<TelerikWindow Modal="true" @bind-Visible="@ShowEditWindow" Draggable="true">
<WindowTitle>
<strong>@ShowEditWindowCaption</strong>
</WindowTitle>
<WindowContent>

<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
vs
<TelerikDialog @bind -Visible="@ShowEditWindow" Title="@ShowEditWindowCaption" CloseOnOverlayClick="false">
<DialogContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
@code{

//clicked on the button to show window/dialog:
async Task ParamEd(int xtyp, object it)
{
await Task.Delay(500);//await load captions... and THEN open window:
ShowEditWindowCaption = "window title";
ShowEditWindow = true;
}

async Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = await readDBDATA...
//CurrentEdit.ComboSource = new List<EdBase>();
//CurrentEdit.ComboSource = null;
//CurrentEdit.ComboSource = new IEnumerable<EdBase>(r);
//CurrentEdit.ComboSource = await ReadDBDATA
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");

/*
//!! HOTFIX FROM ANOTHER BUG(show selected data) - ReAssign data(but id doesnt impact result):
string v = CurrentEdit.ValTxt;
int? i= CurrentEdit.ValInt;
CurrentEdit.ValTxt = string.Empty;
CurrentEdit.ValInt = null;
StateHasChanged();
//await InvokeAsync(() => StateHasChanged());
CurrentEdit.ValTxt = v;
CurrentEdit.ValInt = i;

//CurrentEdit.ValTxt = CurrentEdit.ValTxt;
//StateHasChanged();
*/
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}

//PARTIALLY WORKING, but not filtering:
Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = readDBDATA...
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
}

This might not be considered a bug but since this behavior changed when we upgraded to 3.0, it might be considered as such unless there is no documentation about this (we have not been able to find it). I am still unsure where we are to just ask support questions, as the feedback portal seem to force us into either choosing feature or bug. 

After upgrading to Telerik Blazor 3.0, the captions are suddenly above the fields and no longer to the left of them. This might be preferable in some cases, but it should then be something you enable/change yourself.

How can we control this behavior (probably via CSS)?

Is it perhaps a way we can also control so that the grids popup form gets more compact, like perhaps displaying the fields in two columns instead of the default of just one?

Thanks. 

---

ADMIN EDIT

The following should let the multiselect render above the custom yellow element, but it does not. A workaround is available as the second CSS snippet that you can uncomment.

<style>
    /*should work but does not*/
    .high-zindex {
        z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
    }

    /*workaround*/
    .k-animation-container {
        z-index: 15000;
    }
</style>

<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
    <TelerikMultiSelect Data="@Countries"
                        @bind-Value="@Values"
                        Placeholder="Enter Balkan country, e.g., Bulgaria"
                        ClearButton="true" AutoClose="false"
                        PopupClass="high-zindex">
    </TelerikMultiSelect>
</div>

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}

---

Hi Telerik,

I have been using MudBlazor for my latest project (smaller one), but we are scaling up for another larger project now and are looking at the Telerik UI for Blazor.

Does Telerik UI for Blazor have an equivalent to the MudBlazor AppBar, an application wide top bar which is persistent through out the application life cycle?

Its able to contain other controls ie drawer icon, login/out button, spacers etc.

PS: See attached screen dump of the app bar.

Best regards

Ulrik

Dear Telerik!

As a developer I am very pleased with the UI components that you are providing for .NET Blazor systems.

Even though, we often update the datasource of an autocomplete field (e.g.: TelerikMultiSelect) using an HTTP request. And invoking this endpoint on every new character is not the most economic approach. We did some workaround with timers and etc. but this way the code become needlessly complicated and introduced new bugs also.

Please consider creating a component or enabling the existing ones with an event that is fired on every input changes. But it waits a little time after the last input change and keeps collecting the additional characters so the event can present batches of inputs.

Kind regards,

Balázs Koncz 

Is it possible to add to the carousel a thumbnail scrollable navigation below the "page/image"?  I'm thinking this would be a nice addition, which would allow independent scrolling from that of the current page and also be clickable in the same way that the dots are in order to jump to the selected page.

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

The knowledge base article is now live - "Carousel Thumbnail Scrollable Navigation".

Thanks,

James

Blazor first steps bug in documentation, Primary="true" gives an error.

https://docs.telerik.com/blazor-ui/getting-started/server-blazor

Step 3 - Add a Telerik Component to a View

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>

Primary = "true" gives an error with version 3, sb different for .net 6 and use ThemeColor

PopupHeight is no longer a valid property.

DatePicker shows format string when no value is selected. If you have a form a DatePicker bound to a nullable DateTime, it will show the formatting string when no value is selected, instead of just showing an empty box.  This is very confusing to the end user compared to just an empty box. We have not found a way to change this.