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

lost on a data source issue

2 Answers 161 Views

Data Source

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

Vauneen asked on 01 Mar 2012, 02:03 PM

Hi all,

any idea why this wouldnt work (all include and link paths checked)
I'm a newby and so lost! i'm getting the data (one record) into the array in the function createRandomData.
But i cant generate the gridview after that.
Can anyone see where i'm going wrong?

V

<!doctype html>
<html>
    <head>
        <title>Admin: Users</title>
        <link href="styles/kendo.black.min.css" rel="stylesheet"/>
        <link href="styles/kendo.default.min.css" rel="stylesheet"/>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.core.js"></script>

        <script src="js/kendo.validator.js"></script>
        <script src="js/kendo.model.js"></script>
        <script src="js/kendo.data.js"></script>
        <script src="js/kendo.pager.js"></script>
        <script src="js/kendo.sortable.js"></script>
        <script src="js/kendo.draganddrop.js"></script>

        <script src="js/kendo.groupable.js"></script>
        <script src="js/kendo.grid.js"></script>
        <script src="js/kendo.binder.js"></script>
        <script src="js/kendo.editable.js"></script>
        <script src="js/kendo.popup.js"></script>
        <script src="js/kendo.calendar.js"></script>

        <script src="js/kendo.datepicker.js"></script>
        <script src="js/kendo.numerictextbox.js"></script>
		<script>
function createRandomData(count) {
		var data = [];
		data = {"account_recs":[{"FirstName":"Graham","SecondName":"Fourie"}],"totals":1};
		return data;
}
</script>
    </head>
    <body>
        <a href="../index.html">Back</a>
        <div class="description">Basic usage</div>

        <div id="example" class="k-content">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(1)
						}
                        navigatable: true,
                        pageable: true,
                        height: 400,
                        toolbar: ["create", "save", "cancel"],
                        columns: [
                            "SecondName",
                            { field: "FirstName", width: "100px" },
                            { command: "destroy", title: "&nbsp;", width: "110px" }],
                        editable: true
                    });
                });
            </script>
        </div>
    </body>
</html>

2 Answers, 1 is accepted

Accepted

answered on 02 Mar 2012, 09:55 AM

Hi Vauneen,

The problem is that you missed to define the dataSource schema.

data = {"account_recs":[{"FirstName":"Graham","SecondName":"Fourie"}],"totals":1};

dataSource: {

data: createRandomData(1),

schema: {

data: "account_recs"

},

The schema is responsible for describing the raw data format and could be omitted only if your data contains an array of simple JavaScript objects. The following configuration works as well:

data = [{"FirstName":"Graham","SecondName":"Fourie"}];

dataSource: {

data: createRandomData(1),

},

Kind regards,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!