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.

pmptech
I solved the chart issue adding this event function on my chart config:
onDone: function () {                        
   DevExpress.utils.windowResizeCallbacks.fire();
}

Hi there,

thank you for sharing the fix for this :)

Kind Regards,
Art

Hi, I’ve been playing with charts and can get them to display fine in a ‘normal’ page, however when I try to get them to display in a modal window they will not, instead I get the warning “W2001 – dxBarGauge cannot be drawn because its container is invisible. ”. Perhaps it has something to do with the modal not being render in time…. Can you offer some guidance on this? Troy

Ah I understand your case, so in your file metrics.html you should be calling this JavaScript to initialize the dx charts, in that file if the:

$("#bar-1").dxChart({
    dataSource: [
        {day: "Monday", sales: 3},
        {day: "Tuesday", sales: 2},
    ],

    series: {
        argumentField: "day",
        valueField: "sales",
        name: "Sales",
        type: "bar",
        color: '#68b828'
    }
});

With this code:

setTimeout(function(){

    $("#bar-1").dxChart({
        dataSource: [
            {day: "Monday", sales: 3},
            {day: "Tuesday", sales: 2},
        ],

        series: {
            argumentField: "day",
            valueField: "sales",
            name: "Sales",
            type: "bar",
            color: '#68b828'
        }
    });

}, 100);

It should work fine after this.


Arlind

Works beautifully!!!!! Thanks so much!

Great to hear that buddy.


Arlind

Hi Laborator,

Is it possible to have the page-title class (with title and breadcrumb classes) using the horizontal menu layout? It seems that it only works on the layouts that use a sidebar.

Thanks.

Hi

If you are thinking about this:

http://cl.ly/aZ92

Yes it possible to include the title inside any page.


Arlind

when the next update due?

We don’t have a due date, but I think for two-three weeks it will be online.

Regards,
Art

Hi i open a Modal with a form and need save the inputs. When put this:

<button type=”button” class=”btn btn-info” ng-click=”saveInquiry()”>Add</button>

$scope.saveInquiry = function() {

alert("hola")
}

In the same controller nothing happen.

Thanks

Hi CreativExit

Have you added this method saveInquiry() to MainCtrl controller?

Because that is how should work in this case, or better instead of $scope.saveInquiry = ... add this method to root scope: $rootScope.saveInquiry = ... is known globally.


Arlind

Thanks a lot… Another question how close a modal from Controller?

Open Modal: $rootScope.currentModal = $modal.open({ templateUrl: “accountD”, controller: “InquiryController”, size: ””, backdrop: typeof ”” == ‘undefined’ ? true : ”” });

Close Modal: $rootScope.currentModal = $modal.close();

Thanks

Hi

In modal header include the reference to currentModal variable to close the modal:

<div class="modal-header">
    <button type="button" class="close" ng-click="currentModal.close();" aria-hidden="true">×</button>
    <h4 class="modal-title">Basic Modal</h4>
</div>

See ng-click that uses currentModal var.


Arlind

Hi, I’m doing some work on the templates to make a chat application… Below is a link of what it looks like so far, I’ve replaced the navbar with the chat window.

When the user clicks the ‘Logout’ button (or when they first open the page) I’m trying to replace everything below the Communicator logo area with the login html but I’m having trouble getting it to work.

I’ve looked at how it’s working for the main area and it’s use of app.js but I’m still struggling. If you could give me some direction with this I’d be most appreciative.

Screen shot: http://chilp.it/448799a

Thanks, Troy

Yay, great news :)

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

Done. You got a great rating from me!

Thank you very much, very kind review :)

Cheers!
—Ylli

I am using the angularJS version. Using table exporting. the rendering is only showing the data table but neither the pagination, the sorting nor the export and filters on the top..

???

Hi again

This plugin is called TableTools and can view more information here:

https://www.datatables.net/extensions/tabletools/

Which can help you better to understand how it works, we only implemented the simple example for table tools, I hope it will do what you want.


Arlind

Hi there,

Well written, neat template. Some initial questions and a couple future suggestions:

NOTE: I am using angular JS version on XAMPP (Windows)

Questions 1. cannot see the user profile on the sidebar it is set to true in controller.js

2. Image gallery component not showing pictures as shown in my demo. what am i missing

Suggestion: sections like faq, contact us as extra would be nice Also a themed landing page is missing. Thanks

Hi

Thanks for your suggestions and your kind words, here are the answers to your questions:

1. To fix this, please open: ~assets/app/js/directives.js on line 51 set false value for replace property.

2. In gallery page all you need to have is this extra script (apart from the default imported):

 src="assets/js/jquery-ui/jquery-ui.min.js"></script>

For gallery initialization please head over to gallery page more exactly where this comment is:

// Sample Javascript code for this page

And from there you can see the gallery initialization code. I hope this will help you.

About your suggestions, I have added them in our todo list and will talk with our designer and hopefully we will implement all of them.


Arlind

Hello! When using the supplied graphs, we noticed a sizing problem. When reloading the page (http://themes.laborator.co/xenon/angular/#/app/charts-variants) the graphs moves to the right creating a padding/sizing/overflow issue. It seems like the problem only occurs when the charts width is at 100% and when reloading it. Since our dashboard has many charts at 100% width the overflow it is causing many problems. Thank you.

Hi there,

we know this but we couldn’t find a better way to fix it, when you refresh the page it comes back to normal.

We will soon release a new update of Xenon with new features and bug fixes, I hope we can do something for this too.

Regards,
Art

Hi, The template I have received is not with the features for: User Photo (the rounded one at the sidebar); Edit profile Button; Mailbox button the Logout button. Can you provide me with the version that include them? – my main focus is on the angular version.

Besides of that; it is a very good template congrats.

Thanks in advance.

Hi nawebe,

Make sure that you are opening Xenon from XAMPP (Windows) or MAMP (Mac).

Cheers!
Ylli

Which javascript is responsible for the sidebar menus and all the sub menu levels? Trying to use the HTML version. Thanks.

Hi perkins20999

The responsible file for Sidebar menu is assets/js/xenon-custom.js

Go to line 1124 and you will see this function:

function setup_sidebar_menu(){
...

Inside this function the sidebar menu is set up.


Arlind

Awesome job guys! another bug found (really not a bug but a weird behaviour in the demo! look at: http://themes.laborator.co/xenon/extra/search/ the tabs aint working! solution? just remove the “active” class and you’re good to go! Thanks again. -F

Hi there,

thanks a lot for helping us locate the bugs and problems. Soon there will be a new update of the theme with new features and bug fixes.

Best Regards,
Art

How can I make the links on the sidebar menu pull from a database instead of being hardcoded in services.js?

Hi pmptech

Either way you need to generate menu links in javascript for best control over the menu routes and functionality.

So this way, you can get menu items from AJAX, or parse in javascript document directly then use MENU API to build the menu from services.js

I developed this menu api to simplify the work with menu and make it easier to maintain and manage.

However if you don’t like it, you can manually add menu items, like they are in pure HTML in Plain version of Xenon, just copy the markup and fill it with your content, then you have manually to set up click events.


Arlind

Hi, I have been making some changes to the template and I would like to be able to make the ‘chat-conversation’ a multi tabbed modal for instance that can display multiple chat conversation at the same time and stay on screen or be minimized if the user wanted to do something else within the application, such as ‘Edit Profile’. Would you have any guidelines on how to accomplish?

Thanks, Troy

Hi Troy

Sure you can do this, in the current version like in this page:

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

So there are 3 conversations active: http://cl.ly/aLvi

However to accomplish it you must figure out a way how to make the chat works, there is only the markup included to allow you to make chat conversations available but the PHP code must be provided by you.


Arlind

Hi,

I’m trying to add ‘auto-inherit-active-class’ to the links on the sidebar but it does not seem to be working. This is the comment 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?

Hi adrielzxdf

Sorry as this is not working in the current version however here is the quick fix for it:

jQuery(".main-menu .active").each(function(i, el)
{
    setActiveMenuParentItem($(el));
});

function setActiveMenuParentItem($el)
{    
    if($el.parent().hasClass('main-menu') == false)
    {
        var $li = $el.parent().parent();

        $li.addClass('opened active');

        setActiveMenuParentItem($li);
    }
}


Arlind

Hello, nice template. I don’t really understand the difference between Responsive table and Data table, sorry if it is obvious but I couldn’t find it in the documentation.

Thanks,

The difference between them is the Responsiveness, the Data Table does not show fine on mobile devices.

Best Regards,
Art

Hi, just purchase Xenon and looking/playing with a little, so far it looks amazing. I was playing a little with skins and I can change in in the base html files for instance adding ‘skin-navy’ class to the body element and it changes the skin for the nav bar but not for the chat pane. The demo on the website works fine but from the template files in my download it does not. Am I missing something?

Thanks, Troy

Never mind, I have it figured out.

Hey there,

sorry for the late reply, we’re glad to hear that you have fixed it in your own.

Best Regards,
Art

Hello! Any News about Signup Page? including “Signup with Facebook, Signup with Twitter, Signup with Google+” ?

I’m interested for these feature… Thanks

Hi there,

we have been busy working on a new theme which will be released this week, now we have more free time to work around with our theme updates and new features, we have a lot of work to do in Xenon and many features will be added in the new version.

Best Regards,
Art

Hi I want to purchase this theme but could you please add this plugin http://vitalets.github.io/angular-xeditable/ on your Table section, as Editable Tables. Example: http://jsfiddle.net/NfPcH/93/

Thanks and urime shqipe :)

Pershendetje Asdren

E shtova kete plugin ne liste per me e implementu ne versionin e ardhshem.

Shume faleminderit i nderuar


Arlind

Pershendetje Arlind, any news on the plugin? Any ETA :)? Thanks

Pershendetje Asdren

Me vjen keq per kohezgjatjen, mirepo keto dite kemi lansuar nje theme te re ne profilin tone dhe kemi ende pak pune me i rregullu disa probleme te cilat jane shfaqur ne theme. Menjehere pasi do te dal update-i i Kalium (theme-it) do t’ia filloj me implementimin e ketyre pluginave ne Xenon

Faleminderit per mirekuptimin i nderuar


Arlind

I also noticed that when I add two things into one view such as; I added the nestable-list with the calendar to the blank-page.html. However, only they only work by themselves. If I just you the calendar it works and if I only use the nestable-lists it works but as soon as I put them both in the view(blank-page.html) neither one works.

Please can you tell me what error is being generated in Error Console so I can figure out whats wrong there?

P.S: Please on the future please write us on one support ticket, and don’t open 3-4 tickets, it’s easier for us to read all your questions and answer them :)
Arlind

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