Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initPager' ('TelerikBlazor' was undefined)

telerik learning
telerik...
2 Points
1 Posts

I'm trying to load grid telerik control in .net 8 with blazor. Getting following error:

Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initPager' ('TelerikBlazor' was undefined)

I'm trying following:

@page "/telerik-control"

@using Telerik.SvgIcons;
@rendermode InteractiveServer

<PageTitle>Telerik Grid</PageTitle>

<h1>Telerik Grid</h1>

<p>This component demonstrates showing data / pagination / sorting/ inline update.</p>

@if (GridData == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <TelerikRootComponent>
        <TelerikGrid Data="@GridData" EditMode="@GridEditMode.Inline" OnUpdate="@MyOnUpdateHandler"
                     Reorderable="true"
                     Pageable="true" PageSize="10" Sortable="true" Height="300px">
            <GridColumns>
                <GridColumn Field=@nameof(SampleData.Id) Title="Id" />
                <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
                <GridColumn Field=@nameof(SampleData.LastName) Title="Last Name" />
                <GridCommandColumn Width="100px" Reorderable="false">
                    <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
                    <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
                    <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>
    </TelerikRootComponent>
}

@code {
    public List<SampleData> GridData { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(500);
        GridData = GetData();
    }

    private List<SampleData> GetData()
    {
        return Enumerable.Range(1, 50).Select(x => new SampleData
            {
                Id = x,
                Name = $"name {x}",
                LastName = $"Surname {x}"
            }).ToList();
    }

    // sample CRUD operations

    private async Task MyOnUpdateHandler(GridCommandEventArgs args)
    {
        SampleData theUpdatedItem = args.Item as SampleData;

        var index = GridData.FindIndex(i => i.Id == theUpdatedItem.Id);
        if (index != -1)
        {
            GridData[index] = theUpdatedItem;
        }

        GetData();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
    }
}
Views: 254
Total Answered: 1
Total Marked As Answer: 0
Posted On: 10-Jan-2024 03:55

Share:   fb twitter linkedin
Answers
Rashmi
Rashmi
1038 Points
19 Posts
         

As per error message,  seems following javascript method are not available:

TelerikBlazor.initPager

Can you please check if you have included telerik js for blazor?

Posted On: 10-Jan-2024 03:59
 Log In to Chat