grid No data to display - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angular grid, angular2 grid, bootstrap grid, grid, javascript grid, jquery grid, jqwidgets grid, jqxgrid, typescript grid

This topic contains 5 replies, has 3 voices, and was last updated by Peter Stoev 7 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

grid No data to display Posts

January 25, 2017 at 8:33 pm grid No data to display #91008

holap

Participant

Hi, I’m trying to get the grid load data from server but I always get “No data to display” message, even if the grid actually calls the server url and downloads the json string. I spent some hours with this problem and can’t solve it.

index.html


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>OrionVending</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/components/site.css">
  <link rel="stylesheet" href="./libs/jqwidgets/styles/jqx.base.css" type="text/css" />
  <link href="./libs/jqwidgets/styles/jqx.web.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="./libs/jqwidgets/jqx-all.js"></script>
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

countries-list.ts


import { Component, OnInit } from '@angular/core';
import { CountryService } from "../services/country.service"
import { Country } from "../models/country.model"
import { jqxGridComponent } from "../../libs/jqwidgets-ts/angular_jqxgrid"

@Component({
  selector: 'countries-list',
  templateUrl: './countries-list.component.html',
  styleUrls: ['./countries-list.component.css']
})
export class CountriesListComponent implements OnInit {

  constructor(private service : CountryService) { }

  ngOnInit() {
  }

  source: any =
  {
      datatype: "jsonp",
      datafields: [
        { name: 'Id', type: 'number' },
        { name: 'Name', type: 'string' },
        { name: 'Code', type: 'string'}
      ],
      url : "http://localhost:51790/api/Countries/"
  };

  dataAdapter: any = new $.jqx.dataAdapter(this.source);
  columns: any[] =
  [
      { text: 'ID', datafield: 'Id', width: 50 },
      { text: 'Name', datafield: 'Name', width: 230},
      { text: 'Code', datafield: 'Code', width: 50},
  ];
}

countries-list.html


<jqxGrid #gridReference 
    [source]='dataAdapter' [sortable]='true'
    [pageable]='true' [columnsresize]='true' [autoheight]='true'
    [columns]='columns' [selectionmode]='"multiplerowsextended"'>
</jqxGrid>

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CountryService } from "./services/country.service"

import { jqxGridComponent } from '../libs/jqwidgets-ts/angular_jqxgrid';

import { AppComponent } from './app.component';
import { CountriesListComponent } from './countries-list/countries-list.component';

@NgModule({
  declarations: [
    AppComponent,
    jqxGridComponent,
    CountriesListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    CountryService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html


<countries-list></countries-list>

response


[
  {
    "Id": 1,
    "Code": "IT",
    "Name": "Italy"
  },
  {
    "Id": 2,
    "Code": "GE",
    "Name": "Germany"
  },
  {
    "Id": 3,
    "Code": "FR",
    "Name": "France"
  }
]

January 26, 2017 at 8:57 am grid No data to display #91027

Hristo

Participant

Hello holap,

I try our “Paging” demo with your settings to the Grid and works fine.
I would like to suggest you check the DataAdapter. You could try to implement loadError(jqXHR, status, error): callback of the DataAdapter.
Also, could add and downloadComplete(edata, textStatus, jqXHR): to check the received data.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

January 27, 2017 at 9:26 pm grid No data to display #91065

holap

Participant

Thanks for the hint, actually I get a parsererror, but I can’t understand why. The json data I get as input (I see it with chrome inspector) is fine. The problem occurs only with datatype: “jsonp”. If I change it to datatype: “json” it works. Is it a bug?

January 27, 2017 at 11:54 pm grid No data to display #91067

Peter Stoev

Keymaster

Hi holap,

jsonp or JSON with Padding should be used when you actually have a use-case scenario about it and requires additional callbacks on a remote server which is not in the same domain i.e using it in your case with data in the same domain will raise errors which is expected. I mean that there is an error, but it’s in the initialization you used. It should be JSON.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 28, 2017 at 5:12 am grid No data to display #91072

holap

Participant

Thanks Peter but I must disagree. Actually I used two domains, as I was serving json data on localhost:51790 while the angualar app runs on localhost:4200. The first runs in debug mode with visual studio 2015 update 3 (asp net core if it matters), the latter runs from command line (project created and build with angular-cli commands ng new and ng serve).
If I allow cors with app.UseCors(builder => builder.WithOrigins("http://localhost:4200")); directive on server I can use datatype: “json” with no problem.

January 28, 2017 at 11:57 am grid No data to display #91074

Peter Stoev

Keymaster

Hi holap,

You should be careful which settings to set in different scenarios. Basically, we make AJAX request and set the dataType of the AJAX request using your settings. If it fails, is it our fault? I think that it is not, because we use your settings to make the AJAX request.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.