Databinding using jqx-expanded directive

[fritzfrancisParticipant]

I currently have a jqxExpander set up using Angular, like this:

<jqx-expander ng-if="locationType.IsLoaded" data-ng-repeat="equipmentType in locationType.EquipmentTypes" jqx-expanded="equipmentType.IsExpanded" jqx-on-expanding="OnEquipmentTypeExpanding(event)">
    <div>{{ equipmentType.EquipmentTypeName }}</div>
    <div>(expander content here)</div>
</jqx-expander>

It looks like the jqx-expanded directive is not two-way data bound, which creates issues with keeping the expanded property and the scope variable in sync. Changing the variable properly expands/collapses the expander, but expanding/collapsing by clicking does not update the variable. In my jqx-on-expanding function, I have manually added a line of code that explicitly sets the IsLoaded variable to true, and this seems to work. The problem I can’t fix is when collapsing the expander. I have tried adding the directive jqx-on-collapsed="locationType.IsLoaded = false" to the element, and that is not working. I’ve also tried it with the collapsing event as well. Nothing is working.

How can I simply keep the expanded state and the scope variable in sync?

Regards,
Fritz Francis

[adminKeymaster]

Hi Fritz Francis,

You can use the widget’s Events to know when it is collapsed or expanded either by user or API.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fritzfrancisParticipant]

As I stated, I have already tried using all four events (expanded, expanding, collapsed, and collapsing) to manually set my IsExpanded property to either true or false. The collapse and collapsing events are not working. I have tried jqx-on-collapsed="locationType.IsLoaded = false", but when I collapse an open expander, I go in and look at the IsExpanded property, and it’s still set to true.

Please advise.

Regards,
Fritz Francis

[Peter StoevKeymaster]

Hi Fritz Francis,

To learn how to bind to events, visit the page which explains how to bind to events. The binding which you have now is wrong.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fritzfrancisParticipant]

I understand how to bind events with angular. My expanded and expanding events work just fine. Please provide a working example, or at least provide more detail than just “the binding which you have now is wrong”.

[Peter StoevKeymaster]

jqx-on-collapsed=”locationType.IsLoaded = false” – such code will not and cannot work. How to bind to events is demonstrated in the examples available online on our website which I suggest you to look at. I see no reason to build a new example when there are multiple already available.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[fritzfrancisParticipant]

Looks like I’ll have to get more detailed in order to get any support.

Here’s what my OnEquipmentTypeExpanding function looks like.

$scope.OnEquipmentTypeExpanding = function (event)
{
	var id = event.data("id");
	var equipmentType = $scope.FindEquipmentType(id);
	equipmentType.IsExpanded = true;
};

In my jqx-expander element, I’ve added a data-id field that contains the ID of the particular equipment type expander I’m trying to expand. This is then used to find the right object in my scope and set its IsExpanded property to true. This works fine.

In addition to the example I’ve sited, I’ve also tried doing the same thing for collapsing, but inversely. In my jqx-expander element, I added jqx-on-collapsing="OnEquipmentTypeCollapsing(event)". Here’s what the function looks like:

$scope.OnEquipmentTypeCollapsing = function (event)
{
	var id = event.data("id");
	var equipmentType = $scope.FindEquipmentType(id);
	equipmentType.IsExpanded = false;
};

I know the issue isn’t with my FindEquipmentType function, because it works fine when expanding. Using the Chrome extension ng-inspector, I can see that the IsExpanded property correctly changes to true when expanding, but it does not work when collapsing.

Please advise.

[Author]

Posts