Questions on UI for Blazor Forum

0 answers

200 views

HI i want defin custom filter menu for my Grid Column and this is my Grid
(

<GridColumn Field="MoneyTransferCode" FieldType="@(typeof(int))" Title="نوع انتقال وجه" Width="200px" Groupable="true">
    <FilterMenuTemplate>
        @{
            <div class="filter-values-container">
                @foreach (var country in MoneyTransferCodeList.Select(x => x.PersianDisplayName))
                {
                    <div>
                        <TelerikCheckBox Value="@(GetFilterValues(context.FilterDescriptor).Contains(country))"
                                         ValueChanged="@((bool value) => ColumnValueChanged(value, country, nameof(TermOfTransactionDto.MoneyTransferCode), context.FilterDescriptor))"
                                         Id="@($"country_{country}")">
                        </TelerikCheckBox>
                        <label for="@($"country_{country}")">
                            @country
                        </label>
                    </div>
                }
            </div>
        }
    </FilterMenuTemplate>
    
    
    

    
    <GroupHeaderTemplate>
        نوع انتقال وجه: @Data.Where(x => x.MoneyTransferCode == int.Parse(context.Value.ToString())).Select(x => x.MoneyTransferCodeName).FirstOrDefault()
    </GroupHeaderTemplate>
    <Template>
        @{
            var item = context as TermOfTransactionDto;
            @item.MoneyTransferCodeName
        }
    </Template>
    <EditorTemplate>
        @{
            var item = context as TermOfTransactionDto;
            <TelerikDropDownList Data="@MoneyTransferCodeList"
                                 ValueField="Value"
                                 TextField="PersianDisplayName"
                                 Width="100%"
                                 @bind-Value="@item.MoneyTransferCode"/>
        }
    </EditorTemplate>
</GridColumn>

)
and this is my function I need
(

public void ColumnValueChanged(bool value, string itemValue, string columnName, CompositeFilterDescriptor filterDescriptor)
{
    var filter = filterDescriptor.FilterDescriptors.FirstOrDefault(f => (f as FilterDescriptor).Value?.ToString() == itemValue);

    int itemValueNumber = MoneyTransferCodeList.First(x => x.PersianDisplayName == itemValue).Value;
    
    filterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;

    if (value && filter == null)
    {
        // var filterDescriptor1 = new FilterDescriptor(columnName, FilterOperator.IsEqualTo, itemValue);
        // filterDescriptor.FilterDescriptors.Add(filterDescriptor1);
        filterDescriptor.FilterDescriptors.Add(new FilterDescriptor(columnName, FilterOperator.IsEqualTo, itemValueNumber));
        
        
    }
    else if (!value && filter != null)
    {
        filterDescriptor.FilterDescriptors.Remove(filter);
    }
}

)
and when i use this filter its truly work but i cant see the item that i select in front end , also I see a sample like this in telerik docs but its for string values and in this case i want use for int values pleas help me.

Grid

asked on 06 Jan 2024

1 answer

405 views

Show children when search/filter TreeList matches parent

How can I get the TreelList to show all children of parents who match a filter (or searchbox) condition, and keep the expandability of filtered nodes, even if children don't match the filter condition? Currently children that don't match the search are hidden and the parents become non-expandable.

For example, if I have a tree with an item "Fruit" with children "Apple", "Orange", "Grape", I would like "Apple", "Orange" and "Grape" to still show if I search for "Fruit" in the search box. If the "Fruit" node was not expanded, I want it to stay expandable.

I am using the TreeList with load data on demand. I am currently partially achieving the desired result by adding "dummy" child nodes that match the parent so the parent stays expandable on search, then removing the dummy nodes on expand and replacing with the real child items. I have also tried using hidden fields. It seems like the TreeList should have a built in option to support this use case.

TreeList

answered on 05 Jan 2024

1 answer

694 views

TelerikEditor allowing style tags

One of the most basic features, and a reason why many would want to use an HTML editor, is to use style tags to style the content of the HTML editor.

However, it appears if you use the iframe, you cannot do this. The whole point of an iframe is to stop scope creep both ways, which means style tags should work without issue. Although they seem to be ignored in the editor, and HTML is placed inside an <textarea> outside of the iframe, making the style tag affect the entire web app.

And if you use a div instead of an iframe, you get the scope creep.

Seriously.... why is this not implemented????

Is there a way to make the iframe honor the style tags?

Editor

updated answer on 04 Jan 2024

1 answer

210 views

Grid - Horizontal scrolling, bar not visible on Opera.

Hello,

I have problem with horizontal scrollbar on grid - it works ok on all browser except Opera. It seems that it exists (when i press and drag mouse on scroll area it moves grid) but is invisible.

The same problem occurs even on example:

https://demos.telerik.com/blazor-ui/grid/scrolling

That's how it looks on Opera:

I have the latest version of Opera: 106.0.4998.19 (chromium version:120.0.6099.130). I've also check on version 105.0.4970.60.

Is there anything that i can do with that?

Thanks for help.

Grid

answered on 03 Jan 2024

1 answer

741 views

Grid 3 dot button for grid column edit or remove button

For mobile view in column item i want to add the a three dot menu.
On click of that button there will be a popup with two buttons (Like image)
I tried a number of things but not able to figure out which component will be helpful in this condition.

Any help will be appreciated

(Kendo Blazor)

AnimationContainer

DropDownList

Grid

answered on 03 Jan 2024

1 answer

597 views

Phone number on country code Kendo Blazor

I need a country code selector prepended with mobile number in kendo Blazor
But not find any component that can be used.

Any help on this will be appreciated .

DropDownButton

DropDownList

answered on 03 Jan 2024

1 answer

335 views

ErrorBoundary rendered two times

Hi, I'm trying to implement global error handling in my blazor application using Telerik ErrorBoundary. Implementation is very simple in the MainLayout.razor I have this code

<ErrorBoundary @ref="errorBoundary">
						<ChildContent>
							@Body
						</ChildContent>
						<ErrorContent Context="ex">
							@{
								OpenNotification("Unhandled exception ocurred. Please try again later.", ThemeColor.Error, CloseAfter.Success);
								// TODO: this code is called twice!

							}
						</ErrorContent>
					</ErrorBoundary>

Open Notification it's a private method to show error message

private void OpenNotification(string text, string theme, int closeAfter)
	{
		Notification.Instance.Show(new NotificationModel
			{
				Text = text,
				ThemeColor = theme,
				CloseAfter = closeAfter
			});
	}

so when error happens notification is shown 2 times, I set console log in this code and it's logging two times execution.

Any idea what could be the problem?

Thanks

General Discussions

answered on 02 Jan 2024

1 answer

114 views

[Solved] TreeList CheckParent option

Any chance of having the CheckParents functionality of the TreeView component in the TreeList component?

KR

TreeList

updated answer on 02 Jan 2024

1 answer

224 views

[Solved] Item per page not shown on pager dropdown.

I have tried the following code on the official page of the Telerik pager

<TelerikPager Total="@Games.Count"
              ButtonCount="5"
              PageSize=@PageSize
              Page=@Page
              PageSizes="@PageSizesList">
</TelerikPager>
@{
    // take and render the relevant data portion based on the pager info
    var pageData = Games.Skip((Page - 1) * PageSize).Take(PageSize).ToList();
    @foreach (Game game in pageData)
    {
        <div style="display: inline-block;border: solid;padding: 10px;margin: 10px">
            @game.GameName
        </div>
    }
}
@code {
    public List<int?> PageSizesList { get; set; } = new() { 10, 20, 30 };
    public int PageSize { get; set; } = 20;
    public int Page { get; set; } = 1;
    public List<Game> Games { get; set; }
    protected override void OnInitialized()
    {
        Games = new List<Game>();
        for (int i = 1; i <= 20; i++)
        {
            Games.Add(new Game()
                {
                    GameId = i,
                    GameName = $"Game {i}"
                });
        }
    }
    public class Game
    {
        public int GameId { get; set; }
        public string GameName { get; set; }
    }
}
The output is as follows:
 
Image 1. Output
Image 2: Items per page show all options
I've configured a PageSize of 20 with PageSizes as {5, 6, 7, 8, 9, 10, 20}, and intentionally excluded null to avoid an "All" 
option in the items-per-page dropdown.
However, when the PageSize matches the total count of data (20 in this instance), the dropdown doesn't automatically 
select the matching option (20).
In the second image, all dropdown options are visible, but the appropriate option (20) isn't auto-selected.
What is the solution to this issue?

Pager

answered on 01 Jan 2024

1 answer

191 views

When Grid is InLine edit mode, get event when user leaves cell

Is it possible to have TelerikGrid for Blazor configured so when grid is using inline edit, as user tabs to next cell an event is triggered so that manual updates can be done to the row data, as simplest example, cells are quantity, unitcost, gst, total so that as unitcost is changed / exited the gst is calculated as quantity*unitcost*0.10 and total is calculated as quantity*unitcost+gst

I've been searching for hours and I'm starting to arrive at conclusion it is not easily done.

Cheers

Steve Wark

Grid

answered on 01 Jan 2024