Questions on UI for Blazor Forum

1 answer

460 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

125 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

256 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

124 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

101 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

3 answers

351 views

Hybrid AutoGen form and several manual fields?

In the TelerikForm Blazor control is it possible to have all the fields auto-generate except for a couple of specific ones?

I have a form that has ~20 fields on it. It autogenerates properly. I would like to add an additional field for notes but want that to be a multiline text area and I want it to span all the columns of the form.

Is there a way to combine an autogenerated form with a few templated forms?

Form

TextArea

answered on 26 May 2022

1 answer

159 views

Tilelayout Add-remove tiles

Hi

I saw this demo: https://github.com/telerik/blazor-ui/tree/master/tilelayout/add-remove-tiles

It looks great but its added code.

So it would be nice to have this behavior build into the component:

1. Have a property with a list of available components

2. have the component let the user pick from a list (The list could be a dropdown value list)

3. With saving state also save the connected component

4. have an event on which we instantiate the component when the layout is shown

Eric

TileLayout

answered on 25 May 2022

1 answer

144 views

Grid Menu filter - copy paste not working

The copy paste functionality is not working when I use the menu filter for a numeric value.

This does also not work for the demo on https://demos.telerik.com/blazor-ui/grid/filter-menu

Filter

Grid

answered on 25 May 2022

0 answers

261 views

Editor not working properly on Modal

Hi,

I am experiencing some problem when using TelerikEditor on Modal. The editor seems a bit slow and if you press enter, it doubles the next line and when you edit a text it creates a new line on it. See example below:

Editor

asked on 25 May 2022