Questions on UI for Blazor Forum

0 answers

63 views

I have to click on the TreeView once before clicking to select a node works

I have a simple project with a dropdownlist of items and a treeview. When an item is selected in the dropdownlist the treeview is populated. When I select an item from the dropdownlist, my tree populates as expected, but when I click on a node in the tree, nothing happens. If I click on the node again, then it selects the node as expected. Note that first click can be anywhere on the treelist component - its like I have to click on the component to seemingly "focus" it before the TreeView responds to clicks to select a node. I am using SelectionMode as Single and TreeView.OnItemClick to detect the selection, but it is clear the first click is ignored because the built-in selection highlighting does nothing on the first click and correctly changes the selection on subsequent clicks.

Is there some way I can get the TreeView to simply accept clicks for selection without clicking on the component to "focus" it first?

Here is my treeview reference:

<TelerikTreeView Data="@treeItems"
SelectedItems="SelectedTreeItems"
SelectionMode="@TreeViewSelectionMode.Single"
OnItemClick="@(args => InvokeSelectedViewChanged((WellTreeItem)args.Item))">
<TreeViewBindings>
<TreeViewBinding TextField="Name" ItemsField="Subitems"></TreeViewBinding>
<TreeViewBinding Level="1" TextField="Name"></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>

TreeView

asked on 01 Jun 2022

1 answer

693 views

Is it possible to disable the entire TelerikWizard stepper?

The title is self explanatory. We don't require a stepper. Our wizard could also potentially consist of up to 10 steps, which would make the stepper too chaotic. Is it possible to disable and/or hide the entire stepper somehow? Thanks in advance!

Wizard

answered on 31 May 2022

1 answer

491 views

How to make the grid more compact and tighter, what classes and methods to accomplish?

I'm looking for suggestions on how to compress and tighten up the grid display. The end-user wants the grid to look more like an excel spreadsheet.

What CSS classes should I target? or is there a logical process for adjusting those sorts of things in the grid?

Also open to any articles or tips.

Thanks

Grid

answered on 31 May 2022

0 answers

80 views

Create form on the fly

Hi

We have customers who can create there own database table. Currently in Delphi we can create a crud function for this table at run time based on the table definition we store in the database (Fieldname, fieldtype , fieldlength, required field, min value, maxvalue etc..)

So now, moving to blazor, we are looking if we can do the same, so the json will have metadata of the formfields that has to be created at run time.

The form should show the data in a grid and there is a update form needed to manipulate the data

Has someone made this kind of functionality?

Eric

General Discussions

asked on 30 May 2022

1 answer

473 views

Mail merge

Hi

Is there any RTF like editor which we can use to create a RTF file with Mail merge field which we can use to create a template that can be used to generare DOCX or PDF files?

Eric

PS The Editor is missing in the list of Tags

General Discussions

answered on 30 May 2022

1 answer

132 views

Display TelerikTooltip without Hover or Click

Hi,

I would like to use a TelerikTooltip as validation message container, so that the user can click to close the tooltip after reading the message.

Can the TelerikTooltip be made to display immediately and then respond to clicks as normal afterwards?

Form

Tooltip

ValidationMessage

answered on 30 May 2022

2 answers

267 views

Any way to have conditional aggregations?

for example Count by FieldValue == "X" ???

Grid

answered on 26 May 2022

1 answer

1.5K+ views

Grid inline editing validation messages not working

I have a grid that does CRUD and it works correctly. Editing mode is Inline. The required value validation rules (defined on the data model) are working, but all that happens visually in the grid is a red border on the required fields. The validation messages I expect as tooltips never display.

The column in question are Activity and ActivityDate.

(All latest versions of Telerik products as of 5/23/22)

This is the entity definition:

public class BoxActivity
{
    public BoxActivity()
    {
        // Provide these default values so these required columns that will be auto-set do not cause validation to fail.
        ActivityDate = DateTime.Now;
        LastUpdatedDate = DateTime.Now;
        LastUpdatedBy = "default";
    }

    [Required]
    [Dapper.Contrib.Extensions.Key]
    public int BoxActivityId { get; set; }

    [Required]
    public int BoxId { get; set; }

    [Required(ErrorMessage = "Enter an activity")]
    [StringLength(30)]
    public string Activity { get; set; }

    [Required(ErrorMessage = "Enter an activity date")]
    public DateTime ActivityDate { get; set; }

    [StringLength(50)]
    public string RequestedBy { get; set; }

    public int? FacilityId { get; set; }

    [StringLength(4000)]
    public string Notes { get; set; }

    [Required]
    public DateTime LastUpdatedDate { get; set; }

    [Required]
    [StringLength(50)]
    public string LastUpdatedBy { get; set; }
}

This is the grid definition:

        <TelerikGrid Data="@boxActivity" EditMode="@GridEditMode.Inline" Height="auto"
                Pageable="false" Sortable="false" Groupable="false"
                FilterMode="Telerik.Blazor.GridFilterMode.None"
                Resizable="false" Reorderable="false" ConfirmDelete="true"
                OnUpdate="@BoxActivityUpdateHandler" OnEdit="@BoxActivityEditHandler" 
                OnDelete="@BoxActivityDeleteHandler" OnCreate="@BoxActivityCreateHandler" OnCancel="@BoxActivityCancelHandler">
            <GridToolBar>
                <GridCommandButton Command="Add" Icon="add">Add Activity</GridCommandButton>
            </GridToolBar>
            <GridSettings>
                <GridValidationSettings Enabled="true" />
            </GridSettings>
            <GridColumns>
                <GridColumn Field="@(nameof(BoxActivity.ActivityDate))" Title="Activity Date" Editable="true">
                    <HeaderTemplate>
                        <label class="efc-grid-col-hdr">Activity Date</label>
                    </HeaderTemplate>
                    <Template>
                        <div style="text-align: center;">
                            @((context as BoxActivity).ActivityDate.ToString("MM/dd/yyyy"))
                        </div>
                    </Template>
                    <EditorTemplate>
                        <TelerikDatePicker @bind-Value="@((context as BoxActivity).ActivityDate)" Id="ActivityDate" Width="120px"></TelerikDatePicker>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@(nameof(BoxActivity.Activity))" Title="Activity" >
                    <HeaderTemplate>
                        <label class="efc-grid-col-hdr">Activity</label>
                    </HeaderTemplate>
                    <Template>
                        <div style="text-align: center;">
                            @((context as BoxActivity).Activity)
                        </div>
                    </Template>
                    <EditorTemplate>
                        <TelerikDropDownList @bind-Value="@((context as BoxActivity).Activity)"
                                                DefaultText="Choose an Activity"
                                                Data="@activities"
                                                Id="Activity" >
                        </TelerikDropDownList>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@(nameof(BoxActivity.RequestedBy))" Title="Requested By" >
                    <HeaderTemplate>
                        <label class="efc-grid-col-hdr">Requested By</label>
                    </HeaderTemplate>
                    <Template>
                        <div style="text-align: center;">
                            @((context as BoxActivity).RequestedBy)
                        </div>
                    </Template>
                    <EditorTemplate>
                        <TelerikDropDownList @bind-Value="@((context as BoxActivity).RequestedBy)"
                                                DefaultText="Choose a Requestor"
                                                Data="@requestors"
                                                Width="180px"
                                                Id="RequestedBy" >
                        </TelerikDropDownList>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@(nameof(BoxActivity.FacilityId))" Title="Facility" >
                    <HeaderTemplate>
                        <label class="efc-grid-col-hdr">Facility</label>
                    </HeaderTemplate>
                    <Template>
                        <TelerikDropDownList @bind-Value="@((context as BoxActivity).FacilityId)"
                                                Data="@facilities"
                                                Enabled="false"
                                                TextField="FacilityName" 
                                                ValueField="FacilityId" 
                                                Width="180px"
                                                Id="FacilityId" >
                        </TelerikDropDownList>
                    </Template>
                    <EditorTemplate>
                        <TelerikDropDownList @bind-Value="@((context as BoxActivity).FacilityId)"
                                                DefaultText="Choose a Facility"
                                                Data="@facilities"
                                                TextField="FacilityName" 
                                                ValueField="FacilityId" 
                                                Width="180px"
                                                Id="FacilityId" >
                        </TelerikDropDownList>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@(nameof(BoxActivity.Notes))" Title="Notes">
                    <HeaderTemplate>
                        <label class="efc-grid-col-hdr">Notes</label>
                    </HeaderTemplate>
                    <EditorTemplate>
                        <TelerikTextArea @bind-Value="@((context as BoxActivity).Notes)" AutoSize="true" Id="Contents" ></TelerikTextArea>
                    </EditorTemplate>
                </GridColumn>
                <GridCommandColumn Context="NewNameToNotCollideBoxActivityContext">
                    <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
                    <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
                    <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>

Grid

ValidationTooltip

answered on 26 May 2022

1 answer

127 views

NumericTextBox in a GridColumn HeaderTemplate

I have a numeric Text box in a grid column headerTemplate. At zoom of 100% in Google chrome or Edge, it looks fine. But at other zooms, there is a white line that shows up at one of the borders. Sometimes it's the top, bottom, left, right. Not consistent.

Is there a way to get rid of that line?

Code on my shared page:

The style "classHeaderTextBox" on my myAppStyles.css page:

div.classHeaderTextBox > span > input.k-input {
text-align: right !important;
background-color: var(--mdc-theme-primary, #6200ee);
border-style: none !important;
color: white;
border: 0 !important;
border-color: var(--mdc-theme-primary, #6200ee) !important;

answered on 26 May 2022

1 answer

103 views

Plotband alternating colors without range

Hello,

I cannot get plotbands to work, could you please help me figure out what I'm doing wrong?

<ChartCategoryAxisPlotBands>
       <ChartCategoryAxisPlotBand From="0" To="100000000" Color="red" Opacity="0.4" />
       <ChartCategoryAxisPlotBand From="200000000" To="300000000" Color="red" Opacity="0.4" />
       <ChartCategoryAxisPlotBand From="400000000" To="500000000" Color="red" Opacity="0.4" />
</ChartCategoryAxisPlotBands>

Is there a oneliner for just alternating colors?

Each even row number should be red and odd row number white. It makes it harder to make each plotband range, when the numbers are dynamic and change every single day. I do not control the min to max range, beacuse they are created automatically when the graph is rendered.

Regards,
Nikolas

Charts

answered on 26 May 2022