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

Question

 <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 !!

Answer 1

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>

Answer 2

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