Questions on UI for Blazor Forum

1 answer

577 views

Define ComboBox value type when using custom values

Hello

According to the Telerik Blazor Combobox documentation, it is not possible to have e.g. decimal values when I want to use AllowCustom="true":

The ComboBox provides the following features:

AllowCustom - whether the user can enter custom values. If enabled, the ValueField must be a string.

In my application it would be great to have the option to allow custom values, but decimal only. I've seen this for e.g. NumericTextBox. There is a parameter "T" where one can define the type of the value. Here you can see an example code extracted from my application:

<TelerikComboBox Data="@Data"
                 @bind-Value="@SelectedValue"
                 TextField="Value"
                 ValueField="Value"
                 AllowCustom="true"
                 Placeholder="Select a value or set a custom value">
</TelerikComboBox>

public List<MyData> Data { get; set; }
public decimal SelectedValue { get; set; }

public class MyData
{
    public decimal Value { get; set; }
}

Is there already such a feature and I simply didn't see it or is this really not possible and never will be?

Best Regards,
Roman

ComboBox

answered on 28 Aug 2021

1 answer

482 views

Telerik Button Focus

Hi

Is Focus is available for Telerik Button?

Could you please suggest on this?

Thanks,

Vishnu Vardhanan H

Button

Form

General Discussions

answered on 27 Aug 2021

1 answer

165 views

On Clicking Space Button click event

Hi,

On Clicking Space from Keyboard need to perform Button click event.

<EditForm OnValidSubmit="@OnFormValidSubmit" Model="@Model">
<TelerikButton Icon="save" ButtonType="@ButtonType.Submit" Primary="true">Upgrade</TelerikButton>
<TelerikButton Icon="cancel" ButtonType="@ButtonType.Button" OnClick="@OnCancelClick">Cancel</TelerikButton>
</EditForm>

Thanks,

Vishnu Vardhanan H

Button

Form

General Discussions

answered on 27 Aug 2021

2 answers

549 views

data in textarea control in browser html.

HTML for textarea does not contain the data bound to it-- how is this being displayed in the browser and is there any way to see the contents of the textarea via the html? When i inspect the html for a text area it doesn't contain the actual data-- it contains a data id reference (I'm assuming this). I am trying to "export" an html page using JavaScript code like this:

document.getElementsByClassName('targetForExport')[0].outerHTML

I have also used innerHTML and it doesn't matter.

BUT there is no data in the textareas and the datepickers. Ultimately i'm trying to export a page (set of html elements really) to a PDF format. The only real catch i'm running into is the data simply isn't there.

Thanks.

DatePicker

DateTimePicker

TextArea

answered on 26 Aug 2021

3 answers

482 views

Grid aggregates don't work correctly with preset custom filters

Hi,

Within our Blazor application I use a Grid with custom row filters:

<TelerikGrid Data="@RecordList"
                         SelectionMode="GridSelectionMode.Multiple"
                         Width="100%"
                         Pageable="true"
                         PageSize="@PageSize"
                         FilterMode="@GridFilterMode.FilterRow"
                         Sortable="true"
                         Groupable="false"
                         Height="760px"
                         Resizable="true">
                <GridColumns>                    
                    <GridColumn Width="200px" Field="@nameof(Demo.Name)" Title="@L["Name"]">
                        <FilterCellTemplate>
                            <CustomListRowFilter Context="@context" ListValues="EmployeeFilterList" AddNoneItem="false" />
                        </FilterCellTemplate>
                    </GridColumn>                   
                    <GridColumn Width="200px" Field="@nameof(Demo.Datum)" Title="@L["Date"]">
                        <FilterCellTemplate>
                            <CustomDateSpanRowFilter Context="@context" InitialValueFrom="@InitialDateFromFilter" InitialValueTo="@InitialDateToFilter" />
                        </FilterCellTemplate>
                    </GridColumn>
                    <GridColumn Width="200px" Field="@nameof(Demo.Hours)" Title="@L["Hours"]">
                        <FilterCellTemplate>
                            <CustomNumberRowFilter Context="@context" />
                        </FilterCellTemplate>
                        <FooterTemplate>
                            <span>Total: @context.Sum?.ToString("0.00")</span>
                        </FooterTemplate>
                    </GridColumn>
                    <GridColumn Width="200px" Field="@nameof(Demo.Checked)" Title="@L["Checked"]">
                        <FilterCellTemplate>
                            <CustomBooleanRowFilter Context="@context" InitialValue="false" />
                        </FilterCellTemplate>
                        <Template>
                            <input type="checkbox" checked="@(((Demo) context).Checked)" @onchange="@(args => OnCheckChanged((Demo) context, args))" />
                        </Template>
                    </GridColumn>
                </GridColumns>
                <GridAggregates>
                    <GridAggregate Field=@nameof(Demo.Hours) Aggregate="@GridAggregateType.Sum" />
                </GridAggregates>
            </TelerikGrid>

For example, the custome date filter looks like:

<select value="@Value" @onchange="OnFilterChanged">
    <option value="@string.Empty">All</option>
    <option value="True">True</option>
    <option value="False">False</option>
</select>

@code {
        private string Field { get; set; }
        private string Value { get; set; }
        private bool? _boolValue;
        [Parameter]
        public FilterCellTemplateContext Context { get; set; }
        [Parameter]
        public bool? InitialValue { get; set; }

        protected override async Task OnInitializedAsync()
        {
            Field = ((FilterDescriptor) Context.FilterDescriptor.FilterDescriptors[0])?.Member;
            if (InitialValue != null)
            {
                SetValue(InitialValue.Value);
                await SetFilter();
            }
            else
            {
                SetValue(((FilterDescriptor)Context.FilterDescriptor.FilterDescriptors[0]).Value);
            }
        }

        private void SetValue(object value)
        {
            if (string.IsNullOrEmpty(value?.ToString()) || value.ToString() == "All")
            {
                _boolValue = null;
                Value = string.Empty;
            }
            else
            {
                bool.TryParse(value.ToString(), out var parseResult);
                _boolValue = parseResult;
                Value = _boolValue.ToString();
            }
        }
        
        protected async Task OnFilterChanged(ChangeEventArgs args)
        {
            var value = args.Value;
            SetValue(value);
            await SetFilter();
        }

        private async Task SetFilter()
        {
            if (_boolValue != null)
            {
                var filterDescriptors = Context.FilterDescriptor.FilterDescriptors.Where(descriptor =>
                    ((FilterDescriptor)descriptor).Member == Field).ToList();

                var filterDescriptor = (FilterDescriptor) filterDescriptors[0];
                filterDescriptor.Value = _boolValue;
                
                ((FilterDescriptor)filterDescriptors[0]).Operator = FilterOperator.IsEqualTo;
                await Context.FilterAsync();
            }
            else
            {
                await Context.ClearFilterAsync();
            }
        }
    }

In my example the filter for the column "Checked" gets an initial value when page is loaded. The grid filters correctly. But the sum of the hours column show the overall sum and not the filtered one.

Do I miss something? Maybe within the filter component?

Best regards,

Rayko

Grid

answered on 26 Aug 2021

0 answers

319 views

Clipboard service not able to copy the text when you select folder path and it throws exception.

Hi Team,

As i'm not able to copy the text when you select folder path and it is showing as exception.

Could not find 'clipboard' in 'window.navigator'. Error: Could not find 'clipboard' in 'window.navigator'. at

Please check below code snippet.

public class ClipBoardService
{
private readonly IJSRuntime _jsRuntime;

public ClipBoardService(IJSRuntime jsRuntime)
{
_jsRuntime = jsRuntime;
}

public ValueTask WriteTextAsync(string text)
{
return _jsRuntime.InvokeVoidAsync("navigator.clipboard.writeText", text);
}
}

if(clipBoardService != null)
{
await clipBoardService.WriteTextAsync(selectedItem.IsolationFolderPath);

}

Grid

asked on 26 Aug 2021

1 answer

122 views

Standard Navigation bar stopped working after 2.26 update

I have a project that is based on the standard "sever side blazor" project template in Visual Studio.
It's been working more or less fine over the past year and has had the Telerik package there from the beginning. The project makes extensive use of Telerik' blazor controls.
When I updated to 2.26, my nav bar suddenly disappeared. I can step through the code but nothing displays.
I am pretty sure there is some kind of CSS conflict going on, but I'm just not savvy enough here to diagnose the issue.

General Discussions

answered on 26 Aug 2021

1 answer

157 views

Date Format in Gantt Views

How can I change for format of dates in Gantt Timeline Views. For instance, to change to dd/MMM/yyy format? Seems to default US format.

Gantt

answered on 24 Aug 2021

1 answer

305 views

Grid ExcelExport and dates

Hi,

When exporting data from a grid using ExcelExport, the dates are visible when viewed from Excel, but not when using Open Office or Google Sheets. Is there any reason for this? Can it be addressed, as increasing numbers of people use these methods for viewing Excel files.

https://demos.telerik.com/blazor-ui/grid/export-excel?_ga=2.141805431.450598280.1627570618-522564835.1576660522

Output file is attached - see final column in Open Office or Google Sheets.

Thanks,

Dean

Grid

answered on 24 Aug 2021

1 answer

953 views

SelectedItemsChanged not firing when checkbox is unselected.

I have a grid using checkbox selection and when I un-check a row, it is not firing the SelectedItemsChanged event.

The event adds filters to another grid I have on the page.

<TelerikGrid Data="strategicLevelItems" SelectedItems="selectedStrategic" Width="100%" Height="500px"
                                 ScrollMode="GridScrollMode.Scrollable" SelectionMode="GridSelectionMode.Multiple"
                                 SelectedItemsChanged="@((IEnumerable<GetNavigationNodesModel> strategicItems) => OnStrategicSelectAsync(strategicItems))"
                                 FilterMode="GridFilterMode.FilterRow">
                        <GridColumns>
                            <GridCheckboxColumn SelectAll="true" Width="40px" OnCellRender="@GridHelpers.CenterAlign" />
                            <GridColumn Field="@(nameof(GetNavigationNodesModel.Name))" />
                        </GridColumns>
                    </TelerikGrid>

    private async Task OnStrategicSelectAsync(IEnumerable<GetNavigationNodesModel> selectedItems)
    {
        selectedStrategic = selectedItems;

        var state = tacticalGrid.GetState();

        var compositeFilter = new CompositeFilterDescriptor() { LogicalOperator = FilterCompositionLogicalOperator.Or };
        foreach (var item in selectedItems)
        {
            compositeFilter.FilterDescriptors.Add(new FilterDescriptor()
            {
                Member = "ParentId",
                Operator = FilterOperator.IsEqualTo,
                Value = item.Id
            });
        }

        state.FilterDescriptors.Clear();
        state.FilterDescriptors.Add(compositeFilter);

        await tacticalGrid.SetState(state);
    }

Grid

updated answer on 23 Aug 2021