Error while dragging mouse after panel drop.

[Oliver]

Hi,

I was hoping you might have an insight as to what could cause the following error.

It happens while i drag my mouse around or do anything at all really, after that I have dropped a panel that i was dragging.

Uncaught TypeError: Cannot read properties of null (reading 'helper')

    at t.intDrag (syncfusion-blazor.min.js:9:99101)

[Oliver]

This is the error it shows when i click instead of drag.

syncfusion-blazor.min.js:27 Uncaught TypeError: Cannot read properties of null (reading 'id')

    at t.dragStop (syncfusion-blazor.min.js:27:75735)

    at e.blazorCallback (syncfusion-blazor.min.js:9:36076)

    at e.notify (syncfusion-blazor.min.js:9:35822)

    at t.trigger (syncfusion-blazor.min.js:9:68679)

    at t.intDragStop (syncfusion-blazor.min.js:9:104243)

[Oliver]

The following code is what results in it breaking.

The code is used for a dropdown on my page, and doesn't have anything to do with dragged panels, so im not quite sure yet how the error occurs

@foreach (var category in groupedItems)
{
    <div id="@("CardMenu_" + category.Key)" class="dropdown-item">
        <SfMenu Target="@( "#" + "CardMenu_" + category.Key)" TValue="MenuItem" Orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical">
        <MenuItems>
            <MenuItem Text="@category.Key">
                <MenuItems>
                    @foreach(var item in category.Value)
                    {
                        @if (item.Access != "R")
                        {
                            <MenuItem Text="@item.Name">
                                <MenuItems>
                                    @if (item.IsModule)
                                    {
                                        List<CardComponentConfig> ModuleConfigs = DashboardBase.AvailableModuleConfigs.Where(m => m.ComponentId == item.ComponentId).ToList();
                                        <MenuItem Text="Choose a config" Id="-1">
                                            <MenuItems>
                                                @foreach (var config in ModuleConfigs)
                                                {
                                                    <MenuItem Text="@(config.ModuleName)">
                                                        <MenuItems>
                                                            <MenuItem Text="Open" Id="@("OpenModel," + config.ComponentId.ToString() + "," + config.ComponentModuleId.ToString())"/>
                                                            <MenuItem Text="Add To Page" Id="@("AddCard," + config.ComponentId.ToString() + "," + config.ComponentModuleId.ToString())"/>
                                                        </MenuItems>
                                                    </MenuItem>
                                                }
                                            </MenuItems>
                                        </MenuItem>
                                    } else
                                    {
                                        <MenuItem Text="Open" Id="@("OpenModel," + item.ComponentId.ToString())" />
                                        <MenuItem Text="Add to page" Id="@("AddCard," + item.ComponentId.ToString())"/>
                                    }
                                </MenuItems>
                            </MenuItem>
                                <MenuEvents TValue="MenuItem" Closed="ExecuteUsersSelect" ItemSelected="UserComponentSelect"></MenuEvents>
                        }
                    }
                </MenuItems>
            </MenuItem>
        </MenuItems>
        </SfMenu>
    </div>
}

[Oliver]

I tried to delete more of the code, so that i could see what was specifically breaking, and even the following still gives me the errors.

@foreach (var category in groupedItems)
{
    <div id="@("CardMenu_" + category.Key)" class="dropdown-item">
       
 <SfMenu Target="@( "#" + "CardMenu_" + category.Key)" 
TValue="MenuItem" 
Orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical">
        <MenuItems>
            <MenuItem Text="@category.Key">
            </MenuItem>
        </MenuItems>
        </SfMenu>
    </div>
}



[LeoLavanya Dhanaraj]

Hi Oliver,

Greetings from Syncfusion support.

Based on the information provided, it appears that you are experiencing an issue when clicking on the Dashboard panel (Cannot read properties of undefined (reading "id")). This problem may be due to improper ID mapping to the panels. Please ensure that each panel has a unique ID after dynamically adding or changing panel declarations. Additionally, make sure that the panel properties are properly mapped.

You can refer to the Dashboard panel properties at: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#properties

Review the suggestions provided and if the issue persists, kindly share the steps to replicate the issue, any video footage (if available), and a sample demonstrating the issue. This information will help us investigate and offer a solution promptly.

Furthermore, note that only SfMenu related codes were shared, and the Dashboard related codes were not included. Kindly provide details of the specific issue you are encountering with the Dashboard.

Regards,

Leo Lavanya Dhanaraj

[Oliver]

The issue only persisted as long as i had the menu code which i posted up above.
After i removed it, i didn't get the error.

However, i started to rewrite it, and changed it a little, which solved it, I am not completely sure what solved it, but it's no longer an issue. (Nothing in regards to the dashboard code was changed or modified in any way.)

<div class="dropdown-content" style="@(_IsDropdownOpen ? "display:block;" : "display:none;");">
    <SfMenu TValue="MenuItem" Orientation="Syncfusion.Blazor.Navigations.Orientation.Vertical">
        @if (DashboardBase.AvailableComponents.Count > 0)
        {
            // Create a dictionary to hold items grouped by ComponentCategory
            Dictionary<string, List<DashboardCardBase>> groupedItems = new Dictionary<string, List<DashboardCardBase>>();


            // Group the items by ComponentCategory
            foreach (var item in DashboardBase.AvailableComponents.Where(item => item.Access != "R"))
            {
                if (!groupedItems.ContainsKey(item.ComponentCategory))
                {
                    groupedItems[item.ComponentCategory] = new List<DashboardCardBase>();
                }
                groupedItems[item.ComponentCategory].Add(item);
            }


            <MenuItems>
                @foreach (var category in groupedItems)
                {
                    <MenuItem Text="@(category.Key)">
                        <MenuItems>
                            @foreach (var item in category.Value)
                            {
                                @if (item.Access != "R")
                                {
                                    <MenuItem Text="@item.Name">
                                        <MenuItems>
                                            @if (item.IsModule)
                                            {
                                                List<CardComponentConfig> ModuleConfigs = DashboardBase.AvailableModuleConfigs.Where(m => m.ComponentId == item.ComponentId).ToList();
                                                <MenuItem Text="Choose a config" Id="-1">
                                                    <MenuItems>
                                                        @foreach (var config in ModuleConfigs)
                                                        {
                                                            <MenuItem Text="@(config.ModuleName)">
                                                                <MenuItems>
                                                                    <MenuItem Text="Open" Id="@("OpenModel," + config.ComponentId.ToString() + "," + config.ComponentModuleId.ToString())" />
                                                                    <MenuItem Text="Add To Page" Id="@("AddCard," + config.ComponentId.ToString() + "," + config.ComponentModuleId.ToString())" />
                                                                </MenuItems>
                                                            </MenuItem>
                                                        }
                                                    </MenuItems>
                                                </MenuItem>
                                            }
                                            else
                                            {
                                                <MenuItem Text="Open" Id="@("OpenModel," + item.ComponentId.ToString())" />
                                                <MenuItem Text="Add to page" Id="@("AddCard," + item.ComponentId.ToString())" />
                                            }
                                        </MenuItems>
                                    </MenuItem>
                                    <MenuEvents TValue="MenuItem" Closed="ExecuteUsersSelect" ItemSelected="UserComponentSelect"></MenuEvents>
                                }
                            }
                        </MenuItems>
                    </MenuItem>
                }
            </MenuItems>
        }
    </SfMenu>
</div>

If you have some insights as to what could have fixed it, that would be great, so i can avoid that in the future :)

[LeoLavanya Dhanaraj]

Oliver, we have checked the menu code snippet, and the only difference is that the target property cannot be removed now. On our end, the menu will work properly with and without the target property. If you are still facing issues, could you please share all the code snippets and a replicable sample of the issue along with replication steps and a video demonstration? Based on that, we will check and provide you with a better solution quickly.

Regards,

Leo Lavanya Dhanaraj