Question about Grid / Binding to local data example

[Dave]

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  

[Dimiter Madjarov]

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

 

 

[Dave]

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

[Dimiter Madjarov]

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

 

 

[Guilherme]

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