Can't find css class for hide this border
Border displayed after click on tab content.

Hi.

I want to use the TelerikPanelBar with two different Datasources. For the Header, I have a List "Articles" and for the Content I have an object "ArticleDetails", that will be loaded "lazy" if someone opens the accordion.

I want to use also the HeaderTemplate and ContentTemplate Feature.

The Samples show only PanelBarItem within a list of PanelBarItems, but I need a total different Object in the Content Area. The Idea is to load a list of Articles, and then when a user clicks on a panel the Details of the Article will be loaded and displayed.

Thanks and Regards

Dominik

After updating to v3.6 I copied your demo code from here and pasted it into my blazor wasm project and I'm getting the error below. What do I need to do to resolve this?

Unhandled exception rendering component: Could not find 'TelerikBlazor.initPdfViewer' ('initPdfViewer' was undefined).

Hello,

I need a custom sorting method for the TelerikGrid. So according to the docs, I have to use the OnRead Event. Is there a way not the implement all filtering by myself and can I use the Telerik Filtering with the OnRead and only implement my custom sorting?

Thanks

Holger

Hi,

could you help me find TelerikMessages.sk-SK.resx. I need it for translation my app into Slovak language.

Thanks for help

Peter

In my code I'm setting the ExpandedItems and SelectedItems (single item). I have my TreeView in a scrollable div. Once the TreeView has expanded, I want to scroll the selection into view. In javascript I'm getting the DOM element with the aria-selected="true" tag and calling "scrollIntoView". 

The problem is, that tag doesn't exist until after the TreeView has expanded.  There doesn't seem to be any event tied to after the TreeView has expanded. At the OnAfterRenderAsync event, the TreeView hasn't expanded yet.

I can invoke the javascript with a button and it works fine - once the TreeView has expanded. But, I don't want the user to have to click a button to view the selection. Is there a better way to do this?

I would like to use this control but I am not getting very far. Sad!

The loading does not appear! and my app looks like tis doing nothing for a minute or so.

Then the grid with the data appears.

HOw do I set this up to have the loader appear before the data is done and then disappear when the grid is done?

My razor page looks like this:

<PageTitle>SodaTools</PageTitle>

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="10%"></GridLayoutColumn>
        <GridLayoutColumn Width="5%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="23%"></GridLayoutRow>
        <GridLayoutRow Height="1%"></GridLayoutRow>
        <GridLayoutRow Height="75%"></GridLayoutRow>
        <GridLayoutRow Height="1%"></GridLayoutRow>
    </GridLayoutRows>
    <GridLayoutItems>
        <GridLayoutItem Column="2" Row="1">
            <div hidden="@blnHideMe">
                <b>Message:</b>
            </div>
        </GridLayoutItem>
        <GridLayoutItem Column="3" Row="1" ColumnSpan="9">
            <div hidden="@blnHideMe" style="align-content:center;background-color:yellow">
                @* <TelerikTextBox @bind-Value="@strAppMsg" Id="AppMsg" />*@
                <p style="white-space: pre-line">@strAppMsg</p>
            </div>
        </GridLayoutItem>
        <GridLayoutItem Column="2" Row="2">
        
        </GridLayoutItem>
        <GridLayoutItem Column="3" Row="2">
        
        </GridLayoutItem>
        <GridLayoutItem Column="10" Row="2">
        
        </GridLayoutItem>    
        <GridLayoutItem Column="2" Row="3" ColumnSpan="10">
            <TelerikLoaderContainer Visible="@( @GridData == null )" Text="Please wait..." />

            <div hidden="@blnHideGrid">                    
                <TelerikGrid Data="@GridData" AutoGenerateColumns="true"
                             Pageable="true"
                             Sortable="true"
                             FilterMode="@GridFilterMode.FilterRow"
                             Class="custom-row-colors">
                    <GridToolBar>
                        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
                        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" /> Export All Pages</label>
                    </GridToolBar>
                    <GridExport>
                        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@OnBeforeExcelExport" />
                    </GridExport>                
                </TelerikGrid>
            </div>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>

Codebehind looks like this:

private List<LoadStatsResult> GridData { get; set; }
   
        protected override async Task OnInitializedAsync()
        {
            base.OnInitialized();
            strAppMsg = "I am in Load Stats!";
            getData();       
        }

 private async void getData()
        {
            strAppMsg = "This be an app msg: You clicked my Load Stats Button!";
            setAppMsg();

            // how do I connect to my DAS cls
            List<LoadStatsResult> LoadStatsResults = new List<LoadStatsResult>();
            LoadStatsResults = clsDataAccessService.doLoadStats(GlobalStuff.msDBEnvir);

            GridData = LoadStatsResults;

            if (GridData.Count > 0)
            {
                strAppMsg = "How to Use:" + Environment.NewLine
                            + "1) Click the [Export to Excel] button to export displayed rows." + Environment.NewLine
                            + "2) To export all the pages, first click the [Export All Pages] button. Then the [Export to Excel] button." + Environment.NewLine
                            + "3) Filter a column by typing value into textbox on left-handside of the beaker icons." + Environment.NewLine
                            + "4) Filter rules can be gotten by clicking on the full beaker icon. A drop down list of available rules will appear." + Environment.NewLine
                            + "5) Filter clearing is done by clicking on the crossed out beaker icon." + Environment.NewLine
                            + "6) Paging is done by clicking on the Left and right paging icons at the bottom of the grid.";
            }
            else
            {
                strAppMsg = "Sorry nothing found! ";
            };       
        }

My telerik grid will occasionally place <GridColumn> components out of order from what I expect from the code. Is there a way to enforce the order that the columns will be placed on the grid? I've attached some code below and as you can see the grid columns "Total Pieces" and "Total % Total" should be the last two columns but for some users they will load in the middle of the grid.

<TelerikGrid 
                    Data="@myGridData" 
                    @ref="@Grid"
                    Width="100%"
                    Height="100%"
                    Groupable="true"
                    Pageable="false" 
                    Sortable="true"
                    EnableLoaderContainer="@ShowLoading"
                    FilterMode="@GridFilterMode.FilterMenu">
                    <GridColumns>
                        <GridColumn Field="field1" Width="110px" FieldType="@typeof(string)" Title="Field 1"/>
                        <GridColumn Field="field2" Width="80px" FieldType="@typeof(int)" Title="Field 2"/>
                        <GridColumn Field="field3" Width="130px" FieldType="@typeof(string)" Title="Field 3"/>
                        @if (UnitNumberColumnNames is not null && UnitNumberColumnNames.Any())
                        {
                            foreach (var lengthColumnName in UnitNumberColumnNames)
                            {
                                <GridColumn Width="90px" Field="@lengthColumnName" FieldType="@typeof(decimal)" Title="@lengthColumnName"/>
                            }    
                        }
                        <GridColumn Field="Total Pieces" FieldType="@typeof(decimal)" Title="Total Pieces"/>
                        <GridColumn Field="Total % Total" FieldType="@typeof(decimal)" Title="Total % Total"/>
                    </GridColumns>
                </TelerikGrid>

I would like to change the buttons to display the filter menu in the column headings since it will be unfamiliar to our users.

Is it possible to replace the filter icon that looks like a funnel with the word "Filter"?

Thanks