Questions on UI for Blazor Forum

0 answers

165 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

811 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

155 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

642 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

710 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

702 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

1 answer

122 views

How do you get the filter menu in a Grid to be ordered?

I set a Grid to have the property FilterMode="@GridFilterMode.FilterMenu" and find that the items in the filter for the column are not ordered ascending. How can I assure that the filter menu list is ordered?

<GridColumn Field="@nameof(PackageRequest.Product)" Title="Product" Width="120px">
<Template>
@{
var item = context as PackageRequest;
@item.Product
}
</Template>
</GridColumn>

Grid

answered on 17 Feb 2022

1 answer

151 views

ComboBoxReadEventArgs does not contain a definition for Data

Hello, all,

I am implementing a solution to debounce the OnRead event of the TelerikComboBox using the following example:

https://docs.telerik.com/blazor-ui/components/combobox/events#onread

https://docs.telerik.com/blazor-ui/knowledge-base/combo-debounce-onread

Apparently, the Data property is missing from the args object passed into the OnRead handler. Following the class definitions up the inheritance chain does not reveal that it is present whatsoever.

Here is a screenshot of my code in progress, indicating the problem:

The documentation seems to indicate that the Data property should exist, inherited from ReadEventArgs.

I do not understand what could be missing here. Thanks in advance for assistance. :)

I currently am using version 2.30.0 of the Telerik UI for Blazor library.

Kindly,

Greg

ComboBox

answered on 17 Feb 2022

0 answers

106 views

Combobox without value and now doesn't render

Hi,

I started a small blazor project some week ago.

I've stared the project before the release 3.0 (I use the trial).But since then, I've updated to 3.0.1

The main component I use is the Grid and the combobox.

I have a sketch of my project to make a demo on the computer of my customer. On my machine (AMD Rzyen 5800H, Win 11, VS2022) eveything runs file. The first component is just a combobox that displays a list of date.

The I tried to deploy on the demo server of my customer (Win server 2019, IIS) and when I launch the app, the combobox is empy...

but the code is just a list of date to display

After spending several hours, I've decided to create an "empty" blazor project in order to test the combobox and deploy on the server and now, it's worse, enve on my computer, this new project is not able to display the combobox

I used the simpliest sample from the documentation, still the same.

Does anyone noticed something similar? is it a licence problem? why my elder developpement works fine and not the newest?

@page "/counter"

<PageTitle>Counter</PageTitle>



<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<TelerikButton  OnClick="@OnClickHandler">Hello!</TelerikButton>
<TelerikComboBox Data="@MyList" @bind-Value="MyItem">
</TelerikComboBox>

@code {
    private int currentCount = 0;
    string result;

    private void IncrementCount()
    {
        currentCount++;
    }

    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    protected string MyItem { get; set; }

    //Define a preselected value when the component initializes
    protected override void OnInitialized()
    {
        MyItem = "second";
    }
    async Task OnClickHandler()
    {
        result = DateTime.Now.ToString();
    }
}

(PS on my new project, i followed all the instructions https://docs.telerik.com/blazor-ui/getting-started/server-blazor)

Regards;

ComboBox

asked on 17 Feb 2022

0 answers

228 views

MultiSelect user interaction problems

Customer feedback about the TelerikMultiSelect is that it is not obvious about how to interact with it. Note that we are using it like a traditional ComboBox, the user does not expect to type into the control or use the search facility. There are only modest numbers of items so it's easiest to just open the list and select items. The following usage problems have been noticed:

The control initially looks like a TextBox and when the cursor moves over it, it changes to a beam and the user thinks they are supposed to type something. Typing does open the list and attempt to find a match, but the users aren't using that feature.
Clicking in white space opens the item list. It's not obvious this gesture is needed.
As items are selected, the remaining white space in the control has unpredictable size, and it can become small (see attached png). You have to carefully click in the white space to open/close the list.

Items 2 and 3 are the most irritating. As a workaround, I was considering putting a small button to the right of each MulitSelect, then clicking that button would toggle the open/close state. This would create the mock appearance of a ComboBox. However I can't find any way of toggling the open state in code.

Any comments or suggestions on these points would be very welcome.

Greg

MultiSelect

asked on 17 Feb 2022