In my Angular project, I am utilizing jqWidgets to create a grid using jqxGrid.
Following the demo found here, I attempted to set up a table grid.
However, upon viewing the grid in the browser, only the column names are visible without any borders around the columns and rows. Additionally, no data is being displayed even though I have linked it to an XML file containing all the necessary data.
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
}
];
}
The products.xml file contains the necessary table data. Here is an example of a single row:
<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>
I would greatly appreciate any assistance with displaying the data within the grid properly and resolving the issue of missing outlines around the columns and grid. Thank you for your help.