Hi,

The idea is to use the new way to present information to user (without specific label) but using the label of the components.

InTelerikTextBox, no matter, I have a Label property.

Is it possible to have the same properties for the other controls ?

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.

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);
}
}
}

---

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();
    }
}

---

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

In order to be able to easily work on mobile (tablet) and desktop browsers using touch it would be great if tree view supported multi select through a single click to select and click to unselect option without the need to hold down the ctrl key or anything like that

This can be worked around currently implementing a TreeView template and then the OnClick event to allow custom tracking of selected and unselected items but this feels like a common enough requirement for touch support that it would be great to support out of the box with the control

Would be nice to have a MapView for Blazor. Is this in the works?

---

ADMIN EDIT

In the meantime, you can use the Kendo Map widget in a fashion similar to this project.

---

In https://docs.telerik.com/blazor-ui/components/grid/manual-operations?_ga=2.192647914.1753502014.1641929648-330381368.1614276734

in the code section of Get Information From the DataSourceRequest you are using a @function instead of an @code.  Still works, but so 2019.

The second issue, typo in https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server readme, DataSourceRequet should be DataSourceRequest

See more details in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change and if the behavior and solution there do not fit your needs, leave your comments and ideas on how you want this exposed for configuration and what the desired behavior is. Also, make sure to Vote for this enhancement so we can gauge the public interest in it.

Incremental Search A grid that can be searched incrementally as one types in the search box.

On-demand Sort It should have the ability to do a toggle between ascending and descending sort order when the user taps on a column header.

Pagination It should provide customizable pagination so only one page worth of data is fetched at any given time.

Did I describe the jQuery Datatable functionality? It is because it is so good and having the equivalent of its server-side implementation equivalent in Blazor will be awesome.

Implementation Thoughts The control sends a predefined model to an event bound function as parameter. The model has the information like requested page, column-sort request, letters the user typed into the search box etc. The function fetches data based on the model and the grid updates dynamically.

Hi,

In most of my projects I use the ObjectGraphDataAnnotationsValidator component for validating complex types; and I also use a lot of your components. I've noticed what I *think* might be a clash between this validator and some of your input components. I've built a simple (and crude) example but I think it demonstrates the problem.


In the example code we have a table with 2 cells - in both cells we have an EditForm and 10 TelerikTextArea components. The first cell's EditForm contains a ObjectGraphDataAnnotationsValidator instance and the 2nd cell doesn't. Hopefully when you try to reproduce you will notice a distinct difference in performance with the performance of the 2nd EditForm being great, while the 1st EditForm is quite laggy and gets worse the more items you add.


I'm wondering if there is a clash here between the ObjectGraphDataAnnotationsValidator and the input components or I'm using them incorrectly?


Thanks
Michael.

@page "/"

<table width="100%">
    <tr>
        <td width="50%">
            <h3>EditForm with ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                <ObjectGraphDataAnnotationsValidator />
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
        <td width="50%">
            <h3>EditForm without ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
    </tr>
</table>

@code {
    protected List<DataItem> Items { get; set; }

    protected override void OnInitialized()
    {
        Items = new List<DataItem>();
        for (var i = 1; i <= 10; i++)
        {
            Items.Add(new DataItem { TextValue = $"This is item number {i}." });
        }
    }

    public class DataItem
    {
        public string TextValue { get; set; }
    }
}

I am implementing custom filtering by column in a data grid. The data source is very large so the filtering will be done by a stored procedure in the database. In order to avoid excessive calls to the procedure it would be great if the TextBox had a DebounceDelay property like the one in the SearchBox.

---

ADMIN EDIT

While not technically useful for the grid itself (see the bottom of this thread for more ideas and information on that, a built-in feature is coming there as well), there can be benefit in adding that to the inputs (e.g., the Editor has something like that already by default because it is designed for large content).

Thus, I am reopening this so we can gauge the interest.

In the meantime, using a few lines of application code can achieve debouncing of expensive api calls. Using the OnChange or OnBlur event may also be suitable workarounds, depending on the goal you are after.

---

Please make the source code available to people with paid licences.

---

ADMIN EDIT

The source code for UI for Blazor will become available. Click the Follow button on the upper left hand side to get a notification email when that happens, and click the Vote button to add your vote for it if you need it.

The current plan is to make the source code available to commercial license holders in November 2021.

---

Sometimes it is helpful to allow the user to pick colors for various purposes.

This control can display the RGB value along with allowing them to change the hue/brightness along with the alpha component.

Also the ability to select from a set of predefined colors would be very nice.

---

ADMIN EDIT

Here is a sample project that showcases how you can use Kendo widgets in Blazor and also contains samples of color pickers: https://github.com/telerik/blazor-ui/tree/master/common/kendo-in-blazor

---