JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Help With Using Ajax To Get Data
Tagged: Ajax, Angular grid, fetch, file, grid, grid data source, JSON, smart grid, web components grid
- This topic has 3 replies, 2 voices, and was last updated 2 years, 9 months ago by admin.
-
AuthorPosts
-
February 4, 2020 at 6:12 pm #100640adminKeymaster
Hey there,
Would someone be able to give me a working example that uses an ajax call to an aspx.cs page to get data on demand?
I have not been able to figure out how to implement a data adapter that uses ajax or how to do it without the use of the data adapter. Any help would be greatly appreciated.
thanks.February 5, 2020 at 6:18 am #100642adminKeymasterHi ctstrist,
Currently,Smart.DataAdapter
cannot get data from a file, but we are working on this functionality and hope that it will soon be available.
In the meantime, you can use fetch (or XMLHttpRequest, or jQuery.ajax()) to request the file’s data and then pass it as an array to the Grid, as is done in the code snippet below:fetch('../../../scripts/beverages.json', { method: 'GET' }) .then(function (response) { if (response.ok) { return response.json(); } }) .then(function (data) { Smart('#grid', class { get properties() { return { appearance: { alternationCount: 2, showRowHeader: true, showRowHeaderSelectIcon: true, showRowHeaderFocusIcon: true }, paging: { enabled: true }, pager: { visible: true }, sorting: { enabled: true }, editing: { enabled: true }, selection: { enabled: true, allowCellSelection: true, allowRowHeaderSelection: true, allowColumnHeaderSelection: true, mode: 'extended' }, behavior: { columnResizeMode: 'growAndShrink' }, dataSource: new Smart.DataAdapter( { dataSource: data, dataFields: [ 'name: string', 'type: string', 'calories: int', 'totalfat: string', 'protein: string' ] }), columns: [ { label: 'Name', dataField: 'name' }, { label: 'Beverage Type', dataField: 'type' }, { label: 'Calories', dataField: 'calories' }, { label: 'Total Fat', dataField: 'totalfat' }, { label: 'Protein', dataField: 'protein' } ] } } }); }) .catch(function (error) { });
Best regards,
Dimitar
Smart HTML Elements Team
https://www.htmlelements.comFebruary 2, 2022 at 5:10 pm #102831bryan.mccallumParticipantdoes the data adapter work with sql calls?
we expected the call to look like this
const dataAdapter = new Smart.DataAdapter({
dataSource: {
method: “GET”,
url: “Productivity/?handler=Dashboard”,
async: true
},
dataSourceType: “json”,
dataFields: [
“Category: string”,
“DateValue: date”,
“CurrentPeriod: bool”
]
});but it is not calling the code behind in my asp.net project
February 3, 2022 at 12:38 pm #102841adminKeymasterHi Bryan,
It works with SQL calls, example: https://www.htmlelements.com/demos/grid/server-side-mysql-php/. If you have more complex scenario, you can use the native fetch and bind the grid to the fetch’s result.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.