Questions on UI for Blazor Forum

3 answers

891 views

Hi,

When I entering the password, the password is stored in chrome browser.

So I need to remove the manage password and I have attached the image below

Please see below code

<EditForm Model="@resetPasswordModel" OnValidSubmit="@SaveChanges" autocomplete="off">
<FluentValidator TValidator="ResetPasswordValidator" />
<p>@Model.Name</p>
<EFormRowGroup LabelText="New Password" Id="Password">
<TelerikTextBox Id="Password" @bind-Value="@resetPasswordModel.Password" Password="true" AutoComplete="off"/>
</EFormRowGroup>
<EFormRowGroup LabelText="Confirm Password" Id="ConfirmPassword">
<TelerikTextBox Id="ConfirmPassword" @bind-Value="@resetPasswordModel.ConfirmPassword" Password="true" AutoComplete="off"/>
</EFormRowGroup>
<EValidationSummary />
<EDialogActions>
<TelerikButton Icon="save" Primary="true" ButtonType="@ButtonType.Submit">Save</TelerikButton>
<TelerikButton Icon="cancel" ButtonType="@ButtonType.Button" OnClick="@CancelClick">Cancel</TelerikButton>
</EDialogActions>
</EditForm>

Could you please advise on this.

Thanks,

Vishnu Vardhanan.

TextBox

answered on 31 Mar 2022

1 answer

639 views

Scroll treeview

Is there a way to have the treeview scroll vertically?

Thanks ... Ed

TreeView

answered on 31 Mar 2022

1 answer

170 views

Blazor Editor insertHTML command Exception

Please see REPL: https://blazorrepl.telerik.com/wcYncXGa24oOJuTr39 or attached sample file.

await Editor.ExecuteAsync(new HtmlCommandArgs("insertHTML", "Hello", true));

Executing the above code by clicking the Insert button in the REPL throws this exception:

Unhandled exception rendering component: _V[e] is not a function
TypeError: _V[e] is not a function
...

Any workarounds?

Thanks!

Editor

updated answer on 31 Mar 2022

1 answer

184 views

TabStrip not removing k-state-active on ActiveTabIndexChanged event

Hello, I am trying to use the TabStrip component but am running into issues. I have tried every combination of demos that are in the documentation, and none seem to function. I have tried it by just using @ref, I've tried just using ActiveTabIndex, and I've tried the below, and none seem to function the same as in the demos. With each way I tried, the previous active tab keeps it's .k-state-active class, and the newly selected tab receives a .k-state-active class. The previously selected tab does not get reset to .k-state-default. I have also tried this not nested within a TelerikGridLayout and it did not make a difference. Any input would be greatly appreciated

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="100%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="10vh"></GridLayoutRow>
        <GridLayoutRow Height="90vh"></GridLayoutRow>
    </GridLayoutRows>
    <GridLayoutItems>
        <GridLayoutItem Column="1" Row="1" Class="m-auto">
            <img src="Images/logo.png" />
        </GridLayoutItem>
        <GridLayoutItem Column="1" Row="2">
            <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="BaseDashboardTabStrip" ActiveTabIndex="@currentTab" ActiveTabIndexChanged="@TabChangedHandler">
                <TabStripTab Title="Tab 1">
                </TabStripTab>
                <TabStripTab Title="Tab 2">
                </TabStripTab>
                <TabStripTab Title="Tab 3">
                </TabStripTab>
                <TabStripTab Title="Tab 4">
                </TabStripTab>
                <TabStripTab Title="Tab 5">
                </TabStripTab>
                <TabStripTab Title="Tab 6">
                </TabStripTab>
            </TelerikTabStrip>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>
@code {
    TelerikTabStrip BaseDashboardTabStrip;
    int currentTab { get; set; } = 0;
    void TabChangedHandler(int newIndex)
    {
        currentTab = newIndex;
        StateHasChanged();
    }
}

TabStrip

answered on 30 Mar 2022

1 answer

1.4K+ views

NumericTextBox - Default to blank/null

I am attempting to utilize TelerikNumericTextBox, rather than TelerikTextBox, in order to take advantage of the Min, Max, Format, and other features available. However, upon making the switch I am no longer able to display a blank/null value in the textbox.

I don't see any mention of this in the TelerikNumericTextBox docs (https://docs.telerik.com/blazor-ui/components/numerictextbox/overview) and I assume this behavior is by design. Is there a way to allow a TelerikNumericTextBox to have a blank/null value? Perhaps a TelerikMaskedTextBox would work?

NumericTextBox

answered on 29 Mar 2022

1 answer

352 views

disable underlying component

Hello,

I have a parent component that holds a pop up window. When the window pops up (is visible) then the parent component becomes disabled (no user interaction with the parent - underlying component - is possible).

Within this window, I have another Dialog window that will pop up upon closing the window, if a certain condition is not met.

When this Dialog pops up, the underlying component (which in this case is the pop up window) doesn't become disabled. Instead, the effect will take place again on the parent component.

How would I make the 'disable' effect take place on the window located in the parent component, and not on the parent component, upon the popping up of the Dialog?

Thank you.

Window

answered on 29 Mar 2022

1 answer

759 views

Error with Multiselect looking for property "ChildContent" after component upgrade.

I'm getting the following error after upgrading from 2.x to 3.x of the Blazor library.

Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikMultiSelect` 
does not have a property matching the name 'ChildContent'.

This happens when this control attempts to load.

 <FormItem Field="@nameof(NoteVM.AssignedToUser)">
     <Template>
         <TelerikMultiSelect Data="Users"
                             AutoClose="false"
                             Placeholder="Select Assign To Users"
                             Width="100%"
                             Filterable="true"
                             TextField="@nameof(UserInfoVM.UserName)"
                             ValueField="@nameof(UserInfoVM.UserName)"
                             @bind-Value="@AssignedToUsers">
                      <MultiSelectPopupSettings>
                      <DropDownListPopupSettings Height="200px" />
                      </MultiSelectPopupSettings>
                      </TelerikMultiSelect>
     </Template>
 </FormItem>

MultiSelect

answered on 29 Mar 2022

1 answer

289 views

How to check form dirty state in <EditForm>?

I am using EditForm in one of my module. Based on form state viz., dirty, touched I want to perform some operations, how can I get those events with EditForm ?

Form

answered on 28 Mar 2022

17 answers

622 views

Razor Components

Is there documentation covering using UI for Blazor as Razor Components mixed within Razor Pages and MVC? Currently the focus of the docs seem to only cover Blazor only type apps?

Admin edit: Here is a link to an example: https://github.com/telerik/blazor-ui/tree/master/common/razor-components

General Discussions

updated answer on 28 Mar 2022

1 answer

396 views

Multiselect reset filter

I have the following set up.

 <TelerikMultiSelect Data="@lstXfers" @ref="@Xrefs"
       @bind-Value="@lstSelectedXfers"
         TextField="FermentationName" ValueField="FermentationXferId"
          Width="250px" ClearButton="true" AutoClose="false"
          OnBlur="OnXferBlur"
          OnRead="OnXferRead"
           Filterable = "true" FilterOperator="StringFilterOperator.Contains"
       />

I am doing custom filter to allow the user to enter a filter and, when the control loses focus, if the typed in filter is an exact match to one of the available items, then the typed in item will be added.

Everything works great, with one exception. I can't seem to clear the Request.Filters Telerik.DataSource.FilterDescriptor collection.

private FilterDescriptor filter;         
protected void OnXferRead(MultiSelectReadEventArgs args)
        {
            if (args.Request.Filters.Count() > 0)
            { 
                filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;

                var q1 = from a in db.Fermentations
                         where a.IsActive == true && a.SiteId == appData.SiteId
                         select new FermentationXferModel()
                         {
                             FermentationName = a.FermentationName,
                             FermentationXferId = a.FermentationId
                         };
                q1 = q1.OrderBy(a => a.FermentationName).Distinct();

                lstXfers = q1.ToList();
                args.Data = lstXfers;
                var lstSelectedItemsToExclude = (from a in lstXfers
                                             where lstSelectedXfers.Contains(a.FermentationXferId)
                                             select a).ToList();
                var filterItems = (from a in lstXfers
                             where !a.FermentationName.ToLower().StartsWith(filter.Value.ToString().ToLower())
                             select a).Except(lstSelectedItemsToExclude).ToList();
                args.Data = (from a in (List<FermentationXferModel>)args.Data select a).Except(filterItems);
              
            }
            else
                args.Data = lstXfers;

        }
        

public void OnXferBlur()
        {
            if (filter != null)
            {
                FermentationXferModel filterEntry;
                filterEntry = (from a in lstXfers
                               where a.FermentationName.ToLower() ==
                               filter.Value.ToString().ToLower()
                               select a).FirstOrDefault();
                if (filterEntry != null)
                {

                    // mark it as selected
                    filterEntry.Selected = true;
                    // create a new list to force a refresh.
                    // this thing doesn't support observablecollections.
                    List<int> lst = new List<int>(lstSelectedXfers);
                    // add the matching entry
                    lst.Add(filterEntry.FermentationXferId);
                    //copy the list to the bound variable
                    lstSelectedXfers = new List<int>(lst);
                    // Clean up the typed in filter
                    Task.Run(async () => await jsRuntime.InvokeVoidAsync("clearMultiselectInput"));
                }
                else
                {
                    var q1 = from a in db.Fermentations
                             where a.IsActive == true && a.SiteId == appData.SiteId
                             select new FermentationXferModel()
                             {
                                 FermentationName = a.FermentationName,
                                 FermentationXferId = a.FermentationId
                             };
                    q1 = q1.OrderBy(a => a.FermentationName).Distinct();

                    lstXfers = q1.ToList();
                    Xrefs.Data = lstXfers;
                }
            }

        }

And teh js:

function clearMultiselectInput()
{
var inputs = document.querySelectorAll(".k-multiselect .k-input-inner");
inputs.forEach(e => e.value = "")
}

Ideally, in the OnBlur handler if the private FilterDescriptor filter property is not null, then I want to clear it.

How???

Thanks... Ed

MultiSelect

answered on 27 Mar 2022