JQXWidget: jqxMenu doesn't like ngFor loop inside of it to populate context sensitive menu options?
I have a jqxmenu but the content is defined by a ngFor. With static information it renders as designed, but when i shift to a ngFor loop which is set dynamically, it doesnt seem to properly apply classes accordingly.
<jqxMenu #gridMenu [width]="240" [height]="'auto'" [mode]="'popup'" [autoOpenPopup]="false" [theme]="'context'">
<ul>
<li *ngFor="let toolbarItem in toolbar">
<i><span{{toolbarItem['text']}}</span></i>
</li>
</ul>
</jqxMenu>
I tried to do something like:
<jqxMenu #gridMenu [auto-create]="false">...</jqxMenu>
and then created a change detector:
@ViewChild("gridMenu") gridMenu: jqxMenuComponent;
ngOnChanges() {
this.gridMenu.createComponent();
}
This also seems to fail. I noticed it would not apply the JQX classes as it would normally, and similarly close on click. I find it odd. I was tempted to just programatically add them all, but i didnt want to create a hack to add/remove the items if there is an actual step I am just missing.
Is there something I can do such that it would render correctly? I also looked at the API (https://www.jqwidgets.com/angular-components-documentation/documentation/jqxmenu/angular-menu-getting-started.htm?search=) and also noticed that there was no redraw method either.
Is there a way to do this, or should I write additional code to add/remove the classes for non-hover and hover states and apply accordingly?
javascript angular jqxwidgets
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
add a comment |
I have a jqxmenu but the content is defined by a ngFor. With static information it renders as designed, but when i shift to a ngFor loop which is set dynamically, it doesnt seem to properly apply classes accordingly.
<jqxMenu #gridMenu [width]="240" [height]="'auto'" [mode]="'popup'" [autoOpenPopup]="false" [theme]="'context'">
<ul>
<li *ngFor="let toolbarItem in toolbar">
<i><span{{toolbarItem['text']}}</span></i>
</li>
</ul>
</jqxMenu>
I tried to do something like:
<jqxMenu #gridMenu [auto-create]="false">...</jqxMenu>
and then created a change detector:
@ViewChild("gridMenu") gridMenu: jqxMenuComponent;
ngOnChanges() {
this.gridMenu.createComponent();
}
This also seems to fail. I noticed it would not apply the JQX classes as it would normally, and similarly close on click. I find it odd. I was tempted to just programatically add them all, but i didnt want to create a hack to add/remove the items if there is an actual step I am just missing.
Is there something I can do such that it would render correctly? I also looked at the API (https://www.jqwidgets.com/angular-components-documentation/documentation/jqxmenu/angular-menu-getting-started.htm?search=) and also noticed that there was no redraw method either.
Is there a way to do this, or should I write additional code to add/remove the classes for non-hover and hover states and apply accordingly?
javascript angular jqxwidgets
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
add a comment |
I have a jqxmenu but the content is defined by a ngFor. With static information it renders as designed, but when i shift to a ngFor loop which is set dynamically, it doesnt seem to properly apply classes accordingly.
<jqxMenu #gridMenu [width]="240" [height]="'auto'" [mode]="'popup'" [autoOpenPopup]="false" [theme]="'context'">
<ul>
<li *ngFor="let toolbarItem in toolbar">
<i><span{{toolbarItem['text']}}</span></i>
</li>
</ul>
</jqxMenu>
I tried to do something like:
<jqxMenu #gridMenu [auto-create]="false">...</jqxMenu>
and then created a change detector:
@ViewChild("gridMenu") gridMenu: jqxMenuComponent;
ngOnChanges() {
this.gridMenu.createComponent();
}
This also seems to fail. I noticed it would not apply the JQX classes as it would normally, and similarly close on click. I find it odd. I was tempted to just programatically add them all, but i didnt want to create a hack to add/remove the items if there is an actual step I am just missing.
Is there something I can do such that it would render correctly? I also looked at the API (https://www.jqwidgets.com/angular-components-documentation/documentation/jqxmenu/angular-menu-getting-started.htm?search=) and also noticed that there was no redraw method either.
Is there a way to do this, or should I write additional code to add/remove the classes for non-hover and hover states and apply accordingly?
javascript angular jqxwidgets
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
I have a jqxmenu but the content is defined by a ngFor. With static information it renders as designed, but when i shift to a ngFor loop which is set dynamically, it doesnt seem to properly apply classes accordingly.
<jqxMenu #gridMenu [width]="240" [height]="'auto'" [mode]="'popup'" [autoOpenPopup]="false" [theme]="'context'">
<ul>
<li *ngFor="let toolbarItem in toolbar">
<i><span{{toolbarItem['text']}}</span></i>
</li>
</ul>
</jqxMenu>
I tried to do something like:
<jqxMenu #gridMenu [auto-create]="false">...</jqxMenu>
and then created a change detector:
@ViewChild("gridMenu") gridMenu: jqxMenuComponent;
ngOnChanges() {
this.gridMenu.createComponent();
}
This also seems to fail. I noticed it would not apply the JQX classes as it would normally, and similarly close on click. I find it odd. I was tempted to just programatically add them all, but i didnt want to create a hack to add/remove the items if there is an actual step I am just missing.
Is there something I can do such that it would render correctly? I also looked at the API (https://www.jqwidgets.com/angular-components-documentation/documentation/jqxmenu/angular-menu-getting-started.htm?search=) and also noticed that there was no redraw method either.
Is there a way to do this, or should I write additional code to add/remove the classes for non-hover and hover states and apply accordingly?
javascript angular jqxwidgets
javascript angular jqxwidgets
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
asked Nov 19 '18 at 21:17
FallenreaperFallenreaper
4,08783484
4,08783484
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382764%2fjqxwidget-jqxmenu-doesnt-like-ngfor-loop-inside-of-it-to-populate-context-sens%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53382764%2fjqxwidget-jqxmenu-doesnt-like-ngfor-loop-inside-of-it-to-populate-context-sens%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
