Angular Sidebar and ASP.NET Core 2.0 Issue

Hi,

Here is what all I did -
1. Upgraded VS 2017 to the latest update.
2. VS 2017 ASP.NET core has a new template for Angular.
3. Went ahead and got npm packages for 

4. Started modifying the code in nav-menu.component.ts, html and css files. 
5. Modified app.component.html to add the top button and header for the page.
6. Added the imports in app.module.ts.
7. If I run it now I don't get a page and it seems as if the Angular Routing is now broken.
8. I removed the entire syncfusion code and started adding one code at a time. It now errors on app.module.ts as soon as I add the import for ej2-ng-navigation. It is erroring for dependency @angular/common.

Here is what I want to do on this project -
I want sidebar with listview that has grouping. The listview with grouping will pull the information from the database. The content area will have grids to manage data. 
So, the list will have grouping like -
Employees -> Manage Employee
Employees -> Manage Compensation
Settings -> Manage Fiscal Years
Settings -> Manage Salary Tiers

So when they click on Manage Employees, they will be redirected to the Employees grid and they can manage the employees information. Compensation will allow them to manage salary, bonus structure etc.

So basically I have to replace the default side navigation with sidebar and listview.

Any help is greatly appreciated on how to do the above.

Thanks,

Ameet

5 Replies

BM Balaji M Syncfusion Team August 27, 2018 01:01 PM UTC

Hi Ameet, 

Thanks for contacting Syncfusion Support. 

We have checked with your query by creating a sample after updating the Visual Studio to the latest version (15.8.1) with the Angular template and cannot reproduce the reported issue at our end. Also, As per your requirement, we have created a simple sample by placing sidebar component using the Listview (with grouping) for navigation to display the grid and attached in the below link. Please check it. 


In the above sample, once the page rendered, you can find the Sidebar component with Listview (grouped) for navigation replacing the default side navigation. As of now, we have created a sample to navigate to fetch data component containing the grid while clicking on the ManageEmployees option in the list view and load the home component data while clicking  the other options.  

If still the reported issue persist at your end, then please revert back to us the version of @angular/common been specified in your application as you have stated issue raised from the angular/common package along with an issue reproducing sample if possible so that we can check what is wrong in your application and provide an exact solution to overcome the issue at your end. 

Regards, 
M. Balaji  



AM Ameet August 28, 2018 03:59 PM UTC

May be something is not right either on my end or your end. When I created the project I get the following in the ClientApp -


On your app you get the following -


When I try to add the grid object on one of components I get an error with @angular/common. Any ideas?

Thanks,

Ameet


AM Ameet August 28, 2018 07:34 PM UTC

I fixed one of the issues by including the syncfusion components in package.json and then let the build download it to node-modules. Now need to move the sidebar from example and try it.

Thanks,

Ameet


AM Ameet August 29, 2018 09:08 PM UTC

Thanks for your response. I was able to get this working and works really cool.

Appreciate your help.


PN Preethi Nesakkan Gnanadurai Syncfusion Team August 30, 2018 06:20 AM UTC

Hi Ameet, 
  
We are glad that your issue has been solved. Please let us know if you need any assistance. 
  
Regards, 
Preethi 


Loader.
Up arrow icon