I have a TelerikGrid with paging enabled. The pager on the left hand side displays the page numbers as buttons, and on the right hand side displays the current items being displayed and the total number of items. The problem is that the right-hand side '1 - 1000 of 440000000' does not format the numbers, and for a grid with millions of possible rows reading the exact numbers is difficult.

So I wrote a little javascript to manipulate the dom and format these numbers. In particular I query the document for 'span.k-pager-info' and manipulate the innerText property. This works fine until I filter my grid, at which point it re-fetches data from the db BUT does NOT update that span with the new filtered innerText. In fact, any manipulation with javascript of the 'span.k-page-info' element causes that element to no longer be updated upon filtering data. Why? Is there any other way to format the numbers in the pager so that they display more clearly (ie. 44,000,000)?

Much thanks to all.

I have the following page:

@page "/test"
@using System.Collections.ObjectModel

<TelerikToolBar Class="toolbar-size" Adaptive="false">    
    <ToolBarButton Icon="@SvgIcon.FileAdd" OnClick="@OnAdd">Add</ToolBarButton>
</TelerikToolBar>

<TelerikSplitter Height="500px">
    <SplitterPanes>
        <SplitterPane Size="20%" Collapsible="true">
            <TelerikTreeView Data="@Items" @bind-CheckedItems="@CheckedItems"                             
                             CheckBoxMode="TreeViewCheckBoxMode.Multiple">
                <TreeViewBindings>
                    <TreeViewBinding ParentIdField="ParentIdValue"></TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
        </SplitterPane>
        <SplitterPane Collapsible="true">
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public ISvgIcon Icon { get; set; }
    }

    public ObservableCollection<TreeItem> Items { get; set; } = new ObservableCollection<TreeItem>();
    public IEnumerable<object> CheckedItems { get; set; } = new List<object>();

    private int counter;

    private void OnAdd()
    {
        this.Items.Add(new TreeItem { Id = counter, Text = $"test {counter}" });
        counter++;
    }
}

If I add some items with the add button, then check some items, and then add some more items, the check state seems to be lost.

However, if I collapse and expand the split panel, the items get checked again.

Is this a bug, or what am I doing wrong?

Here is my sample. 

https://blazorrepl.telerik.com/wIYIwokW39rcHMFE31

Can you help please?

Is it possible to have the panel bar expand or collapsed based on a property (bool IsExpanded) for the list of items in the data property of the panel bar, instead of as a separate list of items bound to the ExpandedItems list of objects?

I have a separate component with expand and collapse buttons.  I have a global list of objects that are in a service.  The Data property of the panel bar is set to this list of global items.  When the Expand All button of the separate component is clicked, it sends a message to the application service to set an Expand for all items in the global list that is bound to the panel bar.  The service sends out a notifystatechanged event.  The problem is I do not want to maintain a completely separate list of objects just for which ones are in the ExpandedItems list.  Would be nice to simply bind the expanded to a property of the global object thereby having the statechanged change the expanding and collapsing of the items in the panel bar.

Is this possible?  Haven't seen anything in documentation that seems to allow this.

Right now it means that my application wide service needs to have a completely separate list of objects for the expanded items in this one panel bar component, so it can add and remove objects and then notifystatechanged back to the panel bar component.

If not, is there any other way of doing this to have the panel bar get notified so it can then add and remove the expanded items object list?

Please advise

Thanks

I need to format and highlight xml and json in a view. I can not find a component within Blazor components. In other packages like WinForm there are solutions for displaying code. Any way I'm able to do this without clientside javascript solutions (like PrismJS)?

In case there is no component in the Telerik family I can use in Blazor, does anyone have a recommended setup to implement the functionality. A requirement is support for dark/light theming.

Thanks for any insights.

I have the below code that I was  hoping would show the hint above the {getting Started] drawer item when user puts mouse over it.

But to no hope. :( didnt work.

What am I doing wrong?