Questions on UI for Blazor Forum

1 answer

156 views

Predifined dialogs obscured by dialog

REPL

Makes it impossible to show e.g. error messages above a dialog.

Dialog

answered on 21 Feb 2022

2 answers

240 views

Why doesn't this code produce a round button like in the demo?

            <GridToolBar>
                <AuthorizeView Roles="DOMAIN\GROUP">
                    <Authorized>
                        <GridCommandButton Command="Add" Icon="add">Add Permission</GridCommandButton>
                    </Authorized>
                </AuthorizeView>
                <TelerikButton OnClick="@_reloadPermissions"
                       Enabled="@_reloadEnabled"
                       FillMode="@(ThemeConstants.Button.FillMode.Solid)"
                       Rounded="@(ThemeConstants.Button.Rounded.Full)"
                       Shape="@(ThemeConstants.Button.Shape.Square)"
                       ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)"
                       Size="Medium">
                    <TelerikIcon Icon="arrow-rotate-cw"/>
                </TelerikButton>
            </GridToolBar>

Instead I get this:

I want the second button to be a round "refresh" button.

Button

answered on 21 Feb 2022

1 answer

257 views

Donut chart design

1. How can I set the tooltip values to be always visible? (the 42%, 25% & 33%)

2. Is it possible to set the inner text, like this? (50)

Charts

answered on 20 Feb 2022

0 answers

208 views

ThemeConstants

Why cam I getting this?

Loader

asked on 20 Feb 2022

0 answers

166 views

Grid.SetState gives null ref with no useful stack trace

I'm suddenly getting null refs when I call Grid.SetState and I need more information on why.

User clicks Reset button:
await Grid.SetState(null);

And then I set a Default Sort

            var desiredState = new GridState<SearchDocumentItem>()
            {
                SortDescriptors = new List<SortDescriptor>()
                    {
                        new SortDescriptor { Member = member, SortDirection = dir }
                    }
            };

            if (Grid != null)
                await Grid.SetState(desiredState);

Grid

asked on 18 Feb 2022

2 answers

840 views

Default HeaderTemplate

Hi guys,

In the following code snippet I'm using a HeaderTemplate for my grid. This is working like expected. However I want to use this header template on practically all my columns. Is there an easy way to extract the HeaderTemplate and use that on multiple columns by just setting the HeaderTemplate property? Or can I create some sort of custom GridColumn which has this template automatically implemented?

<GridColumn Field="OrderMetadata.CustomerReference">
    <HeaderTemplate>
        <label class="k-checkbox-label">
            <TelerikCheckBox ValueChanged="@((bool result) => OnColumnSelect(result, nameof(WarehouseDocumentListItem.OrderMetadata.CustomerReference)))" />
                Customer reference
        </label>
    </HeaderTemplate>
</GridColumn>

Thanks in advance!

Regards,

Guido

Grid

updated answer on 18 Feb 2022

1 answer

162 views

Wait for file upload?

Hi,

I have some backend API calls that I have to run before I TelerikUpload some files, namely I have to collect a ticketid to assign to the documents.

Once I have my ticketid, I call UploadRef.UploadFiles() and add the ticketid to the request. I appreciate that UploadFiles runs asynchronously but in my case, I need to wait and make sure all of the files are accepted and take some actions based on if all were successful or if there were failures.

I thought it was going to be really easy, but apparently I can't await for UploadRef.UploadFiles():

await UploadRef.UploadFiles() // nope

Instead I'm currently doing this and it works but feels kludgy:

        private int UploadSuccessCount {get; set;}
        private int UploadFailureCount {get; set;}
        private async Task OnTelerikSuccessHandler(UploadSuccessEventArgs e)
        {
            UploadSuccessCount++;
        }

        private async Task OnTelerikErrorHandler(UploadErrorEventArgs e)
        {
            UploadFailureCount++;
        }

        private async Task<bool> WaitForFileUpload()
        {            
            if(RequestModel.FileCount == 0)
            {
                return true;
            }

            int count = RequestModel.FileCount;
            UploadSuccessCount = 0;
            UploadFailureCount = 0;
            UploadRef.UploadFiles();

            int processed = UploadSuccessCount + UploadFailureCount;
            while( processed < count )
            {
              await Task.Delay(1000);
              processed = UploadSuccessCount + UploadFailureCount;
            }

            return UploadSuccessCount == count ? true : false;
        }

I think UploadRef ought to be able to get at least the count of files that are ready to upload. In my case, there are some times that files are required. Currently, I have to track the file count via events:

        private async Task OnTelerikSelectHandler(UploadSelectEventArgs e)
        {
            RequestModel.FileCount += e.Files.Count;
            StateHasChanged();
        }

        private async Task OnTelerikRemoveHandler(UploadEventArgs e)
        {
            int count = RequestModel.FileCount - e.Files.Count;
            if (count < 0 ) count = 0;
            RequestModel.FileCount = count;
            StateHasChanged();
        }

I would like to be able to wait for the uploads to complete, perhaps

await UploadRef.UploadFilesAsync();

Thoughts?

Upload

answered on 18 Feb 2022

1 answer

652 views

Button in Header Template not firing OnClick unless button is clicked more than once

I have a Tile Layout with a TelerikButton in the HeaderTemplate and it does not fire unless I click on the button more that once. This seems to have started with v3 of the controls.

			<TileLayoutItem ColSpan="13" RowSpan="12" Class="scrollableTile">
				<HeaderTemplate>
					<h5 class="k-card-title d-inline-block">Hours</h5>
					<TelerikButton Class="float-end" Icon="save" Title="Save" OnClick="SaveHoursAsync"></TelerikButton>
				</HeaderTemplate>
				<Content></Content></TileLayoutItem>

TileLayout

answered on 17 Feb 2022

1 answer

733 views

GridColumn definition with condition mixes column order / Dynamic Grid columns

I have defined a Combobox where the user can choose between various templates. After changing the Template (value in Combobox) a TelerikGrid will change the number/order of columns in the grid.

Depending on the defined column name (Name=="Spacer" via a conditional if) I will create one column differently. This will end up as an unexpected order of the columns. See order of columns in method CreateTemplates.

This is only a simple example, but I have more complex conditions for creating GridColumns depending on the data which I want to display.

What is wrong? My expectation is the TelerikGrid should display the column as defined in IList<Template> Templates

Razor Selection:

<div class="row">
    <div class="column">
        <label>
            Template:
            <select class="form-control col-12" @onchange="@OnSelectTemplate">
                @foreach (var template in Templates)
                {
                    if (template.Name == _selectedTemplate.Name)
                    {
                        <option value="@template.Name" selected>@template.Name</option>
                    }
                    else
                    {
                        <option value="@template.Name">@template.Name</option>
                    }
                }
            </select>
        </label>
    </div>
</div>

Razor Grid:

<TelerikGrid Data="@Data"
             Pageable="false"
             Resizable="true"
             Sortable="false"
             EditMode="@GridEditMode.Incell"
             Width="1200px"
             Height="600px"
             OnUpdate="@UpdateHandler"
             SelectionMode="@GridSelectionMode.Single">
    <GridColumns>

        @{
	        // Data is provided
	        if (Data != null && Data.Any())
	        {
		        // ....Fill Grid
	        }
	        else
	        {
                // No Data provided
		        foreach (var column in ColumnList)
		        {
			        if (column.Name == "Spacer")
			        {
				        <GridColumn Field=""
				                    Title="XXX"
				                    Width="20px"
				                    Resizable="false"
				                    Editable="false"
				                    Id="Spacer"/>
			        }
			        else
			        {
				        <GridColumn Id="@column.Name"
						    Field="@column.Name"
				                    Title="@column.Caption"
				                    Width="@(column.Width + $"px")"
				                    Resizable="true"
				                    FieldType="@typeof(string)"/>
			        }
		        }
	        }
        }
    </GridColumns>
</TelerikGrid>

Class Template:

public class Template
    {
        public string Name { get; set; }


        public IEnumerable<TemplateColumn> Columns { get; set; }


        public static IList<Template> CreateTemplates()
        {
            var result = new List<Template>()
            {
                new Template()
                {
                    Name = "Template 1",
                    Columns = new List<TemplateColumn>()
                    {
                        new TemplateColumn()
                        {
                            Name = "ID",
                            Caption = "ID",
                            IsReadOnly = true,
                            Width = 80
                        },
                        new TemplateColumn()
                        {
                            Name = "Desc_EN",
                            Caption = "Description",
                            IsReadOnly = false,
                            Width = 250
                        },
                        new TemplateColumn()
                        {
                            Name = "Spacer",
                            Caption = "XXX",
                            IsReadOnly = true,
                            Width = 20
                        },
                        new TemplateColumn()
                        {
                            Name = "Desc_DE",
                            Caption = "Description german",
                            IsReadOnly = false,
                            Width = 250
                        },
                    }
                },
                new Template()
                {
                    Name = "Template 2",
                    Columns = new List<TemplateColumn>()
                    {
                        new TemplateColumn()
                        {
                            Name = "ID",
                            Caption = "ID",
                            IsReadOnly = true,
                            Width = 80
                        },
                        new TemplateColumn()
                        {
                            Name = "Spacer",
                            Caption = "XXX",
                            IsReadOnly = true,
                            Width = 20
                        },
                        new TemplateColumn()
                        {
                            Name = "Desc_DE",
                            Caption = "Description german",
                            IsReadOnly = false,
                            Width = 250
                        },

                        new TemplateColumn()
                        {
                            Name = "Desc_EN",
                            Caption = "Description",
                            IsReadOnly = false,
                            Width = 250
                        },
                    }
                }
            };

            return result;
        }
    }

Class TemplateColumn:

public class TemplateColumn
    {
        public string Name { get; set; }

        public string Caption { get; set; }

        public int Width { get; set; }

        public bool IsReadOnly { get; set; }
    }

Additional Razor Code:

@code {
	
private List<BomItemDto> Data { get; set; } = new List<BomItemDto>();

    private IList<Template> Templates { get; set; } = new List<Template>();

    private Template _selectedTemplate;

public IList<TemplateColumn> ColumnList { get; set; } = new List<TemplateColumn>();

    protected override async Task OnInitializedAsync()
 {
        var bomTemplates = Template.CreateTemplates();

	Templates = bomTemplates.ToList();
        _selectedTemplate = bomTemplates.FirstOrDefault();

	ColumnList = _selectedTemplate.Columns.ToList();
    }

    private async Task OnSelectTemplate(ChangeEventArgs e)
 {
        var selectedTemplateName = e.Value.ToString();
        _selectedTemplate = Templates.FirstOrDefault(p => p.Name == selectedTemplateName);

	var columnList = _selectedTemplate.Columns.ToList();
        
	ColumnList.Clear();
	ColumnList = columnList;
    }


    private async Task UpdateHandler(GridCommandEventArgs args)
 {
    }

	
}

Grid

answered on 17 Feb 2022

1 answer

716 views

Multiselect readonly

How can I make a Multiselect readonly?

I want to show a list of "chips" and this is very close to what I want:

<TelerikMultiSelect Data="@Values" Enabled="true" @bind-Value="@Values" ClearButton="true" AutoClose="false" MinLength="100000" />

But I don't want the user to type anything. I can not set it to disabled because I want to be able to close the chips, so what I want is a readonly possibility. Is this possible to do?

MultiSelect

answered on 17 Feb 2022