Base solution for your next web application
Open Closed

using content from Metronic website - which css and scripts #3811


User avatar
0
mdonogma created

aspnetzero uses layout admin_4 from what we understand.

we want to add a widget exactly as it shows on the metronic website. <a class="postlink" href="http://keenthemes.com/preview/metronic/theme/admin_4/page_user_profile_1.html">http://keenthemes.com/preview/metronic/ ... ile_1.html</a> when the code is copied into the page content area it does not render 100% correctly.

Heres the question: which css and javascript files do i need to add to get it to work.

example: do i need to add all these from the FAQ example into my page in order for it to render correctly.

@using System.Threading.Tasks @using .Web.Areas.Member.Startup

@{ ViewBag.CurrentPageName = MemberPageNames.Tenant.FAQ; }

@section Styles {

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" /> <link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />

<link href="../assets/pages/css/faq.min.css" rel="stylesheet" type="text/css" />

<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" /> <link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" /> <link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />

} @section Scripts { <environment names="Development">

&lt;/environment&gt;
&lt;environment names=&quot;Staging,Production&quot;&gt;
   
&lt;/environment&gt;

}

<div class="row margin-bottom-5"> <div class="col-xs-12"> <div class="page-head"> <div class="page-title"> <h1> <span>@L("FAQ")</span> </h1> </div> </div> </div> </div>

<div class="faq-page faq-content-1"> <div class="search-bar bordered"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> </div> </div> <div class="faq-content-container"> <div class="row"> <div class="col-md-6"> <div class="faq-section bordered"> <h2 class="faq-title uppercase font-blue">General</h2> <div class="panel-group accordion faq-content" id="accordion1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_1"> How do I vote or respond to a poll?</a> </h4> </div> <div id="collapse_1" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_2"> Do you accept purchase orders?</a> </h4> </div> <div id="collapse_2" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_3"> How many responses per poll (which plan) do I need?</a> </h4> </div> <div id="collapse_3" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_4"> What if my audience does not have a phone or a web-enabled device with internet access?</a> </h4> </div> <div id="collapse_4" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_6"> How fast do responses show up?</a> </h4> </div> <div id="collapse_6" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> </div> </div> <div class="faq-section bordered"> <h2 class="faq-title uppercase font-blue">Technical</h2> <div class="panel-group accordion faq-content" id="accordion3"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_1"> How do I vote or respond to a poll?</a> </h4> </div> <div id="collapse_3_1" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_2"> Do you accept purchase orders?</a> </h4> </div> <div id="collapse_3_2" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_3"> How many responses per poll (which plan) do I need?</a> </h4> </div> <div id="collapse_3_3" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_4"> What if my audience does not have a phone or a web-enabled device with internet access?</a> </h4> </div> <div id="collapse_3_4" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_5"> How can I share my poll with remote participants?</a> </h4> </div> <div id="collapse_3_5" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion3" href="#collapse_3_6"> How fast do responses show up?</a> </h4> </div> <div id="collapse_3_6" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="faq-section bordered"> <h2 class="faq-title uppercase font-blue">Pricing</h2> <div class="panel-group accordion faq-content" id="accordion2"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_1"> How much does it cost?</a> </h4> </div> <div id="collapse_2_1" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_2"> Do you accept purchase orders?</a> </h4> </div> <div id="collapse_2_2" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_3"> What is the K-12 classroom size promise?</a> </h4> </div> <div id="collapse_2_3" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_4"> What if my audience does not have a phone or a web-enabled device with internet access?</a> </h4> </div> <div id="collapse_2_4" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_5"> How can I share my poll with remote participants?</a> </h4> </div> <div id="collapse_2_5" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse_2_6"> How fast do responses show up?</a> </h4> </div> <div id="collapse_2_6" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> </div> </div> <div class="faq-section bordered"> <h2 class="faq-title uppercase font-blue">Admin Management</h2> <div class="panel-group accordion faq-content" id="accordion4"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse_4_1"> How do I vote or respond to a poll?</a> </h4> </div> <div id="collapse_4_1" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse_4_2"> Do you accept purchase orders?</a> </h4> </div> <div id="collapse_4_2" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse_4_3"> How many responses per poll (which plan) do I need?</a> </h4> </div> <div id="collapse_4_3" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse_4_4"> What if my audience does not have a phone or a web-enabled device with internet access?</a> </h4> </div> <div id="collapse_4_4" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <i class="fa fa-circle"></i> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion4" href="#collapse_4_5"> How can I share my poll with remote participants?</a> </h4> </div> <div id="collapse_4_5" class="panel-collapse collapse"> <div class="panel-body"> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut. </p> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. </p> </div> </div> </div> </div> </div> </div> </div> </div> </div>


11 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Mdonogma,

    I assume you want to create a similar page the one you have shared a link. If so, we didn't include profile.css into AspNet Zero solution. Adding it to your page might solve your problem. If it does not, you can compare included css files and add missing ones to your page.

    Thanks.

  • User Avatar
    0
    mdonogma created

    <cite>ismcagdas: </cite> Hi @Mdonogma,

    I assume you want to create a similar page the one you have shared a link. If so, we didn't include profile.css into AspNet Zero solution. Adding it to your page might solve your problem. If it does not, you can compare included css files and add missing ones to your page.

    Thanks.

    Why do t you just include all the Medtronic .css files. That way developers won't have to log requests like this. My assumption is since your documentation says Medtronic them added is that all the relevance metronic .css and other artefacts are built in.

    What else is missing?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Mdonogma,

    I understand your point but some other developers don't want this. We got such requests before to exclude even some of existing metronic files included in AspNet Zero.

    Since we are selling the source code, it is easy to include needed metronic files when you are developing a custom page.

    Have you solved your problem by the way ?

    Thanks.

  • User Avatar
    0
    strix20 created

    <cite>Mdonogma: </cite>

    <cite>ismcagdas: </cite> Hi @Mdonogma,

    I assume you want to create a similar page the one you have shared a link. If so, we didn't include profile.css into AspNet Zero solution. Adding it to your page might solve your problem. If it does not, you can compare included css files and add missing ones to your page.

    Thanks.

    Why do t you just include all the Medtronic .css files. That way developers won't have to log requests like this. My assumption is since your documentation says Medtronic them added is that all the relevance metronic .css and other artefacts are built in.

    What else is missing?

    Because Metronic is an incredibly bloated front end framework, and if they included everything despite not needing it, everyone would end up with an application that loaded more slowly and took up more memory than was necessary.

    Part of their goal in provided Asp.Net Zero as a template is to provide a starting point for a multi-tenant SaaS application that follows best practices from the ground up.

    Including unnecessary bloat is not best practice.

    They do, however, provide you with the entire source of the Metronic UI, so you are free to incorporate any part of it that they have not included. You can find the link here:

    <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/releases">https://github.com/aspnetzero/aspnet-zero/releases</a>

    The latest version of Metronic that is incorporated in Asp.Net Zero is 4.7.5, and can be found in the download section of Asp.Net Zero Release 4.1.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks @strix20, that is the exact reason :).

  • User Avatar
    0
    GeovaniMartinez created

    What is the best practice for including these additional scripts on a needed basis? I want to add the Searc.css and Search.js

    Do i place each file in the respective path shown below?

    src\solution.Web.Mvc\wwwroot\Common\Scripts
    src\solution.Web.Mvc\wwwroot\Common\Styles\

    Or do I create a "Search" directory in src\solution.Web.Mvc\wwwroot\view-resources\Areas\App\Views\ and then put both the Search.css and Search.js in that directory?

    What is the best practice you recomend?

  • User Avatar
    0
    aaron created
    Support Team

    Put them in:

    • src\solution.Web.Mvc\wwwroot\metronic\assets\search\css
    • src\solution.Web.Mvc\wwwroot\metronic\assets\search\scripts You can see the other components in metronic\assets with a similar structure.
  • User Avatar
    0
    dparizek created

    and with the Angular/Core version, where should we add additionalJS/CSS files/frameworks that we wish to add? I see .Web.Host/src/assets and a primeng folder under there.

    If I want to add another primeng component, I add it there? and then add import to main.module.ts. Anyone know how to get primeng just parts as in the primeng folder? On the install page for primeng, it only details installing the full thing... <a class="postlink" href="https://www.primefaces.org/primeng/#/setup">https://www.primefaces.org/primeng/#/setup</a>

    ok, in package.json the full thing is listed.

    but aspnetzero angular app appears to only include autocomplete, datatable, and file-upload in assets folder. So better to include only what is needed - can anyone point me to how to install just parts of primeng?

    or is there any documentation on dealing with js/css/font assets?

    Thanks for your patience with my newbie questions!

  • User Avatar
    0
    ismcagdas created
    Support Team

    @dparizek the style files in the primeng folder are just for customization. They are not from primeng, our team created those files.

    So, if you want to use another component from PrimeNg, you just need to import it into your module and then you can use it in the html/ts files. You can check the usages of PrimeNG components here <a class="postlink" href="https://www.primefaces.org/primeng/#/">https://www.primefaces.org/primeng/#/</a>.

  • User Avatar
    0
    mika created

    <cite>dparizek: </cite> So better to include only what is needed - can anyone point me to how to install just parts of primeng?

    <cite>ismcagdas: </cite> So, if you want to use another component from PrimeNg, you just need to import it into your module and then you can use it in the html/ts files. You can check the usages of PrimeNG components here <a class="postlink" href="https://www.primefaces.org/primeng/#/">https://www.primefaces.org/primeng/#/</a>.

    Yes you can Import, if the component was already installed. But is there a way to install new Primeng components, e. DataView that is not installed <a class="postlink" href="https://www.primefaces.org/primeng/#/dataview">https://www.primefaces.org/primeng/#/dataview</a>

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Mika,

    According to this blog post, <a class="postlink" href="https://www.primefaces.org/primeng-5-2-1-released/">https://www.primefaces.org/primeng-5-2-1-released/</a>, DataView component is intoduced in v5.2.1 but we are currently using 4.x version of PrimeNG. We are planning to update PrimeNg to 5.x in our 5.4 release.

    We are also planning to replace existing datatable with the new one.

    As far as I know, you can update PrimeNG to 5.2.1 and it should be compatible with 4.x versions but I might be wrong. You can give it a try. If it works, you can use DataView component as well.