kendo ui网格中的JavaScript外部文件依赖性

Question

I have Two file KendoUIGridFeatures.js & orgs.js which i include in .html page as show below

<script src="Scripts/KendoUIGridFeatures.js"></script>

<script src="Scripts/Orgs.js"></script>

I get the following error when loading html page

    Uncaught ReferenceError: hideColumn is not defined Orgs.js:201

Why am i getting this Error ?

If i look into console of google chrome, i see that files were loaded in order and there were no error except the one mentioned above //console output

 KendoUIGridFetaures Loaded KendoUIGridFeatures.js:3
 Orgs Loaded Orgs.js:3

//KendoUIGridFeatures.js
$(document).ready(function () {

console.log("KendoUIGridFetaures Loaded");
var gridFeaturesLoaded = true;


function hideColumn(e) {

}

function showColumn(e) {
}

function columnResize(e) {
}

function reOrderColumn(e) {
}

function gridDatabound(e) {
}

}



//orgs.js
$(document).ready(function () {

console.log("Orgs Loaded");

$("#" + gridName).kendoGrid({
    dataSource: dsOrg,
    autoBind: false,
    columnHide: hideColumn,
    columnShow: showColumn,
    columnResize: columnResize,
    columnReorder: reOrderColumn,
    dataBound: gridDatabound,

   ..........................
});
});

Answer 1

I think your problem is that you are using the function hideColumn as a global function, but you have not defined it globally.

When you define a function in $(document).ready , that function is only accessible in that scope. So you have to move hideColumn (as well as all your other grid functions) out of the $(document).ready for it to be accessible.

In KendoUIGridFeatures.js you want to move your functions out like this:

function hideColumn(e) {}
function showColumn(e) {}
function columnResize(e) {}
function reOrderColumn(e) {}
function gridDatabound(e) {}
//add your other grid functions...

$(document).ready(function () {
    console.log("KendoUIGridFetaures Loaded");
    var gridFeaturesLoaded = true;
    //other code you might have...
});

Alternatively, you can also put those functions inside the $(document).ready of org.js , and it will work since you are calling the function inside the same scope.