CODEWITHSUNDEEP
jquerykendo-uikendo-grid
Simsons
Simsons

Reputation: 12745

Why am I getting 'undefined' error when variable already defined

 <link href="/content/shared/styles/examples-offline.css" rel="stylesheet">
 <link href="/styles/kendo.common.min.css" rel="stylesheet">
<link href="/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/styles/kendo.default.min.css" rel="stylesheet">

<script src="/js/jquery.min.js"></script>
<script src="/js/kendo.web.min.js"></script>
<script src="/content/shared/js/console.js"></script>
<script>
    $(function () {
        datasource123 = new kendo.data.DataSource({
            transport: {
                read: {
                     url:"http://localhost/KendoServices/Web/GetProductDetails",
                     dataType: 'jsonp'
                }
            }
        });
    });
    $('#products').kendoGrid({
        dataSource: datasource123
    });
</script>

Getting exception:

'datasource123' undefined !!

Upvotes: 0

Views: 991

Answers (2)

jfriend00
jfriend00

Reputation: 707326

The creation of your DataSource is being done in a jQuery ready function which will NOT run until the DOM is ready. Your first use of datasource123 is being done immediately. So datasource123 will not be created until after you try to use it.

I would suggest this change to put them both in the jQuery ready function and to declare your datasource123 variable in a given scope so it is not an implicit global:

$(function () {
    var datasource123 = new kendo.data.DataSource({
        transport: {
            read: {
                 url:"http://localhost/KendoServices/Web/GetProductDetails",
                 dataType: 'jsonp'
            }
        }
    });
    $('#products').kendoGrid({
        dataSource: datasource123
    });
});

Upvotes: 1

Anthony Chu
Anthony Chu

Reputation: 37520

datasource123 isn't defined until document ready, but dataSource: datasource123 executes before that. I think you can move it inside document ready and have the variable scoped to the function...

<script>
    $(function () {
        var datasource123 = new kendo.data.DataSource({
            transport: {
                read: {
                     url:"http://localhost/KendoServices/Web/GetProductDetails",
                     dataType: 'jsonp'
                }
            }
        });
        $('#products').kendoGrid({
            dataSource: datasource123
        });
    });
</script>

Upvotes: 4

Related Questions