ag-Grid javaScript, TypeError: rowData is undefined - ag-grid

ag-Grid, following the official demo of javascript but using API like real world over hard-coded data. Note: no jQuery, just use the primitive plain XMLHttpRequest() for ajax.
F12 verified API returns data in the same structure as demo, has children node inside, and gripOptions.rowData is assigned with the returned data.
Tried instantiating rowData inside of gripOptions as
rowData: [], got the same error
Or
rowData: {}, got ReferenceError: rowData is not defined.
HTML:
<script src="/scripts/agGrid/ag-grid.js"></script>
<script src="/scripts/agGrid/myAG.js"></script>
<br />JavaScript ag-Grid
<div id="myGrid" style="height: 200px;" class="ag-fresh"></div>
myAG.js:
var httpApi = new XMLHttpRequest();
var columnDefs = [
{ headerName: "Client Name", field: "ClientName", unSortIcon: true, cellRenderer: "group" },
{ headerName: "Division", field: "Division" },
{ headerName: "Others", field: "Others" }
];
var gridOptions = {
columnDefs: columnDefs,
getNodeChildDetails: getNodeChildDetails
};
function getNodeChildDetails(rowItem) {
if (rowItem.ClientName) {
return {
group: true,
// provide ag-Grid with the children of this group
children: rowItem.children,
// the key is used by the default group cellRenderer
key: rowItem.ClientName
};
} else {
return null;
}
}
// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function () {
$.ajax({
type: "GET",
url: "/api/myAG/Tree",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
gridOptions.rowData = data;
var eGridDiv = document.querySelector('#myGrid');
new agGrid.Grid(eGridDiv, gridOptions);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
})
});
Version:
ag-grid = v8.1.0
FireFox = 50.1.0
Error message:
F12 confirms data exists and assigned:
inside of ag-grid.js, the line it complains about but rowData has data:

See this answered post, basically an additional check is needed for the tree.
ag-Grid, try to make Tree Demo work using own data

Related

Why is my page not rendering EnhancedGrid

Good day to all, while studying dojo, I ran into a problem that I do not draw an EnhancedGrid on my page. this error appears in the browser console:
dojo.js.uncompressed.js:1321 Uncaught TypeError: Cannot read property 'get' of null
at Object.getFeatures (ObjectStore.js.uncompressed.js:241)
at Object._setStore (DataGrid.js.uncompressed.js:14511)
at Object.advice (dojo.js.uncompressed.js:8428)
at Object.c [as _setStore] (dojo.js.uncompressed.js:8408)
at Object.postCreate (DataGrid.js.uncompressed.js:14351)
at Object.l (dojo.js.uncompressed.js:10753)
at Object.postCreate (EnhancedGrid.js.uncompressed.js:90)
at Object.create (DataGrid.js.uncompressed.js:4330)
at Object.postscript (DataGrid.js.uncompressed.js:4243)
at new <anonymous> (dojo.js.uncompressed.js:10950)
the grid drawing script looks like this:
var blogStore;
/**
* Creates Dojo Store.
*/
require(["dojo/store/JsonRest",
"dojo/data/ObjectStore"
], function (JsonRest, ObjectStore) {
blogJsonStore = new JsonRest({
handleAs: 'json',
target: 'http://localhost:8080/myservice'
});
var data = {
identifier: 'id',
items: []
};
blogJsonStore.query({
start: 0,
count: 10
}).then(function (results) {
var res =[];
res = results;
if (0 === res.length){
data.items.push("There are no entries in this blog. Create a post!!!")
}else {
data.items.push(results)
}
});
blogStore = new ObjectStore({data: data});
});
/**
* Creates Dojo EnhancedGrid.
*/
require(["dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Filter",
"dojox/grid/enhanced/plugins/NestedSorting",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function (EnhancedGrid) {
Grid = new EnhancedGrid({
id: 'grid',
store: blogStore,
structure: [
{ name: 'Message', field: 'text', datatype: 'string',
width: 'auto', autoComplete: true }
],
rowsPerPage: 5,
rowSelector: "20px",
selectionMode: "single",
plugins: {
nestedSorting: true,
pagination: {
description: true,
pageStepper: true,
sizeSwitch: true,
pageSizes: ["5","10","15","All"],
maxPageStep: 4,
position: "bottom"
}
}
});
Grid.placeAt('resultDiv');
Grid.startup();
});
if you remove the blog "Creates Dojo Store." it renders normally
Help me solve the problem. Thank you in advance for any help

How to fetch "return Response::json(array([....,....])) " data in Vuejs

How to fetch Laravel multiple return "array" data in Vuejs
Below Laravel code is working properly.
public function show($id)
{
$model = Fabricsbooking::with(['fileno','fileno.merchandiser', 'fileno.buyer', 'items.yarncount'])
->findOrFail($id);
$yarn = Fabricsbookingitem::with('yarncount')->where('fabricsbooking_id', $id)
->groupBy('yarncount_id')
->selectRaw('sum(qty)as yarn_qty, sum(total_yarn)as total_yarn, yarncount_id' )
->get();
return Response::json(array(['model'=>$model],['yarn'=> $yarn]));
}
api.js code
import axios from 'axios'
export function get(url, params) {
return axios({
method: 'GET',
url: url,
params: params,
})
}
export function byMethod(method, url, data) {
return axios({
method: method,
url: url,
data: data
})
}
Vue template page script:
<script>
import Vue from 'vue'
import {get, byMethod} from '../../lib/api'
export default {
data:()=>{
return{
show:false,
model:{
items:[],
fileno:{},
},
yarn:{}
}
},
beforeRouteEnter(to, from, next){
get(`/fabbooking/${to.params.id}`)
.then((res)=>{
next(vm=> vm.setData(res))
})
},
beforeRouteUpdate(to, from, next){
this.show = false
get(`/fabbooking${to.params.id}`)
.then((res)=>{
this.setData(res)
next()
})
},
methods:{
setData(res){
Vue.set(this.$data, 'model', res.data.model)
this.show=true
},
deleteItem(){
byMethod('delete', `/fabbooking/${this.model.id}`)
.then((res)=> {
if (res.data.deleted){
this.$router.push('/fabook')
}
})
}
},
}
</script>
When load the page in browser, shown below error code in Console
"app.js:682[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined""
Need to solutions for Vue template page script.
The problem here is Cannot read property 'id' of undefined
Since the only place you use id is in to.params.id it means that params is undefined.
You can double check it with the following test:
beforeRouteEnter(to, from, next){
console.log(to.params)//like this you check params has values.
},
Maybe your route is not correctly configured. Did you forget the "props:true" flag for example?
More info in the docs: vue route params

ag-grid-angular: Error TypeError: rowData.forEach is not function

Trying to incorporate ag-grid-angular in my project. I have succeeded in getting it to work with static data with filtering and sorting.
I am failing at setting it up with Dynamic data in async right now.
<ag-grid-angular
style="width: 1100px; height: 1000px;"
class="ag-theme-balham"
[enableSorting]="true"
[enableFilter]="true"
id ="mygrid"
[animateRows]="true"
[rowData]="rowss | async"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
In component.ts:
public rowss: any = null;
this.rowss = this.Service.getReport(this.model)
I have set the columns statically right now
columnDefs = [
{headerName: 'Make', field: 'make' },
{headerName: 'Model', field: 'model' },
{headerName: 'Price', field: 'price'}
];
In Service.ts:
getReport( request: ReportModel ) {
return this.http.get( this.URL + super.jsonToQueryParam( request ) ).map(( response: Response ) => response.json() );
}
I am getting this error message:
ng:///ProdCtnReportModule/ProdCtnReportComponent.ngfactory.js:100 ERROR TypeError: rowData.forEach is not a function
at ClientSideNodeManager.recursiveFunction (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:193)
at ClientSideNodeManager.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:65)
at ClientSideRowModel.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideRowModel.js:483)
at GridApi.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/gridApi.js:156)
at Function.ComponentUtil.processOnChange (webpack-internal:///./node_modules/ag-grid/dist/lib/components/componentUtil.js:120)
at AgGridNg2.ngOnChanges (webpack-internal:///./node_modules/ag-grid-angular/dist/agGridNg2.js:363)
at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/#angular/core/esm5/core.js:12623)
at checkAndUpdateNodeInline (webpack-internal:///./node_modules/#angular/core/esm5/core.js:14151)
at checkAndUpdateNode (webpack-internal:///./node_modules/#angular/core/esm5/core.js:14094)
at debugCheckAndUpdateNode (webpack-internal:///./node_modules/#angular/core/esm5/core.js:14987)
The data we get from the API call is the same as the data I used when setting it up statically. The return result is an Array as requested.
Please advice what needs to be done make it work.
The error here is that you are trying to assign an Observable as data for ag-grid.
.map() returns an observable which you should subscribe to and provide data to ag-grid.
Something like this -
const rowss$ = this.Service.getReport(this.model);
rowss$.subscribe(rowData => {
params.api.setRowData(rowData);
});
Keep in mind that this error -
rowData.forEach is not a function
is a very good indicator that your rowData is not an array.
More on map vs subscribe here
AgGrid - Angular
1. Backend: first of all make sure your backend is returning an array of objects
For Example: List detail = new ArrayList<>();
[
{
"stockId": 1,
"side": "Buy",
"status": "Saved"
},
{
"stockId": 2,
"side": "Sell",
"status": "Saved"
}
]
If you're using the Enterprise version for master-detail then you need to make sure that your findById in your controller, for instance, is returning an array of 1 object [{}]
agGrid Docs: https://www.ag-grid.com/javascript-grid-master-detail/
In this link from AgGrid doc example, the callRecords field below is returning an array of objects.
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
}
I hope this helps.

Form not submit

I have a edit user form. The form is loaded from a Json store with this code:
var store = Ext.create('cp.store.form.Paciente',{});
store.load({params:{idUsuario: idPaciente}});
var form = Ext.create('cp.view.form.EditPaciente',{
action: 'bin/paciente/modificar.php'
});
// note: write this lines in the controller
form.on('afterrender',function(form,idPaciente){
form.getForm().loadRecord(store.first());
form.getForm().findField('idUsuario').setValue(idPaciente);
});
var win = Ext.create('cp.view.ui.DecoratorForm',{
aTitle: 'Editar paciente',
aForm: form
});
win.show();
The load code works fine. The submit code is:
var me = this;
console.log('Submit...');
console.log(this.url);
// WHY NOT SUBMIT !!!!
this.getForm().submit({
console.log('submit !');
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});
So, the submit code starts running. FireBug shows the first and second "console.log", and the "this.url" value is correct. But, the third "console.log" not execute, and the form not send to the server.
Firebug not says 404 error for "this.url" value.
Any ideas ?
Thanks !
Add the form definition:
Ext.define('cp.view.form.EditPaciente',{
extend: 'Ext.form.Panel',
alias: 'widget.editPaciente',
bodyPadding: '5px 5px 5px 5px',
bodyStyle: 'border: none',
fieldDefaults: {
labelWidth: 65,
labelAlign: 'top'
},
initComponent: function(){
this.url = this.action,
this.method = 'POST',
this.items = [ .... ]
this.callParent(arguments);
}
});
You cant put log statements inside object literals.
submit({ <-- This is an object literal
console.log('submit !'); <-- This can not be in an object literal
success: function(form,action){
if(action.result.success === true){
Ext.create('cp.view.ui.AlertOk',{mensaje:action.result.msg}).showDialog();
me.up('decoratorForm').close();
}else{
Ext.create('cp.view.ui.AlertErr',{mensaje:action.result.msg}).showDialog();
}
}
});

KendoUI: Unable to bind data to HTML elements from JSON file.

I am new to kendo ui and mvvm, and I'm facing this issue:
I'm having a JSON file in the follow format:
[
{
"Id":1,
"img":"shoes.png"},
{"Id":2,
"img":"books.png"}
}
]
I am reading the file using the sample mentioned online by kendo guys as follows:
var crudServiceBaseUrl = "pro.json";
var viewModel = kendo.observable({
productsSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: crudServiceBaseUrl,
dataType: "json"
},
destroy: {
url: crudServiceBaseUrl,
dataType: "json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "Id"
}
}
})
});
kendo.bind($("#form-container"), viewModel);
I am able to bind the data from the data source to a Kendo Control such as a dropdownlist or some other Kendo Control. But when I try binding the data to an HTML Control (mostly an img tag). It stops working and gives an error saying "this.parent" is not a function.
following is the HTML which works:
Select Product: <select data-role="dropdownlist" data-value-field="Id" data-text-field="img"
data-bind="source: productsSource"></select>
However binding to a normal <img> tag does not work. In short I need to bind images based on src value to a div using kendo ui mvvm.
Kindly help me out. Thanks!!
-
Hardik
Currently Kendo MVVM cannot bind a data source to an HTML element. Only Kendo UI widgets can be bound to a kendo.data.DataSource. Using a widget e.g. the ListView would work for a DIV:
<div data-role="listview"
data-template="template"
data-bind="source: productsSource">
</div>
<script id="template" type="text/x-kendo-template">
<img data-bind="attr: { src: img }" />
</script>