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

customizing data source for grid

2 Answers 31 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gibran
Top achievements
Rank 1
Gibran asked on 06 Mar 2017, 10:18 PM
Hello,

I'll experimenting with the Kendo grid. I am able to get this working:

[code]
<html>
<head>
    <link href="kendo/examples-offline.css" rel="stylesheet">

    <link href="kendo/kendo.common.min.css" rel="stylesheet">

    <link href="kendo/kendo.rtl.min.css" rel="stylesheet">

    <link href="kendo/kendo.default.min.css" rel="stylesheet">

    <link href="kendo/kendo.default.mobile.min.css" rel="stylesheet">

    <script src="kendo/jquery.min.js"></script>

    <script src="kendo/jszip.min.js"></script>

    <script src="kendo/kendo.all.min.js"></script>

    <script src="kendo/console.js"></script>
</head>

<body>

<div id="grid"></div>

<script>
    $(document).ready(function () {
            $("#grid").kendoGrid({

                dataSource: {
                    type: "odata",
                    transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
</script>

</body>
</html>
[/code]

But now I'd like to play with the data. For that, I need a data source I can access and manipulate.

So I put this into a json file:

[code]
[{
"Contact Name": "Gibran shah",
"Contact Title": "Software Developer",
"Company Name": "ACM",
"Country": "Canada"
}]
[/code]

...and I tried to bind to it using this:

[code]
            $("#grid").kendoGrid({

                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
url: "kendo_data.json",
dataType: "json"
}
                    },

...
[/code]

That didn't work because the Chrome console threw an error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

So I tried prefixing the url with http: like this: "http://kendo_data.json"

That got rid of the error but the data still failed to load.

I also tried this:

[code]
            $("#grid").kendoGrid({

...

data: [{"Contact Name": "Gibran shah","Contact Title": "Software Developer","Company Name": "ACM","Country": "Canada"}]

...

});
[/code]

...but again the data failed to load.

My question: how to load from a data source I have access to and control? Please keep in mind I'm just working in Notepad++, not a fancy IDE in which I can run an ajax call and get the data.

Thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 08 Mar 2017, 12:23 PM
Hi Gibran,

If you would like to tinker with the data you can bind the Grid to local data as illustrated in the example below:


Note that dataSource.data is directly populated with data there is no need to use read method in that scenario.


Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gibran
Top achievements
Rank 1
answered on 08 Mar 2017, 05:57 PM

Thanks Viktor,

That example helped.

Tags
Grid
Asked by
Gibran
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Gibran
Top achievements
Rank 1
Share this question
or