Declined
Last Updated: 01 Jan 2022 10:26 by ADMIN
Matt
Created on: 24 Aug 2021 15:55
Category: UI for Blazor
Type: Bug Report
1
initCheckBox was undefined

I have a form with a range of checkboxes. With 2.25, the code worked. With 2.26, I receive an error initCheckbox was undefined.

 


<TelerikWindow @bind-Visible="ShowAdd" Modal="true" Class="NewRequest">
    <WindowTitle>Add Applications</WindowTitle>
    <WindowContent>
        <div style="position: relative; width: 90vw; max-width: 400px; display: grid; ">
            <span style="font-size: medium">@thisEmployee.EmpNickName</span>
            <div style="align-content: center; padding: 5px; width: 100%; display:flex; justify-content: center; align-items: center; border: inset">
                <div style="padding: 1px "><label for="ckDev">Dev</label><TelerikCheckBox Id="ckDev" @bind-Value="@thisEmployee.Developer" /></div>
                <div style="padding: 1px "><label for="ckSales">Sales</label><TelerikCheckBox Id="ckSales" @bind-Value="@thisEmployee.Salesman" /></div>
                <div style="padding: 1px "><label for="ckEng">Eng</label><TelerikCheckBox Id="ckEng" @bind-Value="@thisEmployee.Engineer" /></div>
                <div style="padding: 1px "><label for="ckPE">PE</label><TelerikCheckBox Id="ckPE" @bind-Value="@thisEmployee.LeadEng" /></div>
                <div style="padding: 1px "><label for="ckPM">PM</label><TelerikCheckBox Id="ckPM" @bind-Value="@thisEmployee.PM" /></div>
                <div style="padding: 1px "><label for="ckPurch">Purch</label><TelerikCheckBox Id="ckPurch" @bind-Value="@thisEmployee.Purchasing" /></div>
                <div style="padding: 1px "><label for="ckSF">Shop</label><TelerikCheckBox Id="ckSF" @bind-Value="@thisEmployee.ShopFore" /></div>
                <div style="padding: 1px "><label for="ckFS">Super</label><TelerikCheckBox Id="ckFS" @bind-Value="@thisEmployee.FieldSuper" /></div>
            </div><br />
            <div style="font-size:smaller">
                <TelerikGrid Data="@allApps" Height="50vh" FilterMode="@GridFilterMode.FilterMenu" FilterMenuType="@FilterMenuType.CheckBoxList">
                    <GridColumns>
                        <GridColumn Field="MenuCategoryTitle" Title="Category" />
                        <GridColumn Field="MenuCategoryID" Width="0" />
                        <GridColumn Width="3em">
                            <Template>
                                <div style="float:left; cursor:pointer; color: forestgreen; padding-right: 8px" title="Add Category" @onclick="@((args) => AddCategory((context as Index_Menu).MenuCategoryID))"><ic class="fad fa-plus-square" /></div>
                            </Template>
                        </GridColumn>
                        <GridColumn Field="MenuItemID" Width="0" />
                        <GridColumn Field="MenuItemTitle" Title="App" />
                        <GridColumn Width="3em">
                            <Template>
                                @if ((context as Index_Menu).MIAssigned == false)
                                {
                                    <div style="float:left; cursor:pointer; color: forestgreen; padding-right: 8px" title="Add App" @onclick="@((args) => AddItem((context as Index_Menu).MenuItemID))"><ic class="fad fa-plus-square" /></div>
                                }
                                else
                                {
                                    <div style="float:left; cursor:pointer; color: red; padding-right: 8px" title="Delete App" @onclick="@((args) => DeleteApp((context as Index_Menu).MenuItemID))"><ic class="fad fa-trash-alt" /></div>
                                }
                            </Template>
                        </GridColumn>
                    </GridColumns>
                </TelerikGrid>
            </div>
            <div style="align-content:center; padding:5px; width: 100%; display: flex;  justify-content: center;  align-items: center;  ">
                <TelerikButton OnClick="@CancelWindow">CLOSE</TelerikButton>
            </div>
        </div>
    </WindowContent>
</TelerikWindow>

7 comments
ADMIN
Marin Bratanov
Posted on: 01 Jan 2022 10:26

Hi Maurice,

The information in this article is still the most comprehensive set of ideas I can offer: https://docs.telerik.com/blazor-ui/troubleshooting/js-errors

If, after reviewing and applying the ideas from it, you still get such errors, I recommend we keep the discussion in your private support ticket so we can review the particular situation.

This current thread is not something we consider a bug, and so if something new comes to light in your ticket, it will likely get its own separate page, or documentation update, depending on what happens.

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Maurice
Posted on: 30 Dec 2021 20:27

UPDATE

The issue is still here and, it is not solved by removing the "defer". I realized it is systematic with Chrome (Version 96.0.4664.110 (Build officiel) (64 bits)). No issue with Edge (Version 96.0.1054.62 (Version officielle) (64 bits)) or Firefox (95.0.2 (64-bit)), with or without "defer".

To avoid the problem, in my grid, I had to remove the check-box associated to my Command ExcelExport from my GridCommandButton. Thought about it while looking for that "initCheckBox" could be and seeing that only one of my Razor page had exhibits that bug.

/*<label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" /> Export All Pages</label>*/

I'm working with VS2022 and .NET6 since a couple of weeks. I've just upgraded my blazor.UI lib to 2.30. I unfortunately don't remember what version I was using before (just tried 2.29 and still have the bug) but I know for sure (100%) I didn't have that issue.

Maurice.

Maurice
Posted on: 30 Dec 2021 17:17

Hi, 

I observed the same issue this morning with one of my Razor pages. I've been using Telerik.UI.for.Blazor v2.29.0 for several days and published several times. Only realized the issue this morning. I removed the defer attribute as suggested, published and, it worked. However, I've put back the "defer" to validate the solution and I don't have the issue anymore. As mentioned in the article recommended by Marin, the issue could be intermittent.

I'm sharing in case someone else goes through this and to try to keep this alive in case something bigger is behind this.

On my end, I'm going to remove the "defer" and leave a note in my code.

Regards.

Maurice.

ADMIN
Marin Bratanov
Posted on: 28 Aug 2021 07:45

Glad to see you have it working, Matt.

I have to mark this one as "declined" because it was not really a bug in the component, though, and I want to keep the portal tidy.

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Matt
Posted on: 26 Aug 2021 20:54
Ensured <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script> is correct in _Host.cshtml and did a clean, and now they seem to be working. Thank you for your guidance, once again, Marin.
ADMIN
Marin Bratanov
Posted on: 26 Aug 2021 20:10

Hi Matt,

Please give the ideas from this article a try and let me know how it goes: https://docs.telerik.com/blazor-ui/troubleshooting/js-errors

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Matt
Posted on: 24 Aug 2021 15:56
Additional information: the bind-values tied to thisEmployee are all boolean values.