Questions on UI for Blazor Forum

0 answers

142 views

Whats the right approach for CSS layout with Material theme ?

Hi

I am writing a complex front end application using the Telerik Blazor web controls with Material theme.

Layout with the inbuilt Telerik components wont work for us - we need a fully featured CSS layout library (which is what our designers use)

Which CSS layout lib do you recommend with Material theme ?

Would bootstrap with a material theme and Telerik components with material layout work together ?

Thanks,

Matt

General Discussions

asked on 18 Nov 2021

1 answer

1.3K+ views

Resetting A TelerikForm in Blazor back to Pristine State

I have a need to reset the form and it's validation back to a pristine state (blank form with validation) either when the form is complete and successful response is returned or by user initiated click event.

I don't see anywhere in the documentation to do so.

I have set it equal to a new instance of the FormModel, and that indeed clears the form, BUT it does not reset the form validation or any of those behaviors.

How can I reinitialize the form the same way that the form initializes on route activation?

Form

ValidationMessage

ValidationSummary

answered on 16 Nov 2021

1 answer

253 views

TelerikDatePicker value less then 1/1/1900 gives error in console.

Hi there,
I have created the blazor app with Telerik.

For the <TelerikDatePicker> i am using DateTime with nullable value. and this works fine.
if we select the date from the datepicker then it is working as expected.
When we try to enter the date manualy by keyboard. then it is giving the error if date is less then 1/1/1900.
Not sure what i need to do.

Can you help with this

DatePicker

answered on 15 Nov 2021

2 answers

146 views

GridColumn has filterable css-class even though it is not filterable

Hi!

My grid data is ExpandoObjects. The grid has ShowColumnMenu set to true, FilterMode set to GridFilterMode.FilterMenu and FilterMenuType set to FilterMenuType.CheckBoxList.

I am defining a bunch of GridColumn by looping a list. When defining these i set the Filterable parameter to false. But the th element still has the k-filterable css class, which add the extra padding to the right.

How do I get rid of the extra padding in my headers?

Here's a peek of my code:

<TelerikGrid @ref="Grid"
             Data="Data"
             Pageable="true"
             Sortable="true"
             Resizable="true"
             Reorderable="true"
             ShowColumnMenu="true"
             Groupable="true"
             SortMode="@SortMode.Multiple"
             FilterMode="GridFilterMode.FilterMenu"
             FilterMenuType="FilterMenuType.CheckBoxList"
             ScrollMode="GridScrollMode.Scrollable"
             OnRowContextMenu="OnRowContextMenuClick"
             OnRowDoubleClick="HandleOnRowDoubleClick"
             Width="100%"
             RowHeight="40"
             PageSize="100">
    <GridColumns>
        @*
        
        Other GridColumns

        *@

        @if (Data?.Count() > 0)
        {
            foreach (var property in ((IDictionary<string, object>)Data.FirstOrDefault()).Where(p => AllDomainIdentifiers.Contains(p.Key)))
            {
                var domainModel = (DomainModel)property.Value;
                <GridColumn Field="@($"{domainModel.Name}Field")"
                            FieldType="typeof(bool)"
                            Width="30px"
                            Filterable="false"
                            Groupable="false"
                            Sortable="false"
                            ShowColumnMenu="false"
                            Title="@domainModel.Abbreviation">
                    <HeaderTemplate>
                        <span id="@( $"domainHeader-{domainModel.Id.ToString()}" )" alt="@domainModel.Name">@domainModel.Abbreviation</span>
                        <TelerikTooltip TargetSelector="@( $"#domainHeader-{domainModel.Id.ToString()}" )"
                                        ShowOn="@TooltipShowEvent.Hover"
                                        Position="@TooltipPosition.Top" />
                    </HeaderTemplate>
                    <Template>
                        <div class="d-flex justify-content-center align-items-center">
                            <TelerikCheckBox Value="@HasDomainActivated(context as ExpandoObject, domainModel)"
                                             ValueChanged="@((bool value) => HandleDomainActivationChanged(context as ExpandoObject, domainModel, value))"
                                             Enabled="@(IsAuthorizedForAllDomains() || IsAuthorizedForDomain(domainModel))" />
                        </div>
                    </Template>
                </GridColumn>
            }
        }
    </GridColumns>

</TelerikGrid>

Grid

answered on 12 Nov 2021

1 answer

236 views

Saving and loading state of sub-grids?

We have successfully implemented saving the state of our custom component main grid with browser local storage, using this example.

We have sub-grids in the main grid via the DetailTemplate section, for example:

<TelerikGrid Data="@Data"
             @ref="@GridReference">
    <DetailTemplate>
        @{
            var ctx = context as ExpandoObject;
            <CustomSubgrid Context="@ctx" Property="Expanded" @ref="@SubGrid"></CustomSubgrid >
        }
    </DetailTemplate>

Each page using the custom main grid has a unique state storage key - e.g.:

StateStorageKey="ThisPage_MainDynamicGrid"

Is it possible to do a similar saving and loading of the sub-grids states, if they are dynamically loaded via the DetailTemplate?

Grid

answered on 11 Nov 2021

1 answer

375 views

Grid OnRowExpand blur all other rows, or otherwise focus on the selected row with details

Having sub-grids of related data is very useful, but the interface can be a bit busy (see attached pic). Perhaps a solution would be if all other rows are blurred or otherwise de-emphasised when the expand icon is clicked, using jQuery and CSS, or using the OnRowExpand event.

I'm liking using less jQuery - so the OnRowExpand event is my preferred method; but how would I change the style of all the other rows? Perhaps a better solution is to change the css of the expanded row plus details row below? I don't see how that can be done except using jQuery.

Grid

answered on 11 Nov 2021

0 answers

165 views

TelerikChart in div with class flex-fill not confined to div

I have a div with bootstrap class of d-flex and inside that div I have two additional divs with class of flex-fill. The idea is to have a section on the blazor page I'm developing that contains two TelerikChart objects side by side. My problem is the Charts get generated to be wider then the div. How can I use TelerikChart and contain the chart within the div.

<div class="card-body d-flex flex-fill">
        <div class="flex-fill" id="Savings">
            <TelerikChart>
                        <ChartSeriesItems>
                            <ChartTitle Visible="false"></ChartTitle>
                            <ChartSeries Type="ChartSeriesType.Pie"
                                         Data="@i"
                                         Field="@nameof(extras.ISG.Savings)"
                                         CategoryField="@nameof(extras.ISG.Part)"
                                         ExplodeField="false">
                                <ChartSeriesTooltip Visible="true" Context="item">
                                    <Template>
                                        @((item.DataItem as extras.ISG).Part)
                                        <br />
                                        @((item.DataItem as extras.ISG).TotalTransactions)
                                        <br />
                                        @((item.DataItem as extras.ISG).Savings)
                                    </Template>
                                </ChartSeriesTooltip>                                
                                <ChartLegend Visible="true" Position="ChartLegendPosition.Bottom"></ChartLegend>
                            </ChartSeries>
                        </ChartSeriesItems>
                    </TelerikChart>                
                    </div>
        <div class="flex-fill" id="defferedSummary">
                    <TelerikChart>
                        <ChartSeriesItems>
                            <ChartTitle Visible="false"></ChartTitle>
                            <ChartSeries Type="ChartSeriesType.Pie"
                                         Data="@CdefferedGrouped"
                                         Field="@nameof(extras.dGrouped.Earned)"
                                         CategoryField="@nameof(extras.dGrouped.Partner)"
                                         ExplodeField="false">
                                <ChartSeriesTooltip Visible="true" Context="item">
                                    <Template>
                                        @((item.DataItem as extras.dGrouped).Part)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).TotalTransactions)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).Earned)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).Spent)
                                    </Template>
                                </ChartSeriesTooltip>
                                <ChartSeriesLabels Visible="true" Position="ChartSeriesLabelsPosition.Right"></ChartSeriesLabels>
                                <ChartLegend Visible="true" Position="ChartLegendPosition.Bottom"></ChartLegend>
                            </ChartSeries>
                        </ChartSeriesItems>
                    </TelerikChart>                           
        </div>
    </div>

Charts

asked on 11 Nov 2021

0 answers

1.3K+ views

Long press - Long touch

Is it possible to run another method, if the user presses and holds on a series for lets say 2 or 3 seconds?

Like in WPF: https://www.telerik.com/forums/long-press-on-a-button-c1515a65de7e

If this makes sense.

Regards,
Nikolas

Charts

asked on 11 Nov 2021

1 answer

124 views

Disable editing of task names

Can I turn off editing of task names?
I plan to create a list of tasks with fixed names, but when I click on the name cell, the editing mode is activated.
And in general, is it possible to disable the built-in edit form and override your own by clicking the edit button in the command column?
The proposed editing functionality is not convenient.

Gantt

answered on 11 Nov 2021

0 answers

213 views

Password Confirmation problem

I have pop-up, where try to reset password.

when I first fill in the value of the password field, then password confirmation field and if they do not match, the warning text is displayed correctly, but if I change the password after filling in the password confirmation, the system will not understand that the passwords are different

Correct:

Correct:

Incorrect: After adding symbols in Password field they are not match, but message doesn't display

ValidationTooltip

asked on 11 Nov 2021