unable to use DataAdapter URL

[JoeLaRue]

I’m trying to point the grid to a URL to get data from, as shown in the documentation here https://www.htmlelements.com/docs/data-adapter/

I am looking at the network tab in the browser and the call is never made to that URL. I have tried wrapping the grid initialization in a fetch call, which gets me the data and loads the grid, but when using that method, i am running in to other problems. For example, when i load the grid that way, the column-resize handle doesn’t appear when i hover between column headers. Also, i don’t get the nice loading animation functionality that i would expeect the grid to show while waiting for the data.

so, i guess 2 questions here.

What am i doing wrong with the DataAdapter?

Is there a bug with the column resize handles related to loading the grid with the fetch API?

 

This is what my code to initialize the grid looks like with the URL in the data adapter (in this case, i get no data… but the grid resize handles work)

Smart(‘#grid’, class {
get properties() {
return {
filtering: {
enabled: true
},
header: {
visible: true
},
behavior: {
allowColumnReorder: true,
columnResizeMode: ‘split’
},
dataSource: new Smart.DataAdapter(
{
dataSource: {
url: ‘http://WebServer/ApplicationName/EndpointName’,
method: ‘GET’,
async: true,
timeout: null
},
dataFields: [
{ name: ‘ActId’, dataType: ‘int’, map: ‘DocketAction.ActId’ },
{ name: ‘DueDate’, dataType: ‘date’, map: ‘DocketAction.DueDate’ },
{ name: ‘ActionType’, dataType: ‘string’, map: ‘DocketAction.ActionType’ },
{ name: ‘ActionDue’, dataType: ‘string’, map: ‘DocketAction.ActionDue’ },
{ name: ‘Indicator’, dataType: ‘string’, map: ‘DocketAction.Indicator’ },
{ name: ‘FullMatterNumber’, dataType: ‘string’, map: ‘DocketAction.FullMatterNumber’ },
{ name: ‘AppNumber’, dataType: ‘string’, map: ‘DocketAction.AppNumber’ },
{ name: ‘CaseType’, dataType: ‘string’, map: ‘DocketAction.CaseType’ },
{ name: ‘Status’, dataType: ‘string’, map: ‘DocketAction.Status’ },
{ name: ‘AttorneysConcatenated’, dataType: ‘string’, map: ‘DocketAction.AttorneysConcatenated’ },
{ name: ‘RespAtty1’, dataType: ‘string’, map: ‘DocketAction.RespAtty1’ },
{ name: ‘RespAtty2’, dataType: ‘string’, map: ‘DocketAction.RespAtty2’ },
{ name: ‘RespAtty3’, dataType: ‘string’, map: ‘DocketAction.RespAtty3’ },
{ name: ‘RespAtty4’, dataType: ‘string’, map: ‘DocketAction.RespAtty4’ },
{ name: ‘Title’, dataType: ‘string’, map: ‘DocketAction.Title’ },
{ name: ‘Remarks’, dataType: ‘string’, map: ‘DocketAction.Remarks’ },
{ name: ‘UnderlyingTechnology’, dataType: ‘string’, map: ‘DocketAction.UnderlyingTechnology’ },
{ name: ‘ActionOwner’, dataType: ‘string’, map: ‘DocketAction.ActionOwner’ },
{ name: ‘TrackOneYN’, dataType: ‘string’, map: ‘DocketAction.TrackOneYN’ },
{ name: ‘MatterType’, dataType: ‘string’, map: ‘DocketAction.MatterType’ }

]
}),
columns: [
{ label: ‘Due Date’, dataField: ‘DueDate’, width: 75, cellsFormat: ‘d’ },
{ label: ‘Action Due’, dataField: ‘ActionDue’, width: 150 },
{ label: ‘Action Type’, dataField: ‘ActionType’, width: 150 },
{ label: ‘Indicator’, dataField: ‘Indicator’, width: 100 },
{ label: ‘Matter Number’, dataField: ‘FullMatterNumber’, width: 115 },
{ label: ‘Case Type’, dataField: ‘CaseType’, width: 75 },
{ label: ‘App Number’, dataField: ‘AppNumber’, width: 75 },
{ label: ‘Status’, dataField: ‘Status’, width: 100 },
{ label: ‘Atty 1’, dataField: ‘RespAtty1’, width: 55 },
{ label: ‘Atty 2’, dataField: ‘RespAtty2’, width: 55 },
{ label: ‘Atty 3’, dataField: ‘RespAtty3’, width: 55 },
{ label: ‘Atty 4’, dataField: ‘RespAtty4’, width: 55 },
{ label: ‘Title’, dataField: ‘Title’, width: 200 },
{ label: ‘Underlying Technology’, dataField: ‘UnderlyingTechnology’, width: 100 },
{ label: ‘AO’, dataField: ‘ActionOwner’, width: 50 },
{ label: ‘Remarks’, dataField: ‘Remarks’ }
]
}
}
});

 

This is the code that uses fetch, but has problems, like the resize handles not working:

fetch(‘http://WebServer/ApplicationName/EndpointName’, { method: ‘GET’ })
.then(function (response) {
if (response.ok) {
return response.json();
}
})
.then(function (data) {
Smart(‘#grid’, class {
get properties() {
return {
filtering: {
enabled: true
},
header: {
visible: true
},
behavior: {
allowColumnReorder: true,
columnResizeMode: ‘split’
},
dataSource: new Smart.DataAdapter(
{
dataSource: data,
dataFields: [
{ name: ‘ActId’, dataType: ‘int’, map: ‘DocketAction.ActId’ },
{ name: ‘DueDate’, dataType: ‘date’, map: ‘DocketAction.DueDate’ },
{ name: ‘ActionType’, dataType: ‘string’, map: ‘DocketAction.ActionType’ },
{ name: ‘ActionDue’, dataType: ‘string’, map: ‘DocketAction.ActionDue’ },
{ name: ‘Indicator’, dataType: ‘string’, map: ‘DocketAction.Indicator’ },
{ name: ‘FullMatterNumber’, dataType: ‘string’, map: ‘DocketAction.FullMatterNumber’ },
{ name: ‘AppNumber’, dataType: ‘string’, map: ‘DocketAction.AppNumber’ },
{ name: ‘CaseType’, dataType: ‘string’, map: ‘DocketAction.CaseType’ },
{ name: ‘Status’, dataType: ‘string’, map: ‘DocketAction.Status’ },
{ name: ‘AttorneysConcatenated’, dataType: ‘string’, map: ‘DocketAction.AttorneysConcatenated’ },
{ name: ‘RespAtty1’, dataType: ‘string’, map: ‘DocketAction.RespAtty1’ },
{ name: ‘RespAtty2’, dataType: ‘string’, map: ‘DocketAction.RespAtty2’ },
{ name: ‘RespAtty3’, dataType: ‘string’, map: ‘DocketAction.RespAtty3’ },
{ name: ‘RespAtty4’, dataType: ‘string’, map: ‘DocketAction.RespAtty4’ },
{ name: ‘Title’, dataType: ‘string’, map: ‘DocketAction.Title’ },
{ name: ‘Remarks’, dataType: ‘string’, map: ‘DocketAction.Remarks’ },
{ name: ‘UnderlyingTechnology’, dataType: ‘string’, map: ‘DocketAction.UnderlyingTechnology’ },
{ name: ‘ActionOwner’, dataType: ‘string’, map: ‘DocketAction.ActionOwner’ },
{ name: ‘TrackOneYN’, dataType: ‘string’, map: ‘DocketAction.TrackOneYN’ },
{ name: ‘MatterType’, dataType: ‘string’, map: ‘DocketAction.MatterType’ }

]
}),

columns: [
{ label: ‘Due Date’, dataField: ‘DueDate’, width: 75, cellsFormat: ‘d’ },
{ label: ‘Action Due’, dataField: ‘ActionDue’, width: 150 },
{ label: ‘Action Type’, dataField: ‘ActionType’, width: 150 },
{ label: ‘Indicator’, dataField: ‘Indicator’, width: 100 },
{label: ‘Matter Number’, dataField: ‘FullMatterNumber’, width: 115},
{ label: ‘Case Type’, dataField: ‘CaseType’, width: 75 },
{ label: ‘App Number’, dataField: ‘AppNumber’, width: 75 },
{ label: ‘Status’, dataField: ‘Status’, width: 100 },
{ label: ‘Atty 1’, dataField: ‘RespAtty1’, width: 55 },
{ label: ‘Atty 2’, dataField: ‘RespAtty2’, width: 55 },
{ label: ‘Atty 3’, dataField: ‘RespAtty3’, width: 55 },
{ label: ‘Atty 4’, dataField: ‘RespAtty4’, width: 55 },
{ label: ‘Title’, dataField: ‘Title’, width: 200 },
{ label: ‘Underlying Technology’, dataField: ‘UnderlyingTechnology’, width: 100 },
{ label: ‘AO’, dataField: ‘ActionOwner’, width: 50 },
{label: ‘Remarks’, dataField: ‘Remarks’}
]

}
}
});
})

 

[martin-jq]

Hello JoeLaRue,

Please, try defining dataSourceType inside the DataSource and setting dataSource.dataSource to just the url string, instead of an object.
You can check these two demo examples: PHP Service and Bind to JSON.

If you need to load the data using the fetch API you can initialize the Grid separately and then just update the dataSource.
Please, check this Demo Example.

Best Regards,
Martin

Smart HTMLElements Team
https://www.htmlelements.com/

[JoeLaRue]

Thanks Martin – updating the datasource like you suggested worked! 🙂

[Author]

Posts