- ABP Framework version: v8.3.0
- UI Type: MVC
- Database System: EF Core SQL Server
- Tiered (for MVC) or Auth Server Separated (for Angular): Tiered MVC
- Exception message and full stack trace: Uncaught Type Error Reading Properties of undefined (reading 'id')
- Steps to reproduce the issue:
Create a Simple Company app in Abp Suite. First table is Company with coName field. build project and run. Add a few company records. Next, Add a Sites Table - Make it A Child of Company Add a SiteName field. Save and build. Add a site name record to one of your companies. No Problem. Add A Child Vehicle Table with make and model .
Save and Build.
Navigate to Company after build and login.
Should see company records. Click the tab that has company sites. Should see Sites.
Create an Employees table (ALL PKs are int) add column employeeName
Save and build.
Add a Many-to-Many navigation collection to Employees Table for the Company table in Navigation so we can have many employees. Save and Build.
Load And add a Company OK. Add some employees OK.
Click the Vehicles tab.
Error: vehicle.id is null so is vehicle. OF COURSE! I want to add a vehicle.
I did notice in forms that do not have a navigation collection or drop down, the data element is just named data.id not data.vehicle.id for the tab naming convention.
later in code it pulls a reference to companyId
I notice if I create a Company1, Site1, Vehicle1 and don't use NavigationCollection for many-to-many employees the correct code is produced.
Is this a bug?
How to work around it.
Presently: I am changing vehicle ID on the tab to data.company.id in the actual page javascript. Solves the problem. But should I have to fix this?
Appreciate all of your support.
Error happens because Uncaught Type Error
function initDataGrids(data) { initSiteGrid(data) $("#Vehicles-tab-" + data.vehicle.id).one("click", function (e) { initVehicleGrid(data); }); }
Click New Vehicle fails to show the Create Form for the New Vehicle.
5 Answer(s)
-
0
Hi, thanks for the detailed explanation. I'll try to reproduce the problem and let you know.
-
0
Hi, thanks for the detailed explanation. I'll try to reproduce the problem and let you know.
Hi, any luck with a quick solution or even a work-around that will stick when project is rebuilt in ABP Suite/ABP Studio using customizations?
-
0
Hi, thanks for the detailed explanation. I'll try to reproduce the problem and let you know.
Hi, any luck with a quick solution or even a work-around that will stick when project is rebuilt in ABP Suite/ABP Studio using customizations?
Unfortunately, I haven't tried it yet. I'll try to test it asap, and provide you a workaround.
-
0
I tried to reproduce it but unfortunately couldn't. Please share the content of .json files under the .suite folder.
-
0
I tried to reproduce it but unfortunately couldn't. Please share the content of .json files under the .suite folder.
I can also share a fully built-out project. Meanwhile, JSON text is too long to put into a post. I am attaching the .suite files in a github repo Link to .SUITE JSON files in repo with a readme.html file in each folder. There is no code in the repo, just the .suite JSON files.
There is a readme.html file in each folder. I just created this example and the problem still exists. In the provided example: I can add a Company, and add employees to the company after Navigations are created. The problem: There are two related child forms for Company. 1. Sites. 2. Vehicles. When I click Sites after establishing the Company many-to-many navigation and building it, etc. I can add Sites. I can add Employees to the Company via the Employees tab on the Company form. When I click the Sites link, all site records show up. When I click the Company Vehicles link, no vehicles show up. The Add New Vehicle button does not launch the Create Company vehicle form.
When there is no Employees Navigation property, everything works as expected.
The newly generated index.js in the Company page produces:
function initDataGrids(data) { initSiteGrid(data) $("#CompanyVehicles-tab-" + data.id).one("click", function (e) { initCompanyVehicleGrid(data); }); }The
data.idproperty is null. Normally, thedata.idproperty gets populated when the many-to-many employees isn't used.To fix the issue, I had to change
data.id to data.company.idwhich solves the problem.The next line calls
initCompanyVehicleGrid(data)Here is a piece of the ABP generated function call. Notice it is using
data.company.id? :function initCompanyVehicleGrid(data) { if(!abp.auth.isGranted("MstrWithTwoCh.CompanyVehicles")) { return; } var companyId = data.company.id; var companyVehicleService = window.mstrWithTwoCh.controllers.companyVehicleNs.companyVehicle; ... }However, when code gets regenerated via suite, the fix gets clobbered because it is not in a customization comment region.
