loadData just won't work - jsgrid

Question

Below is my complete code. There are no errors and Directory is empty is shown.
<script>
$(document).ready(function() {
$("#table").jsGrid({
width: "100%",
height: "auto",
paging: false,
autoload: false,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
var data = {
data: [{
nickname: "test",
email: "t#gmail.com"
}]
};
console.log(data);
return data;
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}]
});
});
</script>
The console output is as below. Is there anything incorrect about the formatting?
Is there a way to enable more diagnostics, like printing out what data it is actually receiving so as to allow troubleshooting?

Answer 1

You need to set autoload:true
autoload (default false)
A boolean value specifying whether controller.loadData will be called when grid is rendered.
And also you need to return data.data inside of loadData() mehtod because you have array inside of data.
CODE SNIPPET
controller: {
loadData: function(filter) {
var data = {
data: [{
nickname: "test",
email: "t#gmail.com"
}]
};
return data.data; //As per your data array is like this console.log(data.data) so you need to send like this data.data
}
},
DEMO
$(document).ready(function() {
$("#table").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method Need to set auto load true
autoload: true,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
alert('Table load data method fire because we have set config autoload:true')
var data = {
data: [{
nickname: "test",
email: "t#gmail.com"
}]
};
return data.data;//As per your data array is like this console.log(data.data) so you need to send like this data.data
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}]
});
$("#table1").jsGrid({
width: "100%",
height: "auto",
paging: false,
//for loadData method will not work with auto load false
autoload: false,
noDataContent: "Directory is empty",
controller: {
loadData: function(filter) {
alert('Table 1 load data method not fire')
return []
}
},
fields: [{
name: "nickname",
type: "text",
width: 80,
title: "Name"
}, {
name: "email",
type: "text",
width: 100,
title: "Email Address",
readOnly: false
}]
});
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<div id="table"></div>
<br>
<br>
<br>
<div id="table1"></div>