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.

Hi! In user menu bar on mobile device link not working https://yadi.sk/i/yVc4lKePsP5mZ

Hi there,

We will check this out and get back with a possible solution in the upcoming updates.

Kind Regards,
Art

Important announcement

We have moved our support system to Ticksy, which is more advanced and secure support system management.

From now on, if you need our support please just write a ticket on our external support system.

Take me to item support >

Hello,

I have an Issue that I haven’t been able to resolve, I sent a ticket but I didn’t get any response.

Could you please help me out?

Thank you

Hi DigitalGlue,

We will reply to your ticket very soon, support response time can be up to 2 business days.Please be more patient.

Thank you for your understanding :)

Kind regards,
—Ylli

Hi~Do you have any plan to upgrade the angular version any time soon? ^^

Hi pearlismylove,

I am sorry to say but we are not planning to update the Angular version.

P.S: We have moved our support system to Ticksy, which is more advanced and secure support system management.

From now on, if you need our support please just write a ticket on our external support system.

Take me to item support.

Kind Regards,
Art

Found a error in the HTML with the AngularJS version of Xenon. In the directory ”/app/tpls/layout/” the file “sidebar-profile.html” has a html comment at the top of the file. Having a comment at the top of a template breaks AngularJS’s template system. In this case AngularJS didn’t want to show this template. https://docs.angularjs.org/error/$compile/tplrt?p0=sidebarProfile&p1=app%2Ftpls%2Flayout%2Fsidebar-profile.html

One other issue I also have with the AngularJS version. I saw the notice for manually downloading and install DevExtreme Web JavaScript library. I have attempted this and my charts will not work. I may have done something wrong myself but I’m looking into a solution.

Hi AochiToxx,

Yes we are aware of this issue, and the quickfix is this:

Open app/js/directives.js on line 51 set false value:

directive('sidebarProfile', function(){
    return {
        restrict: 'E',
        replace: false, // this line
        templateUrl: appHelper.templatePath('layout/sidebar-profile')
    };
})

As for charts, can I send you the current version we are using in theme so that should work for you, I will sent it to you via email so you can try.

To send us email use this link. Please note that we usually do not respond to emails that request support, because here is our primary support forum. We use contact form just for sending sensitive information. Also emails response time can be up to 7 business days.

Please do not forget to explain your issue again in email, because we receive a lot of emails on daily basis and we unfortunately can’t remember all customers requests. Also add “This ticket is related to Arlind” in the end of email.


Kind regards,
Arlind

Thank you for the follow up. I’ll be sure to get in contact.

Hi AochiToxx,

Glad to hear that :)

Kind regards,
—Ylli

Hi,

I’d like to use this theme however I’m wondering what level of complexity is involved, I’m guessing a decent knowledge of javascript is essential?

My knowledge is currently limited to HTML and CSS, is this theme useable out of the box?

Thanks!

Hi jrvanstone,

Actually Xenon comes in both versions: plain HTML and AngularJS.

Based on your experience, I guess its better to use the HTML version.

The complexity of the theme is average, most of the users who purchase this theme doesn’t really need help as they are already familiar with the html+css and server side scripting languages.

What actually Xenon offers is that it saves you time, it has ready to use elements and you can just keep on developing on server side and probably add custom JS functionality or modify the existing code of the theme to make it fit your needs.

I hope I was clear on my explanation. You can purchase it and if you don’t find it useful in your case, we will refund the amount.


Kind regards,
Arlind

Hi First of all. thanks for the great theme ^^ I’m trying to use counter widget and set the value of date-to with angularjs scope value like data-to=”{{value}}” but it failed to load the value properly the console says that the value is not a number format. Could you please let me know how to fix the issue? Thanks.

Hi pearlismylove,

Firstly let me thank you for such kind words, we are happy to hear them.

This issue has been solved previously by our customer, here you can refer to this link to learn more how to fix it:

http://themeforest.net/comments/9060509

The file you need to edit is app/js/directives.js

Hopefully this will work for you as well.


Kind regards,
Arlind

Hi, can we create a chart with tooltip pop up like page: http://js.devexpress.com/Demos/WidgetsGallery/#demo/charts-line_and_point_series-line

i follow the whole code, but the tooltlps can’t show up, other all work well http://www.qinetics.net/panel/

Hi sheling,

After adding the following highlighted code, tooltips worked for me as well:

(view large version)

The result:

(view large version)


Best regards,
Arlind

Hi! I recently acquired your template called Xenon but I cannot ‘run’ the site on my computer. How can I run this app after extract the zip file? And I ask you a question before I brought this about some blank app with a simple CRUD resource. Do you have this? On your roadmap, do you consider releasing Bower or Grunt on this template?

Hi rodrigoallemand,

In order to run the angular version of this template, you must put it in web server, for example run it from localhost/xenon-angular/ and it will be executed.

As for Bower, Grunt we are not able to provide this because actually we are focused on WordPress theme development. Another thing is that I am not familiar with these and I don’t know how to include/use them yet.

I hope for your understanding.


Best regards,
Arlind

Hi, can we create a chart with tooltip pop up like page: http://js.devexpress.com/Demos/WidgetsGallery/#demo/charts-line_and_point_series-line i follow the whole code, but the tooltlps can’t show up, other all work well http://www.qinetics.net/panel/

Hi Needed help with sidebar bug. when the sidebar menu is expanded and we expand one of the menu items and collapse. Then later minimize the sidebar menu. The children of that particular menu item is no longer seen in a floating menu.

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,
Art

Hi. I’m new to AngularJS and I’d like to know how to bind data between view and controller for daterangepicker (inline) using Angularjs. Could you please give me some example? and really appreciate for the theme. very nice.

Hi pearlismylove,

Firstly thank you for your kind words.

As for Angularjs, I am also new to this framework and when developing Xenon theme was my first project ever. Since that time I didn’t used it because we as a team are more related to WordPress themes lately, so my knowledges about this framework are not very much but I will try to give you a solution.

Xenon manages views with $rootScope, so when changing the view you may refer to controllers.js and see for example login page (LoginCtrl) how the page is switched.

Daterangepicker library used in our theme is pure jQuery and not “angularified” so you may try to use a better version of that library here:

https://github.com/fragaria/angular-daterangepicker

Its quite easy to implement, assign it to app module:

angular.module('app', ['daterangepicker']);

Prepare model in your controller. The model must have startDate and endDate attributes:

exampleApp.controller('TestCtrl', function ($scope) {
    $scope.datePicker.date = {startDate: null, endDate: null};
}

Then in your HTML just add attribute date-range-picker to any input and bind it to model.

<div ng-controller="TestCtrl">
<input date-range-picker class="form-control date-picker" type="text" ng-model="datePicker.date" />
</div>

Hopefully this will help you.


Best regards,
Arlind

Is it possible to filter a datatable by date? I have tried doing it with yadcf and putting filter_type: range_date but it doesn’t work.

Hi,

Oh, the data table you are currently using is an older version, and the one I was talking about is newest from DataTables.

Can you please update data table library (generate your own download here) and that should work for you.


Best regards,
Arlind

No that didn’t work and has broken other tables using datatables as it now has multiple sort buttons :/

Hi cartertech

I think I should change the implementation of Datatables inside of Xenon because since that time last update of Xenon was published, datatables has came up with new version that is more managable and easy to use.

So for this you need to style the datatables again. Or wait for a few days till I take some time to integrate new datatables plugin.


Best regards,
Arlind

For the content reload you can test it with the link following

https://laravel-test-serkanakyol.c9users.io/customer

username : demo password: demo.

When you log into customer area. 1. Will open the dashboard 2. Click to Sale menu item 3. Again click to Dashborad item. Angular will not call the /customer/tpls/dashboard link again. Get content from cache or whatelse.

Hi serkanakyol

I’m sorry but I can’t login to test your site. I am unable to help you in this case I am sorry, if you are not happy with the product you can make a refund request, because I don’t how to solve this issue.


Best regards,
Arlind

Ok I see.

Refund pls.

Thank you.

Hi serkanakyol,

We are very sad to hear that. Anyway you can submitting refund request to envato support http://themeforest.net/refund_requests/new and then we will accept it.

Kind regards,
—Ylli

Hello,

And another problem is below.

Angular can not refresh data when calling page again. I guess, page renders with cache. How can I reload data when calling page?

Thank you.

Hi

Page layouts are controlled via $rootScope like for example, login page can be shown when setting these values for $rootScope:

$rootScope.isLoginPage = true;
$rootScope.isLightLoginPage = false;
$rootScope.isLockscreenPage = false;
$rootScope.isMainPage = false;

As for editor plugin, it depends if its angular supported, you may try to implement it, because you are free to include/implement whatever plugin you have in your mind.


Best regards,
Arlind

Your answers are not my waiting answers.

So first question is;

Its not refreshing the page when I click the link again

Second question is;

According to sending status code with ajax mehtod, full page will be refresh.

Thank you.

Hi again,

In order to refresh the page, it should change the hash location in url, see for example in our demo:

http://themes.laborator.co/xenon/angular/

Each page you click it serves the content of that link.


Best regards,
Arlind

When the sidebar is closed the submenu is showing over the main content: http://prnt.sc/atw63q

To reproduce (Tested Angular version): Start with side bar menu open > Click Sub item in Side bar (Example: Panels) > Close the side bar menu > Hover mouse over .main-content

I need a fix ASAP. Thank you.

Hi adoming3

Can you please try this fix:

1. Open this file assets/app/js/factory.js

2. Right after line 13 add this code:

public_vars.$sidebarMenu.find('ul').removeAttr('style');

It should look like this:

(view large version)

It worked for me I hope it will work for you too.


Best regards,
Arlind

Hello,

I got an error about sidebar-profile. So that is follow;

https://docs.angularjs.org/error/$compile/tplrt?p0=sidebarProfile&p1=tpls%2Flayout%2Fsidebar-profileC%2F%3C@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:6:450ue%2F%3C@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:60:173q%2Fg.success%2F%3C@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:72:199Ae%2Fe%2Fl.promise.then%2FF@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:100:178Ae%2Fe%2Fl.promise.then%2FF@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:100:178Ae%2Ff%2F%3C.then%2F%3C@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:101:350Zd%2Fthis.$get%3C%2Fk.prototype.$eval@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:112:64Zd%2Fthis.$get%3C%2Fk.prototype.$digest@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:109:160Zd%2Fthis.$get%3C%2Fk.prototype.$apply@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:112:396h@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:72:452u@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:77:463ye%2F%3C%2Fz.onreadystatechange@https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js:79:24https:%2F%2Flaravel-test-serkanakyol.c9users.io%2Fskin%2Ffrontend%2Ftheme_1%2Fjs%2Fassets%2Fapp%2Fangular%2Fangular.min.js

Any support pls?

Hi serkanakyol

Can you please open assets/app/js/directives.js on line 51 change the value to false as shown here:

(view large version)

This should fix your issue with Sidebar Profile template file.


Best regards,
Arlind

Thank you Arlind

You’re welcome :)

hI, I have purchased licenses for Xenon Admin Template. If i want to use Charts Library in my panel. Do i still need purchase DevExtreme Web Charts JavaScript License?

Hi sheling

Actually you can use them. Follow the directions in theme:

http://drops.laborator.co/1fAQK

This is because they do not allow us to directly include Devextreme files in our template, even that we have purchased the license and we are permitted to use this library.


Best regards,
Arlind

When creating a typeahead if I have add: templates: { empty: 'No results found', suggestion: function ( data ) { return data.label; }} so that I can have different values appear than I want to be left in the field, that input field’s pop up is styled differently to other input pop ups.

Hi

I am not sure how Typeahead handles templates, you may refer to their documentation about this.

Also is it possible to send me your URL so I can see it how it works.


Best regards,
Arlind

Do you have an email address I can send the link to?

Hi again,

To send us email use this link and please write us your request again, because we receive a lot of emails on daily basis and we unfortunately can’t remember all customers requests.

P.S: Please note that we usually do not respond to emails that request support, because here is our primary support forum. We use contact form just for sending sensitive information. Also emails response time can be up to 7 business days.

Kind Regards,
Art

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