jqx Angular framework and UI-Router not working

[Ankit ShahParticipant]

Hello JQX team,

We are developing a website with Angular JS. For some complex routing requirements we opted to use UI.Router framework and NOT angular router framework.
While doing so, we are experiencing an issue with jqWidget controls not working properly and giving error like ‘Cannot read property ‘created’ of undefined’.
For your reference to the code, I have created a plunker which demonstrate the issue.
Can you please help us in resolving this issue?
Thank you,
Ankit Shah

[Peter StoevKeymaster]

Hi Ankit Shah,

Thanks for feedback. We will look into this for jQWidgets 3.8.2 which will be released in August.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Ankit ShahParticipant]

Hello Peter,

Thank you for your quick response.

We need to make a decision quickly on the direction we are going to take with our development.

Do you feel that there will be a good probability that it will be fixed in 3.8.2 release?

— Ankit

[Peter StoevKeymaster]

Hi Ankit Shah,

“We will look into this” means that will look it, but I can’t tell 100% whether we will be able to fix it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmarongeadParticipant]

I just downloaded your latest widgets, version , for a POC and I to am getting the error:

TypeError: Cannot read property 'created' of undefined
    at ab (jqx-all.js:7)
    at Z (jqx-all.js:7)
    at aa (jqx-all.js:7)
    at jqx-all.js:7
    at angular.js:14536
    at Scope.$eval (angular.js:15719)
    at Scope.$digest (angular.js:15530)
    at Scope.$apply (angular.js:15824)
    at tick (angular.js:10983)

We are also using UI.Router. The below is based off 2 samples you provided.

<jqx-splitter jqx-settings="splitterSettings">
    <div>
        <div style="border: none;" id="feedExpander" jqx-settings="feedExpander">
            <div class="jqx-hideborder">
                Sidebar header
            </div>
            <div class="jqx-hideborder jqx-hidescrollbars">
                <div class="jqx-hideborder" id='jqxTree'>
                    Sidebar Body
                </div>
            </div>
        </div>
    </div>
    <div>
        <jqx-splitter jqx-settings="nestedSplitterSettings">
            <div id="feedUpperPanel">
                <div class="jqx-hideborder" id="feedListExpander" jqx-settings="feedListExpander">
                    <div class="jqx-hideborder" id="feedHeader">
                        Main Toolbar Goes Here
                    </div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id="feedListContainer">
                            Main Body
                        </div>
                    </div>
                </div>
            </div>
            <div id="feedContentArea">
                <div class="jqx-hideborder" id="feedContentExpander" jqx-settings="feedContentExpander">
                    <div class="jqx-hideborder" id="feedItemHeader">
                       Bottom Header Goes Here
                    </div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id="feedItemContent">
                            Bottom Body
                        </div>
                    </div>
                </div>
            </div>
        </jqx-splitter>
    </div>
</jqx-splitter>

$scope.splitterSettings = {
                width: 850,
                height: 600,
                panels: [{ size: 200, min: 100 },
                    { min: 200, size: '100%' }],
                initContent: () => { }
            };
            $scope.nestedSplitterSettings = {
                width: '100%',
                height: '100%',
                orientation: 'horizontal',
                panels: [{ size: 400, min: 100, collapsible: false },
                    { min: 100, collapsible: true }],
                initContent: () => { }
            };
            $scope.feedExpander = {
                toggleMode: 'none',
                showArrow: true,
                width: "100%",
                height: "100%",
                initContent: () => { }
            };
            $scope.feedContentExpander = {
                toggleMode: 'none',
                showArrow: true,
                width: "100%",
                height: "100%",
                initContent: () => { }
            };
            $scope.feedListExpander = {
                toggleMode: 'none',
                showArrow: true,
                width: "100%",
                height: "100%",
                initContent: () => { }
            };

I need to know if this is fixed or is there a workaround? If not, then we will have to go another direction since I can’t see to get your widgets to work.

Thanks,

Jason

[Peter StoevKeymaster]

Hi Jason,

For using jqxSplitter, look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/splitter.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jmarongeadParticipant]

Peter,

Your example does not use the UI Router like Ankit and I am using while receiving this error.

BTW, I did fine an issue with the html I posted above and have corrected it and it still gives me the error:

I have seen that your stuff works on your site, but it is not working when I try to integrate it into our app. Is there some other

<jqx-splitter jqx-settings="splitterSettings">
    <div>
        <jqx-expander style="border: none;" id="feedExpander" jqx-settings="feedExpander">
            <div class="jqx-hideborder">
                Sidebar header
            </div>
            <div class="jqx-hideborder jqx-hidescrollbars">
                <div class="jqx-hideborder" id='jqxTree'>
                    Sidebar Body
                </div>
            </div>
        </jqx-expander>
    </div>
    <div>
        <jqx-splitter jqx-settings="nestedSplitterSettings">
            <div id="feedUpperPanel">
                <jqx-expander class="jqx-hideborder" id="feedListExpander" jqx-settings="feedListExpander">
                    <div class="jqx-hideborder" id="feedHeader">
                        Main Toolbar Goes Here
                    </div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id="feedListContainer">
                            Main Body
                        </div>
                    </div>
                </jqx-expander>
            </div>
            <div id="feedContentArea">
                <jqx-expander class="jqx-hideborder" id="feedContentExpander" jqx-settings="feedContentExpander">
                    <div class="jqx-hideborder" id="feedItemHeader">
                        Bottom Header Goes Here
                    </div>
                    <div class="jqx-hideborder jqx-hidescrollbars">
                        <div class="jqx-hideborder" id="feedItemContent">
                            Bottom Body
                        </div>
                    </div>
                </jqx-expander>
            </div>
        </jqx-splitter>
    </div>
</jqx-splitter>

The issue that I am seeing with that error is that you are trying to check the created property of the object but the object is not defined. The if statement has f(U.jqxSettings)(V).created without checking to see if f(U.jqxSettings)(V) is not undefined.

I really need to get to the bottom of this so I can give management a POC, without getting this to work I can’t advise them to let us to use your suite.

[Author]

Posts