Questions on UI for Blazor Forum

1 answer

12 views

How to set the Telerik ListView to horizontal

I have been searching thru the forum and online and cannot figure out how to set the TelerikListView component to display the items in the itemtemplate horizontally. I see there is a ListViewSettings but I can't find any documenation on what to put into the settings.

ListView

answered on 19 Apr 2024

1 answer

18 views

ListView PageSize translation not working

Hi everyone

When using a translated ListView, the page size selector behaves weird.

When the dropdown is opened, the correct text ("Alle") gets displayed. But when the dropdown is closed, the english text is shown,

Any ideas?

Thanks alot and have a nice day

ListView

answered on 07 Mar 2024

1 answer

17 views

Blazor ListView CRUD operations - OnAdd

Hi,

I couldn't find OnAdd event for Blazor Listview component CRUD operations(like the one available for Grid) .

I would like to initialize certain properties of the model when 'Add' button is clicked, is there any other workaround?

Thanks,

Deepa

ListView

answered on 14 Feb 2024

1 answer

63 views

IAsyncEnumerable Support for Telerik Data Source Response

In .NET 8, Microsoft will be introducing support for IAsyncEnumerable JSON deserialization (Streaming deserialization APIs). This feature allows for items in a long list to be deserialized as they are streamed to the client from a server, rather than waiting for the entire request to be completed. So it will result in a perceived performance increase. Is there any chance for Progress to look into bringing support for this feature to Telerik Data Source Responses? I can anticipate the data field in the response class makes this a challenging ask. Also, the server-side needs to be able to return yield for async items. I am interested in seeing this feature implemented so the grids in my applications that have many items will begin to be usable sooner.

answered on 19 Sep 2023

0 answers

51 views

ListView Blazor paging closes dialog

I have a ListView with paging, it's in the editortemplate in a gridview. the column is defined as:

            <GridColumn Field="Operators" FieldType="@(typeof(int))" Title="Operators" Width="5rem" Visible="true" ShowColumnChooser="true" ShowColumnMenu="true" Lockable="false" Filterable="true" Editable="true">
                <EditorTemplate>
                   <TelerikListView Data=@AssignedOperators
                             Pageable="true"
                             PageSize="5" 
                             Context="operators" >
                        <HeaderTemplate>
                            Operators
                        </HeaderTemplate>
                        <Template>
                            <div class="k-card k-card-horizontal">
                                <div class="k-vbox k-flex-grow">
                                    <div class="k-card-body">
                                                <h4 class="k-card-title">@(operators.FirstName + " " + operators.LastName)</h4>
                                                <h5 class="k-card-subtitle">@operators.CompanyName</h5>
                                        @* <div class="card-date">@context.Date.ToString("MMM dd yyyy")</div> *@
                                    </div>
                                    <div class="k-card-actions k-actions-horizontal k-actions-start">
                                        <ListViewCommandButton OnClick="@RemoveOperator" Enabled="true" FillMode="@(ThemeConstants.Button.FillMode.Outline)">Remove</ListViewCommandButton>
                                    </div>
                                </div>
                                @* <img class="k-card-image" src="images/articles/@context.ImageUrl" alt="@context.Subtitle" /> *@
                            </div>
                        </Template>
                    </TelerikListView>
                </EditorTemplate>
            </GridColumn>

It works well, except for the paging part. When I click on page 2 button, the dialog closes. So I guess the paging buttons are of type submit and not button. How can I prevent the dialog from getting closed when paging?

Editor

Grid

ListView

asked on 03 Jul 2023

1 answer

54 views

How to get reference to TelerikListView item during a TelerikTextBox ValueChanged call back?

Blazor .Net 7

I have the following TelerikListView. When the user changes the TelerikTextBox Cidr value I want to handle the ValueChanged event however when I do this, I need to update the underlying model object manually. I am stuck. When the TelerikListView is in edit mode, either for a new element or for an existing element I can't figureout how to reference the element correctly in the ValueChanged event handler. I know I need to update the model manually but I am not sure how. Any hints?

<TelerikListView Data="@SubnetList" Width="700px" Pageable="true"

                 OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler"
                 OnEdit="@EditHandler" OnCancel="@CancelHandler">
    <HeaderTemplate>
        <h2>Subnet List</h2>
        <ListViewCommandButton Command="Add" Icon="@FontIcon.Plus">Add Subnet</ListViewCommandButton>
    </HeaderTemplate>
    <Template>
        <div class="listview-item">
            <h4>@context.Cidr</h4>
            <ListViewCommandButton Command="Edit" Icon="@FontIcon.Pencil">Edit</ListViewCommandButton>
            <ListViewCommandButton Command="Delete" Icon="@FontIcon.Trash">Delete</ListViewCommandButton>
        </div>
    </Template>
    <EditTemplate>
        <div style="border: 1px solid green; margin: 10px; padding: 10px; display: inline-block;">
            <TelerikFloatingLabel Text="CIDR">
                <TelerikTextBox Id="Cidr" ValueChanged="@CidrValueChangedHandler" />
            </TelerikFloatingLabel><br />
            <ListViewCommandButton Command="Save" Icon="@FontIcon.Save">Save</ListViewCommandButton>
            <ListViewCommandButton Command="Cancel" Icon="@FontIcon.Cancel">Cancel</ListViewCommandButton>
        </div>
    </EditTemplate>
</TelerikListView>
@code {
    private List<Models.Subnet> SubnetList = new List<Models.Subnet>();

    protected override async Task OnInitializedAsync() 
        => SubnetList = await SubnetService.GetAllAsync();

    private void CidrValueChangedHandler(string theUserInput)
    {
        // manually update the model here 

        // calculate subnet properties here to help the user select size the subnet
        // correctly by selecting the number of bits in the network side of the mask
        //    # number of hosts, etc.
    }

    async Task GetListViewData()
        => SubnetList = await SubnetService.GetAllAsync();
}

ListView

TextBox

answered on 16 Jun 2023

1 answer

307 views

Dynamically add/remove items from form

I would like to add a UI component that displays the current list of items that are selected in a multi-select listbox. As selections and deselections are made inside of the list box, those selections are also displayed or removed on a separate part of the page that is visible to the user.

Is there a demo available that shows doing something like this or is there a control that already implements this capability?

Thanks,

T

ListView

MultiSelect

answered on 21 Apr 2023

0 answers

67 views

Inquiry on Implementing Virtualization with Continuous Scroll with Teleriklistview

Dear Telerik Support Team,

I am a licensed customer from AVEVA and I am reaching out to inquire about how to implement virtualization with continuous scroll in Telerik UI for Blazor using C#. I am specifically interested in the TelerikListView component and would like to implement this feature to improve the performance of my application.

I have already looked through the documentation and examples on your website, but I couldn't find any information on how to achieve virtualization with continuous scroll.

As a valued customer, I would greatly appreciate it if you could provide some guidance or examples on how to implement virtualization with continuous scroll in Telerik UI for Blazor.

Thank you very much for your help in advance.

Best regards,

Anil Kumar Dasari

ListView

asked on 17 Mar 2023

1 answer

508 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

0 answers

72 views

How do I achieve using Tile Layout to display preexisting data/ list items that can reorder?

Right now, each tile can be created in each Content and TilelLayoutItem tag. The way my current list works is to use the TileLayout inside of a TelerikListView component using my list as the data. Like this:

<TelerikListView Data=@Data
Pageable="true"
PageSize="int.MaxValue">
<Template>

<TelerikTileLayout Columns="1"
Reorderable="true"
Resizable="false"
RowHeight="180px">

<TileLayoutItems>
<TileLayoutItem HeaderText="Descriptors">
<Content>@context.Description</Content>
</TileLayoutItem>

</TileLayoutItems>
</TelerikTileLayout>
</Template>
</TelerikListView>

It shows each item from the list in a new tile as expected, but the problem with this is that since I put it in just one Content/TileLayout tag, each tile somehow counts as one tile, so the Reorderable feature doesn't work. You can test this by adding a another Content tag. The contents of the second tag will only be able to swap with the contents of the first tag, but the contents of the first tag still won't be able to swap with each other. Does the same thing if you use a foreach loop to display the list data as well.

How do I achieve using Tile Layout to display preexisting data/ list items that can reorder? Or how can I reorder the tiles while using a foreach loop?

ListView

TileLayout