Questions on UI for Blazor Forum

1 answer

1.0K+ views

Default time to midnight in DateTimePicker.

Hi all,

I am using the DateTimePicker with a nullable property

public DateTime? EndDate { get; set; }

When the user selects the picker, I would like the time defaulted to midnight as most times we use midnight, so it's a mission for users to always have to set the time to midnight when applying a date just a date. The time is there for the odd times we do want to have EndDate with a time - but's it is not the norm.

Is there a way to tell the component to default to midnight?

DateTimePicker

answered on 09 Apr 2022

1 answer

229 views

dropdownlist span element contains title="null"

When using the TelerikDropDownList component in Blazor, the html generated sometimes contains title="null" in the outer span element. This then shows up as a tooltip of null when hovering the dropdownlist control on the rendered page.

What could be causing this and is there a way of suppressing it?

Thank you.

DropDownList

answered on 08 Apr 2022

1 answer

244 views

Grid: OnRowClicked is fired on load

Hello,

I have a TelerikGrid like this:

<TelerikGrid @ref="gridRef"
Data="@MyData" 
Pageable="@pageable" 
PageSize="15"
Sortable="true"
SelectionMode="GridSelectionMode.Single"
SelectedItemsChanged="@((IEnumerable<MyDataViewModel> itemList) => OnRowClick(itemList))"
SelectedItems="selectedRow"
OnRowDoubleClick="@OnRowDbClick"
OnRowContextMenu="@Menu"
OnStateInit="@((GridStateEventArgs<MyDataViewModel> args) => OnStateInitHandler(args))">

Works fine.

But on page load, my OnRowClick-method will be fired with an empty [] as parameter.

Is that working correctly?

In my case, I can make a workaround for that, but maybe that is not the designed behaviour? :-)

Runs on .net6.0.3. Testet on Firefox on Windows10. Telerik.UI.for.Blazor 3.1.0

Grid

answered on 07 Apr 2022

1 answer

308 views

[Solved] What is the best way to add a dropshadow to the Card component?

Something like this. Is it simply to wrap the card in a <div> and use css?

Card

answered on 07 Apr 2022

1 answer

1.0K+ views

How to set dynamic validations for Form fields ?

I am working on flow, where based on users selection in dropdown, I want to update the validations of TextBox field.
Is there any way to do that ?
Becz at start we are creating model and specifying all specific validations, but now how we can apply validations based on users selection.

answered on 06 Apr 2022

1 answer

441 views

Access AggregateResults in GroupFooterTemplate like it is possible in FooterTemplate

Hi,

I need to calculate a grouping value by myself as the standard GridAggregateTypes are not suitable in my case (I need to calculate a percentage based on the aggregated values of other columns in the same grouping).

This is possible for the GridFooterTemplate as the GridGroupTemplateContext provides the AggregateResults from which I can calculate the value to be shown.

However, the GridGroupTemplateContext provided by the GroupFooterTemplate does not provide such a property.

Any kind of solution is helpful, even if it is a dirty workaround.

Thank you very much and best regards - Richard

Grid

answered on 06 Apr 2022

1 answer

179 views

Why doesn't NumericTextBox support System.Byte?

Short and to the point: Why doesn't NumericTextBox support System.Byte?

NumericTextBox

answered on 05 Apr 2022

1 answer

329 views

TreeView with hierarchical data and ObservableCollections: Add/Remove at Levels > 0 not notified

I have a TreeView with 2 Levels (I changed your RefreshData example to work with 2 levels and ObservableCollections):

<h3>TreeView</h3>
Hierarchical data hold collections of the child items

<TelerikButton OnClick="@AddRoot">Add root</TelerikButton>
<TelerikButton OnClick="@AddItem">Add child</TelerikButton>
<TelerikButton OnClick="@RemoveItem">Remove child</TelerikButton>


<TelerikTreeView Data="@HierarchicalData" @bind-ExpandedItems="@ExpandedItems">
    <TreeViewBindings>
        <TreeViewBinding TextField="Category" ItemsField="Products" />
        <TreeViewBinding Level="1" TextField="ProductName" />
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public IList<ProductCategoryItem> HierarchicalData { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();

    void AddItem()
    {
        var firstItem = HierarchicalData.First();
        firstItem.Products.Add(
            new ProductItem
                {
                    ProductName = "New Item"
                });

        StateHasChanged();
    }

    void AddRoot()
    {
        HierarchicalData.Add(new ProductCategoryItem { Category = "New Category" });

        StateHasChanged();
    }

    void RemoveItem()
    {
        var firstItem = HierarchicalData.First();
        if (firstItem.Products.Count > 0)
        {
            firstItem.Products.RemoveAt(firstItem.Products
                 .IndexOf(firstItem.Products.Last()));

            StateHasChanged();
        }
    }


    public class ProductCategoryItem
    {
        public string Category { get; set; }
        public IList<ProductItem> Products { get; set; }
    }

    public class ProductItem
    {
        public string ProductName { get; set; }
    }


    protected override void OnInitialized()
    {
        LoadHierarchical();
        ExpandedItems = HierarchicalData.Where(x => x.Products != null && x.Products.Any()).ToList();
    }

    private void LoadHierarchical()
    {
        var roots = new ObservableCollection<ProductCategoryItem>();

        var firstCategoryProducts = new ObservableCollection<ProductItem>()
        {
            new ProductItem { ProductName= "Category 1 - Product 1" },
            new ProductItem { ProductName= "Category 1 - Product 2" }
        };

        roots.Add(new ProductCategoryItem
            {
                Category = "Category 1",
                Products = firstCategoryProducts // this is how child items are provided

            });

        roots.Add(new ProductCategoryItem
            {
                Category = "Category 2" // we will set no other properties and it will not have children, nor will it be expanded
            });

        HierarchicalData = roots;
    }
}

If I "add child" then the TreeView is not updated, Even after collapsing and re-expanding the root node, the newly added child item is not shown.

Notification works only on the first level ("add root") which also updates the child items.

TreeView

answered on 05 Apr 2022

4 answers

851 views

[Solved] DebounceDelay property cause unit test to fail

I'm integrating bUnit to add unit test to blazor.

Now i have a form with some TelerikTextBox and other components with DataAnnotationValidation.

Example:

<TelerikTextBox Id="txtUserName" @bind-Value="@EditingItem.UserName"></TelerikTextBox>

When i set the input value from bUnit with cut.Find("#txtUserName").Input("UnitTest_User"); the binding property EditingItem.UserName is not updated successully due to default value of DebounceDelay property who is set to 150ms.

This cause the subsequent validation of the form to fail.

I have open an issue on bUnit project with some sample code, thinking originally who was a bUnit issue, but we found who it's related to telerik components:

https://github.com/bUnit-dev/bUnit/discussions/651

Note iIf i set the property DebounceDelay="0" on the TelerikTextBox the binding and validation work fine, but it require to change all the components to work with tests.

I think we need a settings from telerik blazor components who can allow reset DebounceDelay for all components, before run unit test.

TextBox

answered on 04 Apr 2022

1 answer

307 views

InCell Editing with a checkbox

I have a checkbox in a grid (Telerik Grid for Blazor). When I click the checkbox (using incell editing) the value changes however it does not save to the database and if I leave the page and come back the data is back to the old values.

This is the code for the grid:

                        <TelerikGrid Class="custom-icons" Data="@OfficesList" 
                                Reorderable = "true"
                                EditMode = "@GridEditMode.Incell"  
                                Sortable = "true"
                                Pageable = "true"
                                SelectionMode = "GridSelectionMode.Multiple"
                                OnUpdate = "@UpdateItem"                                 
                                @ref="OfficeListGrid"  
                                @bind-SelectedItems="@SelectedItems">
                            <DetailTemplate Context="office">
                                <Incumbents Office="@office"></Incumbents>
                            </DetailTemplate>                            
                            <GridColumns>
                                 <GridCommandColumn Context="OfficeCommandsContext">
                                    <GridCommandButton Command="Edit" Class="btn btn-sm btn-primary" Icon="edit">Edit</GridCommandButton>
                                 </GridCommandColumn>
                                <GridColumn Field="@nameof(GetOfficesResult.OfficeName)" Title="Office" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.OfficeSeqNum)" Title="Office Sequence #"Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsVacant)" Title="Is Vacant" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.IsPrimaryPartisan)" Title="Is Primary Partisan" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsPrimaryNonPartisan)" Title="Is Primary Non Partisan" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.PrimaryDistrictType)" Title="Primary Voting District Type" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.PrimaryDistrictCode)" Title="Primary Voting District" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsGeneral)" Title="Is General Ballot" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.GeneralDistrictType)" Title="General Voting District Type" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.GeneralDistrictCode)" Title="General Voting District" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.CanFileAgain)" Title="Can File Again?" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.TermLength)" Title="Term Length" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingDistrictType)" Title="General Voting District Type" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingDistrictCode)" Title="General Voting District" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.SalaryType)" Title="Salary Type" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.Salary)" Title="Salary" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingFee)" Title="Filing Fee" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.NextElection)" Title="Next Election" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.Notes)" Title="Notes" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FederalOnly)" Title="Is Federal Only"  />
                            </GridColumns>
                        </TelerikGrid>

This is the code behind for the Update Item:

        public async Task UpdateItem(GridCommandEventArgs args)
        {
            var currState = OfficeListGrid.GetState();

            GetOfficesResult offices = (GetOfficesResult)args.Item;

            ////Reset any current editing
            currState.EditField = null;
            currState.OriginalEditItem = null;

            //Reset any current insertion 
            currState.InsertedItem = null;

            //Add the item to edit to the state
            var target = OfficesList.FirstOrDefault(o => o.OfficeID == offices.OfficeID);

            if (target != null)
            {
                target.OfficeID = offices.OfficeID;
                target.OfficeName = offices.OfficeName;
                target.FilingDistrictCode = offices.FilingDistrictCode;
                target.FilingDistrictType = offices.FilingDistrictType;
                target.PrimaryDistrictCode = offices.PrimaryDistrictCode;
                target.PrimaryDistrictType = offices.PrimaryDistrictType;
                target.GeneralDistrictCode = offices.GeneralDistrictCode;
                target.GeneralDistrictType = offices.GeneralDistrictType;
                target.IsVacant = offices.IsVacant;
                target.IsPrimaryPartisan = offices.IsPrimaryPartisan;
                target.IsPrimaryNonPartisan = offices.IsPrimaryNonPartisan;
                target.IsGeneral = offices.IsGeneral;
                target.OfficeSeqNum = offices.OfficeSeqNum;
                target.CanFileAgain = offices.CanFileAgain;
                target.TermLength = offices.TermLength;
                target.SalaryType = offices.SalaryType;
                target.Salary = offices.Salary;
                target.FilingFee = offices.FilingFee;
                target.NextElection = offices.NextElection;
                target.Notes = offices.Notes;
                target.FederalOnly = offices.FederalOnly;
            }



            offices = args.Item as GetOfficesResult;

            GetOfficesResult originalItem = OfficesList.Where(itm => itm.OfficeID == offices.OfficeID).FirstOrDefault();
            GetOfficesResult itemToEdit = GetOfficesResult.GetClonedInstance(originalItem);


            await OfficeListGrid.SetState(currState);
            SelectedItems = OfficesList;

            AddToSelectedCollection(itemToEdit);


            //Use the state to remove the edited item and close the editor
            //currState.EditField = null;
            //currState.OriginalEditItem = null;
            await OfficeListGrid.SetState(currState);
            await RebindGrid();
        }

I am not sure why it doesn't save

Thank you in advance

Max

Grid

answered on 04 Apr 2022