This is a migrated thread and some comments may be shown as answers.

Question about Grid / Binding to local data example

3 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 20 Mar 2014, 09:25 PM
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  

3 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 24 Mar 2014, 09:14 AM
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
 
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
0
Dimiter Madjarov
Telerik team
answered on 25 Mar 2014, 11:40 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Guilherme
Top achievements
Rank 1
commented on 18 Aug 2022, 06:49 PM

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);
                                }

 

Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Dave
Top achievements
Rank 1
Share this question
or