Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Discussion on Xenon - Bootstrap Admin Theme with AngularJS

Cart 3,090 sales
Well Documented

Laborator supports this item

Supported

This author's response time can be up to 1 business day.

520 comments found.

I am having some troubles with adding new pages to my xenon web application. Every time I add a new page to the app/views folder it displays the page. However, if I add a calendar, nestable lists, etc… it does not display the javascript files needed to work correctly. For example: after adding the calendar the jquery-ui.min, moment.min.js, and fullCalendar.min.js are not displaying (There is not an error either, it just doesn’t display the content nor initiate). I have checked the path multiple times and I am using the correct path. Although, if I use one of the existing filenames (such as calendar in extra/calendar – it works). It seems as though, your filenames are somehow incorporated in the app.js file to allow the JS file to initiated. Thank you for your assistance in this matter.

Hi

To create new pages simply follow the current pages that are created. Then in app.js add route to that page, and to create menu item add it to services.js you the commented code that explains how to add menu items.


Arlind

Thank you for your reply. Would you please be able to state which file explains how to add menu items. I am working in the angularjs templates. Thank you so much for your time.

Hi again

Sure, just open /app/js/services.js file go to line 86 and you will see:

http://cl.ly/aGVP

Root elements are added directly using this and sub menus are added to their instances for example dashboard

// Subitems of Dashboard
dashboard.addItem('Dashboard 1', '-/variant-1'); // "-/" will append parents link
dashboard.addItem('Dashboard 2', '-/variant-2');
dashboard.addItem('Dashboard 3', '-/variant-3');
dashboard.addItem('Dashboard 4', '-/variant-4');

So the first parameter is title of menu, the second is ui-route path.

I hope this will help you to understand how menu is managed.


Arlind

Hi man, this is a really nice template. Could you share with us if you are planning any new updates and what are you planning to include on it or just planning your new project?

Thanks

Hi felipemillan, for sure that we will update Xenon continuously, on the future we plan to include some of them

- Members Page - Comments (Approve, Delete, View)

and some great new features, that you will see soon =)

Kind Regards,
Ylli

when do you think you will release more features or a big update?

Hi felipemillan, if everything goes as we planned, you should see an update this month :)

Kind Regards,
Ylli

Beautiful work!

Can you list what PSD files are included? Thanks

Hi

We only include two files as our desinger gave us the components separately and we have no full psd files:

Here is how they look:

http://cl.ly/aEJE

Login and Dashboard page.


Arlind

Hei,

I am trying to use datepicker in an angularjs application. I dont know what i am not doing right because i cant get the date calendar to pop up when i click the input box… Here is my html

<input type=”text” class=”form-control datepicker” data-format=”DD-MM-YY”>

Please help.

Hi there, can you please post with the account you bought the theme, this way we can verify that you’re a real customer as we do not offer support to users who doesn’t have “Purchased” badge.

Kind Regards,
Ylli

Hi,

I am using the HTML version of xenon and I have an issue with the csv / xls export module. The export works fine with the angular version but not in the HTML version. I have checked on your demo and it’s the same problem. Can you please advise how to make the export work ?

This is my javascript:

var tableTools = new $.fn.dataTable.TableTools( table, {
    sSwfPath: assets_url+"/js/datatables/tabletools/copy_csv_xls_pdf.swf",
    aButtons: [
        "csv",
        "print" 
    ]
});
$( tableTools.fnContainer() ).insertBefore('#'+table_id);

I can see the csv button but it wont export. I checked and the swf is loading properly.

Thanks

Hi IronTemplates

After trying for the second time in our HTML demo it was working fine and table exporter worked just fine, its strange why it doesn’t work sometimes.

Can you please update the plugins of data tables this could help you to fix this issue.



Hello,

I’m having issues with the notification dropdown in mobile view. When you click on the icon such as the fa-bell-o with the colored badge on it, nothing happens and it closes the horizontal menu. I noticed that someone else reported this too. Have there been any fixes yet?

Thanks

Here is a link to my live site, you can see for yourself that the mobile notifications are not working on any pages. Thanks

http://si.pmpros.co/#/app/dashboard-variant-1

Is there an email that I can send my code to so you can inspect it and see what might be causing it on my side? Thanks

Hi pmtech

Use our contact form in our profile page to send your code, but it will take longer because we are busy now and email support is second priority.


Arlind

Nice template, quick question… I’m trying to use jQuery inside an angularJS directive, but the jQuery is being processed before the angularJS directive is firing (i.e. datatables inside tabs)

<tabset> <tab>

I’ve tried with the jQuery inside the tab and outside the tab. How can I run the jQuery after angularJS has finished processing the tab directive.

Awesome! Thanks.

You are welcome buddy.


Arlind

Hi jth_92,

It would help us a lot if you could rate Xenon on themeforest from your Downloads tab, if you don’t know how just open this link :)

Kind Regards,
Arlind

Hello,

I’m interested in both Neon and Xenon, angularJS versions. But I still haven’t found the big difference between them. Can you guide me? What does one have that the other doesn’t?

Some guidance would be great to make the right choice. It’s not about the money, but because I’m going to develop a very big software over it and I don’t want to screw it.

Thanks,

The difference is in the design and also in the development, Neon was our first admin theme so what we developed in Neon in Xenon was improved even more.

Regarding the design it is all a matter of taste, but the charts used in Neon are multiple charts and graphs combined which are free while in Xenon we have used the most advanced chart system used by the most known technology brands – DevExpress charts.

Kind Regards,
Art

Thanks for the answer.

I don’t know if I saw it wrong, but few days ago I read that Neon supported AngularJS. Now I enter to the preview but there’s nothing about Angular, not even in the description.

Does Neon support Angular just like Xenon? If so, HTML version has the exact features as Angular version?

Thanks,

Santiago

Hi Santiago, Neon doesn’t support Angular JS, you may have read on the Xenon because only Xenon supports Angular JS.

Kind Regards,
Ylli

Can I use datatable with ng-repeat? ‘Cos I am getting some wiered behavier after I try to sort/search something. All

are removed except for one with the expressions {{ }} from angularjs.

Hi leogariba, unfortunately for the moment Arlind is sick and can not reply this question for 2-3 days hope for your understanding.

Kind Regards,
Ylli

Hi,

Really great template! Thanks ! However I have one question. Is there an easy way to make a fixed page-title. I want to have fixed sidebar, fixed header and fixed page-title? Thanks

Sure, please refer media query for mobile devices:

@media screen and (min-width: 768px){

    .user-info-navbar.is-fixed,
    .page-title.is-fixed {
        position: fixed;
        width: 100%;
        z-index: 20;
    }

    .user-info-navbar.is-fixed {
        top: 30px;
    }

    .page-title.is-fixed {
        top: 107px;
    }

    .main-content {
        padding-top: 200px !important;
    }
}

So replace the existing code and it will only be applied when browser viewport is larger than 768px (increase or decrease this value if you want).


Arlind

Setting width: 100% made it 100% however sidebar push it by width of the sidebar. And it cuts the last bit of the page-title. To solve this I made like this

        width: -moz-calc(100% - 340px);
        width: -webkit-calc(100% - 340px);
        width: -o-calc(100% - 340px);
        width: calc(100% - 340px);

However if sidebar is collapsed then pagetitle becomes too short. To fix that I changed js to add/remove sidebar-collapsed to page-title and changed CSS

    .page-title.is-fixed {
        width: -moz-calc(100% - 340px);
        width: -webkit-calc(100% - 340px);
        width: -o-calc(100% - 340px);
        width: calc(100% - 340px);
    }

    .page-title.is-fixed.sidebar-collapsed {
        width: -moz-calc(100% - 80px);
        width: -webkit-calc(100% - 80px);
        width: -o-calc(100% - 80px);
        width: calc(100% - 80px);
    }

This seems to work ok. Would love to hear If there are better way of doing this.

Thanks

Thats correct, you have managed to solve it the right way. The other way would be instead of width, to apply this:

.page-title.is-fixed {
   left: 340px;
}

.page-title.is-fixed.sidebar-collapsed {
   left: 80px;
}

Whatever works for you is just fine.


Arlind

how do we position the chat dialog that is attached when you click on someones name on the right side http://screencast.com/t/hTrkDByTekaH

right now it seems like this is set to show in the same place and not next to the item you clicked. any solutions here?

Hi qlabsdev,

Unfortunately for the moment Arlind is sick and can not reply this question for 2-3 days, hope for your understanding.

Kind Regards,
Ylli

Hi,

I’m trying to add ‘auto-inherit-active-class’ to the main menu but it does not seem to be working. This is the comment line for the class:

<!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->

How can I get this to work as I’m trying to build a dynamic menu, and this would be very helpful. Thanks.

Hi adrielzxdf,

Unfortunately for the moment Arlind is sick and can not reply this question for 2-3 days, hope for your understanding.

Kind Regards,
Ylli

HTML5 version

Any chance in making the file upload button “Browse” look like all the other buttons, we are in the process of moving from neon to xenon, but the test users just don’t like the old ‘Browse’ button. I’ve tried but just can’t get it to look correct inside the template, and they just won’t sign off.

Note Using dropzone is NOT an option on this project.

ps if bribery helps it will also upgrade to extended license, when it goes live later this year !!!

Hi David

I have now noticed that this feature is missing and we are going to implement it in the next release. For your information you can use Jasny File Input to style your own upload button:

http://jasny.github.io/bootstrap/javascript/#inputmask

I hope it will help you.



Thanks, will try his

Hi,

Just wondering how I edit the style of the bars? Is this within the theme or limited to the chart designs. I am trying to get the total number of medals displayed beside the country name on the stacked bar.

Any help would be appreciated. Cheers

Hi there,

the bar colors can be changed to any color you want, you need to edit the DevExpress charts, you can read more about them and how it works here:

http://js.devexpress.com/WebDevelopment/Charts/

Kind Regards,
Art

Awesome thank you I have manage to edit the bars using the link above.

That is great news :)

P.S : It would help us a lot if you could rate Xenon on themeforest from your Downloads tab, if you don’t know how just open this link :)

Thank you very much,
Art

Hi, we´re getting this error “Unclosed block” everytime we compile your less files using grunt-contrib-less. Trying to fix this error we saw that there is a problem in .keyframes(...) inside lesshat.less file, it is adding a (”;”) before the last (“}”) in some animations ,see the example bellow.

.xe-widget.xe-weather .xe-background.xe-background-animated lesshat-selector { -lh-property: 0; } @-webkit-keyframes weatherBgMove{ 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }} @-moz-keyframes weatherBgMove{ 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }} @-o-keyframes weatherBgMove{ 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }} @keyframes weatherBgMove{ 0% { left: 0%; } 50% { left: 10%; } 100% { left: 0%; }; }

When we erased the content of .keyframes(...), the compilation was successfull but obviously some animations were lost.

Please check .keyframes(...)

Hi cleqo

On my machine it compiles successfully and it shows no errors, which is hard for me to know which exact keyframe is causing this. Can you please remove the keyframes one by one till the file compiles successfully and that will let you know which line is causing this issue, this is the best way to fix the issue.


Arlind

Hi, I am making an form in which I have an <select> filed. I am trying using the validation on this but it does not seem to work? How do I use: data-validate=”required” on an select field?

Thanks for a great script :-)

Hi jmansa

I am sorry for the delay of reply as I was not available for one week in the office as I was ill. Now I got back and can help you.

To add validation to your fields, you must import jquery.validate library in the document and to make it required the first option of select field must have value to empty:

<option value="">Select your ...</option>


Arlind

Hi, just as @hasanaydogar, I am unable to set the skin using the layoutOptions.skins.horizontalMenu options. From a quick search, the only place where skins seem to be applied is exactly in the demo you create, i.e., the app does not load the set option by default.

I was able to fix it by adding public_vars.$body.addClass(“horizontal-menu-skin-” + $layout.get(‘skins.horizontalMenu’)); in the line right after public_vars.$body is initialized in the MainCtrl controller. Do you foresee any non-intended consequences of this?

Hi jeimuzu,

The code that you written is very well resolved, it has not any consequences.

Kind Regards,
Ylli

Please adopt your wizard to a real angular wizard.

e.g.: https://github.com/mgonto/angular-wizard

Thanks for sharing this with us, that will be on our to-do list. But don’t expect is very soon.

Kind Regards,
Ylli

Hi,

Just wondering how I edit the style of the bars? Is this within the theme or limited to the chart designs. I am trying to get the total number of medals displayed beside the country name on the stacked bar.

Any help would be appreciated. Cheers

Hi lindyl00,

Unfortunately for the moment Arlind is sick and can not reply this question until next week

Hope for your understanding.

Kind Regards,
Ylli

Hi,

After Applying Xenon Style, Not Working Java Scripts Events like onlcick() at Radio Button & Check Box. :(

Hi anassparx,

Unfortunately for the moment Arlind is sick and can not reply this question until next week, hope for your understanding.

Kind Regards,
Ylli

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey