I'm using ag-grid to render a table in my angular 7.2.1 app. The custom cell renderer is just to render an edit button in the rows that will redirect to a different page.
I've done this before in a different app on a different Angular version a while ago, but for some reason the same code in this Angular 7 app is resulting in this. I think I may be missing something really simple.
I've created a minimalist reproduction of the error I'm seeing in this stackblitz - https://stackblitz.com/edit/angular-v98mjs
If you click on the Edit button, you will see this error in the console.
ERROR Error: Cannot read property 'navigate' of undefined
ag-grid versions:-
I'm using the following version for ag-grid:-
"ag-grid-angular": "^20.2.0", "ag-grid-community": "^20.2.0",
Please look at the stackblitz code in the link above for the code.
You needed to define onEdit with Arrow Function
onEdit = (row): void => {
console.log('row is being edited', {row})
this.router.navigate(['/new-url', { id: row.incidentId }], {
relativeTo: this.route.parent
});
};
More example such thing: ag-grid server side infinite scrolling accessing props
Have a look at the updated plunk: https://stackblitz.com/edit/angular-oppxte
Without arrow function, inside onEdit function of AppComponent was not able to get reference of this.router, and hence, you were getting the error.
Cannot read property 'navigate' of undefined
I have also introduced RootComponent and NewComponent for better modularity in the example. Hope it will be clear with that.
Related
Trying to get NavigatorIOS working in React Native but I'm having trouble getting a button to show up on the right. I'm calling this this block of code when the user successfully logs in using Facebook API:
this.props.navigator.replace({
title:"Agni",
component: SwipeScreen,
rightButtonTitle: 'Matches',
onRightButtonPress: () => { console.log("matches") },
passProps:{'token': {result: info}},
});
Does calling .replace intead of .push have anything to do with why it won't show up?
Thanks.
I was able to get my rightButtonTitle to appear when using this.props.navigator.push() as opposed to this.props.navigator.replace().
On the React Native's Github Issues page, this issue is exactly what you're experiencing. The last comment, from 25 days ago, also states that replace suffers from this same issue.
I would like to know how to update a row/col and or layout from an external js file on webix. Let's say I have a menu at the left of the screen (col[]) and want to update the right column based on a menu selection. If the menu is composed by
Customers
Orders
Products
And want to update the right column based on the selection calling customers.js, orders.js and products.js
Just like http://webix.com/demos/admin-app/#!/app/orders
That example is very advanced for me, I would like to learn some basic method.
Thanks
Oscar P
You can use webix.ui command or addView API to add a new UI to some specific place on the page.
webix.ajax("config.json", function(text){
$$("layout").addView( JSON.parse(text) );
})
or
webix.ajax("config.json", function(text){
webix.ui( JSON.parse(text), $$("cell_to_replace"));
})
Aquatic,
I also found out an example with .showBatch() API but the console shows "Uncaught TypeError: $$(...).addView is not a function" on both functions, are those part of PRO version? what is wrong?
My code is:
$$("workArea").addView("clientes");
or
$$("workArea").showBatch("batClientes");
on:{
onMenuItemClick:function(id) {
$$("workArea").addView(id);
}
}
I am pulling my hair out dealing with this problem.
These are the code that I used and caused the mentioned problem.
$(document).ready(function () {
$("#at-site-btn").bind("tap", function () {
$.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
});
$('#at-site-page').live('pagecreate', function(){
var $checked_emp = $("input[type=checkbox]:checked");
var $this = $(this);
var $msg = $this.find("#at-site-msg");
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');
$(document).trigger('create');
$this.trigger('create');
$("html").trigger('create');
});
});
Explanation:
The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.
This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.
Can anyone please suggest a way to solve this problem?
Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).
Best regards and thank you very much for your answers.
What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.
For re-painting or creation, the solution that #Taifun pointed out, which looks like:
$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");
worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.
Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.
I was actually using a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
so had to do this:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
See my full answer here.
Here are the codes I have to dynamically create and enhance a page. The similar pattern has been working for many other kinds, such as text field, button, grid-view, etc. But I found it cannot work with a listview.
$(document).bind("pagebeforechange", function route(e, data) {
...
$content = $page.children(":jqmData(role=content)");
var markup = '<ul id="calendarList" data-role="listview"><li>HELLO</li></ul>';
$content.html(markup);
$page.trigger('create');
$.mobile.changePage($page);
});
I would always get an error message like,
Cannot read property 'jQuery16409763167318888009' of undefined
Through debugging using Chrome, I found it always fails on the line of $page.trigger('create');
I found the solution myself. It works fine if I replaced the line,
$page.trigger('create');
with,
$page.page();
$content.find( ":jqmData(role=listview)" ).listview();
However, I still don't understand why. I thought the former was a newer, simpler syntax to replace the latter. A single call of $page.trigger('create'); can enhance the entire page at one shot. Does anyone know the difference of these two?
In jQuery UI 1.7, I had successfully overridden the datepicker._generateHTML function running a script in the form:
jQuery.datepicker._generateHTML = function(inst) {
...revised code...
};
When I attempted to upgrade to version 1.8 using the same approach, I encountered a problem. Version 1.8 added a datepicker closure scope variable dpuuid, which is referenced in the new version of the '...revised code...'. datepicker._generateHTML now fails with a dpuuid is not defined' error.
I'm still new enough to Javascript to not understand all the subtle aspects of the language. So my first question is: 'Can a function which references a closure scope variable be overridden and still access the original closure scope?'
I found the answer in Thomas' answer for jQuery DatePicker how to disable auto day selection while browsing calendar?
Adding the following to the top of my '...revised code...':
if (!inst.dpuuid) {
for (attr in window) {
if(/^DP_jQuery_/.test(attr)) {
inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '$1');
}
}
}
var dpuuid = inst.dpuuid;
eliminated the dpuuid is not defined' error. I had seen in FireBug that the closure scope was visible from the window object, but had no idea how to extract values from it.
Thanks Thomas!!