Questions on UI for Blazor Forum

2 answers

39 views

Any way to have conditional aggregations?

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

Grid

answered on 26 May 2022

1 answer

2 views

Disable cell using inline edit

Hi

I have a grid using Inline edit, but in some circimstances some cells must be disabled.

How can i do this?

Eric

Grid

answered on 26 May 2022

0 answers

4 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

asked on 26 May 2022

0 answers

2 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

asked on 26 May 2022

1 answer

8 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

4 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

2 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

48 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

0 answers

2 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