Below are the Ignite UI versions
"ignite-ui": "^18.2.67", "igniteui-angular": "^9.1.28", "igniteui-angular-charts": "^9.1.2", "igniteui-angular-core": "^9.1.2", "igniteui-angular-wrappers": "^9.1.1"
grid is not loading,I am using remote call.
Hello,
Thank you for posting in Infragistics Forum!
We'll need more context on the scenario in order to do some investigations.
Can you provide a sample demonstrating the issue?
Also could you do a quick test if the issue is replicating with angular 11 and igniteui-angular-wrappers 11?
like this we have initialized hierarchical grid ,please let me know if you need any other information
this.ds = new $.ig.DataSource({ dataSource: data, responseDataKey: "result", urlParamsEncoding: function (owner, params) { if (pageLoad) { newFilters.filter((item) => { owner.settings.filtering.expressions.push(item) }) pageLoad = false; } return true; } });
this.hgridOptions = { initialDataBindDepth: 1, responseDataKey: "result", dataSource: this.ds, //$.ajax({ url: 'foo/bar' }); primaryKey: "transactionId", requestError: function (evt, ui) { if (ui.message.indexOf("401") > -1) { $("#gettoken").click()//document.getElementById("accessdenied").click(); } } else { return false; } }, width:'100%', autoGenerateColumns: false, columns: [ { key: "transactionId", headerText: "PO Number #", dataType: "string", hidden: true }, { key: "poNumber", headerText: "PO Number #", dataType: "string", width: "150px" }, { key: "poDate", headerText: "PO Date", dataType: "date", format: "MMM dd, yyyy", dateDisplayType: "local", width: "210px" }, { key: "poStatus", headerText: "PO Status", dataType: "string", width: "150px" }, { key: "status", headerText: "Submission Status", dataType: "string", width: "180px" }, { key: "modifiedDt", headerText: "Submission Date", dataType: "date", format: "MMM dd, yyyy hh:mm tt", dateDisplayType: "local", width: "210px" } ], //childrenDataProperty: "Employee", autoGenerateLayouts: false, features: [ { name: "Paging", type: "remote",//remote pageSize: 10, recordCountKey: "TotalRecordsCount", pageSizeDropDownLocation: "inpager", pageIndexChanged: function (evt, ui) { window.scroll(0, 0) }
}, { name: "Filtering", type: "remote", mode: 'simple', allowFiltering: true, caseSensitive: false, }, ], columnLayouts: [ { key: "child", autoGenerateColumns: false, width: "100%", columns: [ { key: "transactionId", hidden: true }, { key: "status", hidden: true }, { key: "poStatus", hidden: true }, { key: "childManufacturerId", headerText: "Part#", hidden: true }, { key: "pO_ProductId1", headerText: "Part#", width: "100px" }, { key: "contract", headerText: "Contract", width: "300px" }, { key: "poDescription", headerText: "Description", width: "200px" }, { key: "pO_QuantityOrdered", headerText: "Qty", width: "65px" }, { key: "pO_UnitPrice", headerText: "Cost", width: "100px", template: "$${pO_UnitPrice}", columnCssClass: "numericAlignment", formatter: function (value) { return parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') } }, { key: "totalPrice", headerText: "Cost Extension", width: "185px", template: "$${totalPrice}", columnCssClass: "numericAlignment", formatter: function (value) { return parseFloat(value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') } }, { headerText: "Actions", width: "53px", key: "pO_AssignedIdentification", template: //"<a onclick = 'angularComponentRef.geteditmodal(5)' title = 'Edit' style = 'cursor:pointer;'> edit </a>" "{{if (${status}!='InTransit') && (${poStatus}!='Cancelled')}}<button type='button' class='btn btn-primary btn-lg' data-toggle='modal' onclick='angularComponentRef.geteditmodal(\"${transactionId}\",${childManufacturerId})'>Edit</button>{{/if}}" }
] } ] }
I created another sample for you using angular 9 and Ignite UI v18.2. The hierarchical grid loads as expected and there are no errors.
my-app.zip
I am not able to run the application, couldn't install this package
"@angular/platform-browser-dynamic": "~9.1.13",
Below is the Package.json ,I am using.
Please check this,and let me know the changes.
{ "name": "Acmetek.Web", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng build", "build:ssr": "npm run build -- --app=ssr --output-hashing=media", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "node": "--max_old_space_size=8192 node_modules/@angular/cli/bin/ng build client --prod" }, "private": true, "dependencies": { "@angular/animations": "9.1.13", "@angular/cdk": "^9.2.4", "@angular/common": "9.1.13", "@angular/compiler": "9.1.13", "@angular/core": "9.1.13", "@angular/forms": "9.1.13", "@angular/localize": "^9.1.13", "@angular/material": "^9.2.4", "@angular/platform-browser": "9.1.13", "@angular/platform-browser-dynamic": "9.1.13", "@angular/platform-server": "9.1.13", "@angular/router": "9.1.13", "@auth0/angular-jwt": "^2.0.0", "@azure/msal-angular": "^1.1.2", "@azure/msal-browser": "^2.11.2", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@infragistics/igniteui-angular": "^11.1.1", "@infragistics/igniteui-dockmanager": "^1.3.0", "@ng-bootstrap/ng-bootstrap": "6.2.0", "@ng-idle/core": "^6.0.0-beta.3", "@ng-idle/keepalive": "^6.0.0-beta.3", "@nguniversal/aspnetcore-engine": "^9.1.1", "@nguniversal/module-map-ngfactory-loader": "^6.0.0", "@syncfusion/ej2-base": "17.1.38", "@types/hammerjs": "^2.0.35", "@types/moment": "^2.13.0", "@types/moment-timezone": "0.5.7", "angular-archwizard": "^3.0.0", "angular-user-idle": "^2.0.0", "angular2-cookie": "^1.2.6", "aspnet-prerendering": "^3.0.1", "bootstrap": "^3.4.1", "ckeditor4-angular": "^1.0.0-beta.2", "classlist.js": "^1.1.20150312", "clipboard": "^2.0.4", "core-js": "^2.4.1", "file-saver": "^2.0.1", "font-awesome": "^4.7.0", "hammerjs": "^2.0.8", "html2canvas": "^1.0.0-rc.1", "@infragistics-ignite-ui-full": "^18.2.67", "igniteui-angular-charts": "^9.1.2", "igniteui-angular-core": "^9.1.2", "igniteui-angular-wrappers": "^9.1.1", "install": "^0.12.1", "jquery": "^3.3.1", "jspdf": "^1.5.3", "jszip": "^3.1.5", "moment": "^2.18.1", "moment-timezone": "0.5.7", "msal": "^1.4.4", "ng": "0.0.0", "ng-http-loader": "^3.0.0", "ng-multiselect-dropdown": "^0.2.3", "ng2-datepicker": "^3.1.1", "ng5-slider": "^1.2.4", "ngx-clipboard": "^11.1.9", "ngx-loading-spinner": "^0.1.0", "ngx-slimscroll": "^11.0.0", "ngx-ui-switch": "^8.0.1", "node-sass": "^4.11.0", "npm": "^6.10.3", "npm-git-install": "^0.3.0", "rollup-plugin-replace": "^2.0.0", "rxjs": "6.6.6", "rxjs-compat": "6.2.2", "serve": "^10.1.1", "sp-pnp-js": "^3.0.10", "tslib": "^1.10.0", "web-animations-js": "^2.3.2", "whatwg-fetch": "^3.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.14", "@angular-devkit/build-optimizer": "0.6.7", "@angular/cli": "9.1.14", "@angular/compiler-cli": "9.1.13", "@angular/language-service": "9.1.13", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "cross-env": "^5.0.5", "increase-memory-limit": "^1.0.3", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "^3.8.3" }, "optionalDependencies": { "node-sass": "^4.9.0" }}
Not sure why you can't install this package, it's part of Angular. You can try installing it with the following command:
npm i @angular/platform-browser-dynamic@9.1.13
or you can download if from unpkg - https://unpkg.com/browse/@angular/platform-browser-dynamic@9.1.13/
sorry not this package.
not able to install ignite-ui,below package
@infragistics/ignite-ui-full
The package @infragistics/ignite-ui-full is not is not available in npm registry.
It requires a licensed copy of Ignite UI for jQuery. And It can be downloaded from our private feed and this topic explains it in detail.
I see you are receiving an error, but I'm not able to replicate it.
My best guess would be that there is some mismatch between the data and the grid expectations for that data.
There could be some sort of circular reference there or if the data is enormous.
Could you try returning empty data from your API endpoint and see if the error persists?
can you please this issue asap
Now I Was installed Ignite-ui-full. still have an issue with hierarchical grid. Its works fine in angular 6, after upgraded angular 6 to 9,its not working. can you please let me know the issue asap.
getting this issue, data is not loading to the grid but I have seen that it call s to the API but before APIreturns the results it throws the error
Now i can able to install ignite-ui-full. but still grid is not loading the data, it goes to the api call but before completion of the service call its throws the error. please let me know the issue it works fine in angular6 after upgrade angular 6 to 9 its not working.