jqWidgets: Data and grid are not displayed

Question

I am using jqWidgets to create a grid using jqxGrid in Angular.

I have followed this demo here To get a table grid

However all I see within the browser is the column name and no outlines around the columns and rows. Also there is no data displayed even though I am linking to the xml where all the data is set, but nothing is displayed.

import { Component } from '@angular/core';
import { jqxGridComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxgrid';

@Component({
templateUrl: 'buttons.component.html',
selector: 'my-app',

})
export class ButtonsComponent {

constructor() { }

source: any =
 {
    datatype: "xml",        
    datafields: [
        { name: 'EmployeeNum', type: 'int' },
        { name: 'FullName', type: 'string' },
        { name: 'MarketCenter', type: 'string' },
        { name: 'FunctionTitle', type: 'string' },
        { name: 'HireDate', type: 'date' },
        { name: 'TermDate', type: 'date' }
    ],
    root: "Employees",
    record: "Employ",
    id: 'EmployeeID',

    url: "demos/sampledata/products.xml"
 };

dataAdapter: any = new $.jqx.dataAdapter(this.source);

unitsInStockRenderer: any = (row, columnfield, value, defaulthtml, columnproperties, rowdata) =>
{
    if (value < 20)
    {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
    }
    else
    {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
    }
};

columns: any[] =
[
    {
        text: 'Employee #', columngroup: 'ProductDetails',
        datafield: 'EmployeeNum', width: 330
    },
    {
        text: 'Name', columngroup: 'ProductDetails',
        datafield: 'FullName', width: 330
    },
    {
        text: 'M/C', columngroup: 'ProductDetails', 
        datafield: 'MarketCenter', width: 330
    },
    {
        text: 'Function', columngroup: 'ProductDetails',
        datafield: 'FunctionTitle', width: 330
    },
    {
        text: 'Hire Date', columngroup: 'ProductDetails',
        datafeild: 'HireDate', width: 330
    },
    {
        text: 'Term Date', columngroup: 'ProductDetails',
        datafeild: 'TermDate', width: 330
    }
]; 

}

Here is the products.xml file that contains the table data. Here is one row as an example

<Employees>

<Employ EmployeeID="1">
<EmployeeNum>2793</EmployeeNum>
<FullName>Brian Miller</FullName>
<MarketCenter>458-Salt Lake City</MarketCenter>
<FunctionTitle>Controller</FunctionTitle>
<HireDate>10/12/2008</HireDate>
<TermDate>10/12/2008</TermDate>
</Employ>

</Employees>

Any help on showing the data within the grid and why there are no outlines around the grid and columns as shown in the demo above I linked to. Any help is appreciated. Thanks

One thing that jumps out as odd to me is that you are setting "any" to this.source when any is set to your xml already. It is possible that during the assignment source is null which may be setting your any to null as well. Why not just set data adapter directly to source? Might be missing something. — RoboYak
I believe that is what they did in the demo above that I linked to did as well. — Adrew
In the console it does give me a 404 error. Failed to load resource: the server responded with a status of 404 (Not Found). It is referring to the products.xml. So it cannot find the xml file for some reason — Adrew

Adrew Adrew · Accepted Answer · 2017-06-12T21:29:02

0

votes

I had to just put the xml file within the assets folder and it works fine

jqWidgets: Data and grid are not displayed

1 Answers