Hi everyone,
I am looking at the HTML version of the following example.
http://demos.telerik.com/kendo-ui/web/grid/local-data.html
Can someone explain to me where/how the data is getting bound to the grid? I imagine it has something to do with the "data: products," line, but I don't see any element with an id products. Is it coming from the "<script src="../../content/shared/js/products.js"></script>" ?
If so, could someone show how I would use a .js file to pull data from somewhere?
Thanks
I am looking at the HTML version of the following example.
http://demos.telerik.com/kendo-ui/web/grid/local-data.html
Can someone explain to me where/how the data is getting bound to the grid? I imagine it has something to do with the "data: products," line, but I don't see any element with an id products. Is it coming from the "<script src="../../content/shared/js/products.js"></script>" ?
If so, could someone show how I would use a .js file to pull data from somewhere?
Thanks
3 Answers, 1 is accepted
0
Hello Dave,
The data configuration option of the dataSource accepts an array of items as a parameter.
You could inspect the source of the demo page to check what does the products.js file contains.
Here is a direct link to it:
http://demos.telerik.com/kendo-ui/content/shared/js/products.js
It only contains an array of sample items.
Let me know if I could assist you further on this topic.
Regards,
Dimiter Madjarov
Telerik
The data configuration option of the dataSource accepts an array of items as a parameter.
You could inspect the source of the demo page to check what does the products.js file contains.
Here is a direct link to it:
http://demos.telerik.com/kendo-ui/content/shared/js/products.js
It only contains an array of sample items.
Let me know if I could assist you further on this topic.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dave
Top achievements
Rank 1
answered on 24 Mar 2014, 03:48 PM
Hi Dimiter,
Thank you for your response. In this example, is the .js file meant to hold just static data for the grid, or is it possible to write a Javascript function to fetch data from an external source based on an input and display it in the grid?
Thanks,
Dave
Thank you for your response. In this example, is the .js file meant to hold just static data for the grid, or is it possible to write a Javascript function to fetch data from an external source based on an input and display it in the grid?
Thanks,
Dave
0
Hello Dave,
Yes, the current example just demonstrates binding the Grid to an array of items. You could take a look at the remote data demo for the current case. You could also check the autoBind option of the Grid, which specifies whether the data should be bound during initialization. By default it is set to true, but if would like to determine the data based on an input value, you should set it to false and then manually read the Grid data with the read method of the dataSource.
Regards,
Dimiter Madjarov
Telerik
Yes, the current example just demonstrates binding the Grid to an array of items. You could take a look at the remote data demo for the current case. You could also check the autoBind option of the Grid, which specifies whether the data should be bound during initialization. By default it is set to true, but if would like to determine the data based on an input value, you should set it to false and then manually read the Grid data with the read method of the dataSource.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Guilherme
commented on 18 Aug 2022, 06:49 PM
Top achievements
Rank 1
Hi Dave, I've been having the same problem trying to understand whats is making up the results o generate people. For sure you already sorted it out, but i will post here just for record.
if you simply paste the codes i will post below on this place at the kendo function you will get results
The generatePeople function code:
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"], lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"], cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"], titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer", "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"], birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")]; function createRandomData(count) { var data = [], now = new Date(); for (var i = 0; i < count; i++) { var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], lastName = lastNames[Math.floor(Math.random() * lastNames.length)], city = cities[Math.floor(Math.random() * cities.length)], title = titles[Math.floor(Math.random() * titles.length)], birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], age = now.getFullYear() - birthDate.getFullYear(); data.push({ Id: i + 1, FirstName: firstName, LastName: lastName, City: city, Title: title, BirthDate: birthDate, Age: age }); } return data; } function generatePeople(itemCount, callback) { var data = [], delay = 25, interval = 500, starttime; var now = new Date(); setTimeout(function () { starttime = +new Date(); do { var firstName = firstNames[Math.floor(Math.random() * firstNames.length)], lastName = lastNames[Math.floor(Math.random() * lastNames.length)], city = cities[Math.floor(Math.random() * cities.length)], title = titles[Math.floor(Math.random() * titles.length)], birthDate = birthDates[Math.floor(Math.random() * birthDates.length)], age = now.getFullYear() - birthDate.getFullYear(); data.push({ Id: data.length + 1, FirstName: firstName, LastName: lastName, City: city, Title: title, BirthDate: birthDate, Age: age }); } while (data.length < itemCount && +new Date() - starttime < interval); if (data.length < itemCount) { setTimeout(arguments.callee, delay); } else { callback(data); } }, delay); }