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
I had to just put the xml file within the assets folder and it works fine