jqxTabs initTabContent

[TimParticipant]

I am trying to determine the steps to convert an existing project using jqWidgets to implement Angular. We use jqxTabs and jqxSplitter and at this time I cannot seem to get the controls working correctly. For example, on jqxTabs we initialize widgets that are embedded in the tabs using the initTabContent method.

<div ng-controller=”Dashboard”>
<jqx-tabs id=”dashboardTabs” class=”jqx-hideborder no-rounded-corners” jqx-settings=”dashboardTabSettings”>
<ul class=”tab-main-override”>
<li class=”tab-override” style=”margin-left: 5px;”>Tab 1
<li class=”tab-override”>Tab 2
<li class=”tab-override”>Tab 3
<li class=”tab-override”>Tab 4

<div>
<div id=”dashboardTabs_Tab1_Content” style=”margin: 25px; text-align: center; margin-left: auto; margin-right: auto;”>
content
</div>
</div>
<div>
<div id=”dashboardTabs_Tab2_Content” style=”margin: 25px; text-align: center; margin-left: auto; margin-right: auto;”>
content
</div>
</div>
<div>
<div id=”dashboardTabs_Tab3_Content” style=”margin: 25px; text-align: center; margin-left: auto; margin-right: auto;”>
content
</div>
</div>
<div>
<div id=”dashboardTabs_Tab4_Content” style=”margin: 25px; text-align: center; margin-left: auto; margin-right: auto;”>
content
</div>
</div>
</jqx-tabs>
</div>

and the Angular controller attempt #1:

app.controller(“Dashboard”, function ($scope, $http) {
$scope.dashboardTabSettings =
{
width: ‘100%’,
height: ‘100%’,
initTabContent:
function (tab) {
console.log(‘dashboardTabSettings initTabContent tab: %s’, tab);
switch (tab) {
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
}
}
};
});

and the Angular controller attempt #2:

app.controller(“Dashboard”, function ($scope, $http) {
$scope.dashboardTabSettings =
{
theme: _integronTheme,
width: ‘100%’,
height: ‘100%’
};

$scope.$on(‘initTabContent’, function (event, arguments) {
console.debug(‘$scope.$on initTabContent: %O %O’, event, arguments);
});
});

I do not see my console.log or console.debug output in running the project. Please help. Thank you.

[Peter StoevKeymaster]

Hi Tim,

initTabContent is not an event which means that you can subscribe to it using $scope.$on. The first attempt looks a little bit more correct and we will check whether this function is in the list of callbacks or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[TimParticipant]

Peter,

Thank you for the response. Does this mean that the initTabContent is not currently working correctly or do I have something wrong in the first attempt, which you said looks a little bit more correct. Can you provide me a working example?

Thank you!
Tim

[Peter StoevKeymaster]

Hi Tim,

It means that initTabContent is not supported at present. Your option is to create your content on “tabclick” and use boolean flags to determine whether the current clicked tab’s content is initialized or not. This also means that you’ll have to use the “jqx-create’ attribute to create the widgets on demand after a tab is clicked.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[TimParticipant]

Peter,

Thank you for the very quick response. Your response makes sense to me, however this leads to further questions.

At this time, is there a way to setup widgets inside tabs that are incorporated using Angular? I would ask the same question in regards to the jqxSplitter and even the jqxDataTable (nested tables specifically), are these able to have nested widgets that are incorporated using Angular?

I understand that this is still early in your company’s development to integrate Angular, so I am trying to determine if we are better off waiting to incorporate the Angular capabilities in our solution until a future release of your widgets to better handle some of the features we currently use.

Please let me know your thoughts and any other considerations we should keep in mind as we make our plans to move forward.
Thank you.
Tim

[Peter StoevKeymaster]

Hi Tim,

That is a strange question if you think that we have demonstrated integration and nesting of widgets in the AngularJS samples: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/docking.htm?arctic, http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/dropdownbutton.htm?arctic, nested splitters: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/splitter.htm?arctic.

However, it is your choice whether to use or not our directives. You can build your own, if you wish. We have documented this on the Documentation page, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[TimParticipant]

Peter,

Once again, thank you very much for your very quick responses.

I am not sure what I had done wrong in my initial attempts, but after rewriting the code it appears to be working now. I believe the key to the solution was the jqx-create attribute. I am breaking through my own walls in this unfamiliar territory of the Angular framework.

Great job on the widgets, I have been using them for over a year now and i am very pleased with the capabilities and improvements your company continues to add to the library.

Thank you again for your assistance.
Tim

[Author]

Posts