Telerik Forums
UI for Blazor Forum
1 answer
181 views

We recently made the update from version 2.* to 3.1.0 and then 3.2.0. I'm unsure when and where the change occurred but we are now having problems with the items visual display.

Previously, we had 2 ToolBarTemplateItem's setup like so:


<TelerikToolBar Class="toolbar-size">

                        <ToolBarTemplateItem>
                            <TelerikMultiSelect 
                                    Class="font-size-12 ml-5 bg-light-transparent h-auto"
                                    Data="@Data"     
                                    Value="@ChosenModelNames"
                                    TextField="@nameof(TreeView.Text)"
                                    ValueField="@nameof(TreeView.Id)"
                                    Placeholder="Select Data"
                                    ValueChanged="@((List<string> args) => ChosenModelsChanged(args))"
                                    Width="auto"
                                    ItemHeight="25"
                                    FillMode="@ThemeConstants.DropDownList.FillMode.Outline"
                                    Rounded="@ThemeConstants.DropDownList.Rounded.Small"
                                    Size="@ThemeConstants.DropDownList.Size.Large"
                                    >
                                    <ItemTemplate>
                                        @{
                                            var ctx = context as TreeView;
                                        }
                                        @ctx.DisplayName @ctx.Name
                                    </ItemTemplate>
                            </TelerikMultiSelect>
                        </ToolBarTemplateItem>

                        <ToolBarTemplateItem>
                            <div class="mt-4 ml-2 w-100">
                            <TelerikRangeSlider 
                                    @bind-StartValue="@StartValue"
                                    @bind-EndValue="@EndValue"
                                    Min="0"
                                    Max="25"
                                    SmallStep="@SmallStep"
                                    LargeStep="@LargeStep"
                                    Width="95%" 
                                    OnChange="@(args => TimeUpdateHandler())"
                                    TickPosition="@SliderTickPosition.Before">
                                    <LabelTemplate>
                                        <div class="time-slider-text">
                                            @(GetRangeDate(context).ToString("htt"))
                                        </div>
                                </LabelTemplate>
                            </TelerikRangeSlider>
                            </div>

                        </ToolBarTemplateItem>

                    </TelerikToolBar>
This now adds div elements to the dom that I don't believe were there before. I then attempted to use <ToolBarTemplateItem Class="myClass"> but the class doesn't actually go into that div or anywhere else that I can see.
Hristian Stefanov
Telerik team
 answered on 26 Apr 2022
1 answer
1.1K+ views
I specifically need the functionality of selecting a group of cells in a grid and pasting them to another part of the grid. This is not possible in your grids, but I see it would work in spreadsheet components you have in other sets of controls. But the Blazor set of controls does not have this component yet - is it planned?
Marin Bratanov
Telerik team
 answered on 25 Apr 2022
1 answer
300 views
is there a way to hide a group footer when the group is collapsed?
Joana
Telerik team
 answered on 25 Apr 2022
1 answer
402 views

The Telerik Blazor Grid doesn't seem to retain the currently selected items when sorting. I've got a simple single select grid and have bound the SelectedItems property to a similarly named field in code behind. The SelectedItems field definitely contains a single entry ok and selecting items in the grid updates this as expected. However, when sorting, the grid no longer highlights the selected item as selected, and the check box column is not selected, even though the SelectedItems field still contains a single entry.

Is this the intended behaviour? And, if so, how can I get the grid to highlight the selected item after sorting?

I'm using Telerik Blazor UI 3.2.0.

Brian
Top achievements
Rank 1
Iron
 answered on 25 Apr 2022
1 answer
450 views

I'm using a Grid with GridScrollMode set to Virtual, and a custom filtering function.  When the list is filtered and a checkbox is selected the grid reloads and scrolls back to the top of the list.  This only happens when Scroll Mode is Virtual.  The following example demonstrates the issue.

Steps to recreate

  1. Load the page
  2. Enter a single character in the Filter Criteria box
  3. Scroll down the grid for a page or so
  4. Check a check box
  5. You should be immediately taken back to the to first entry in the filtered list

 

@page "/"

@using Telerik.Blazor.Components;
@using System;
@using System.Text;
@using System.Linq;


<PageTitle>Index</PageTitle>

<div class="row">
    <div class="col-md-6 offset-md-6">
        <input type="text" class="form-control" placeholder="Filter Criteria..." @bind="Filter" @bind:event="oninput" />
    </div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
    <div class="ac-criteria-list">
        <TelerikGrid Data=GetFilteredRows()
                     PageSize="20"
                     Height="295px" RowHeight="50"
                     ScrollMode="@Telerik.Blazor.GridScrollMode.Virtual"
        >
            <GridColumns>
                <GridColumn Field="@(nameof(GridRow.Text))">
                    <Template>
                        @{
                            var item = context as GridRow;
                            <input type="checkbox" id="@item.Id.ToString()" @bind="@item.Selected" @key="@item" />
                            <label for="@item.Id.ToString()">@item.Text</label>
                        }
                    </Template>
                </GridColumn>
            </GridColumns>
        </TelerikGrid>
    </div>
</div>

@code
{
    public string Filter { get; set; } = string.Empty;

    public List<GridRow> FilteredRows { get; set; } = new();
    public List<GridRow> OriginalRows { get; set; } = new();

    protected override void OnInitialized()
    {
        for (var i = 0; i < 200; i++)
        {
            OriginalRows.Add(new GridRow
            {
                Id = i,
                Selected = false,
                Text = $"{i} - {Utility.GenerateRandomString(10)}"
            });       
        }

        FilteredRows = OriginalRows.OrderBy(x => x.Text).ToList();

        base.OnInitialized();
    }

    private List<GridRow> GetFilteredRows()
    {
        if (string.IsNullOrWhiteSpace(Filter))
        {
            return FilteredRows;
        }

        return FilteredRows.Where(row => row.Text.Contains(Filter)).ToList();
    }

    public class GridRow
    {
        public bool Selected { get; set; }

        public int Id { get; set; }

        public string Text { get; set; }
    }

    public class Utility
    {
        private static char[] _chars = new char[36]
        {
            '0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
        };

        public static string GenerateRandomString(int length)
        {
            StringBuilder stringBuilder = new StringBuilder(length);
            Random random = new Random();
            for (int i = 0; i < length; i++)
            {
                stringBuilder.Append(_chars[random.Next(_chars.Length)]);
            }

            return stringBuilder.ToString();
        }
    }
}

Marin Bratanov
Telerik team
 answered on 23 Apr 2022
1 answer
131 views

Implementing OnRead is very intrusive and can very easily lead to bugs now or in the future.

I have a feature that would operate on all visible rows in the Grid (in all pages, not just the current one), and I need to know if a certain item/row is visible or not.

Is this possible, or can it be a future feature?

Thanks.

Marin Bratanov
Telerik team
 answered on 23 Apr 2022
1 answer
105 views

Hi,

at the OnUpload event I call a Javasrcipt to do some stuff before uploading. I generate a random string and set it as classname to the upload element to identify it in Javascript. In Javascript:

var files = $('. + uploaderClass)[0].querySelector('input').files;

this works in Firefox but not in Chrome (official version, I installed today).

So I set an pure HTML FileInput below the TelerikUpload like:

<input type="file" id="testFileUpload" />

(I choose first in the testFileUpload a file, then in the TelerikUpload which fires my Javascript)

I logged both elements to the browser console:

var telerikUploadElement = $('.' + uploadClass)[0].querySelector('input');
var testInput = document.querySelector('#testFileUpload');
console.log(telerikUploadElement);
console.log(testInput);

The console output for the telerikUploadElement:

input
.....
   - files: FileList { length:0}
....

the console ouptut for the testInput:

input#testFileUpload
....
    - files: FileList {0: File, length: 1}
......

In Firefox, the console output is the same for both upload elements.

Tested on:

  • Windows10
  • Telerik.UI.for.Blazor 3.2.0
  • .net6.0
  • Google Chrome 100.0.4896.127
  • Firefox 99.0.1

 

Marin Bratanov
Telerik team
 answered on 23 Apr 2022
1 answer
392 views

REPL

Built in dialog from 

DialogFactory.AlertAsync

Goes behind TelerikWindow if the window is clicked. Then it cannot be brought back on top or otherwise closed. Shouldn't the built in dialog be modal and forced on top of the TelerikWindow until it is acknowledged?

Please, let me know. Thanks.

Dimo
Telerik team
 answered on 21 Apr 2022
1 answer
560 views

I have a Field in my TelerikGrid :  <GridColumn Field=@nameof(EssGrpParm.Str) Title="Tekst" Width="30%"/>.

Could I somehow split EssGrpParm.Str with data that looks like this: "CONT INT TFT CSS". into separate columns;. CONT, INT, TFT and CSS?

Should I add a list field in EssGrpParm and foreach over the list to get new columns?

 

Dimo
Telerik team
 answered on 21 Apr 2022
1 answer
269 views

Hi, apologies if this has been asked but I didn't find it via search. We are implementing the grid in our projects and one feature I'd like to implement is to prevent the default or 'no sort' state on a column when toggling sort on the same column. Our users should always be sorting by one column. If the user clicks repeatedly on the column currently sorted, we want it to only toggle between asc and desc.

What happens right now is with single sort mode, say we have col1 that is sort asc by default.

- If the user clicks col1 header once, it sorts to desc.

- If they click col1 header again it goes to 'empty'.*

* What I want to do is have it flip to desc instead. Obviously if they then sort by a different column it will clear the sort on this column.

I understand why there is such a default/empty state but was curious if there is a way to prevent this in our scenario. I saw the OnStateChanged example in the docs but it doesn't seem to provide info on what was previously selected so I could even cancel what was going on. Unless I missed something there.

Thanks!

Svetoslav Dimitrov
Telerik team
 answered on 21 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?