Struggling to implement jsGrid for a basic table with header sorting in my Javascript and Vue application. Having trouble loading the sample code with various components spread across different files. Here are the relevant parts:
HTML (symbol-container is my jsGrid div):
<div class="left-side-column">
<div class="menu-container">
<input id="processButton" type="button" value="Do it" v-on:click="processImage" :disabled="disable">
<div v-if="symbols.length !== 0">
<span id="symbol-header">{{ symbols.length }} threads</span>
<div id="symbol-container">
<!-- <table id="symbol-table">
<tr style="border: 1px solid black">
<th></th>
<th></th>
<th>DMC #</th>
<th>Count</th>
</tr>
<symbol-item v-for="(symbol, index) in symbols" :key="index" :symbol="symbol"></symbol-item>
</table> -->
</div>
<span class="slider-label">Color Count:</span>
<div id="reduce-color-slider"></div>
</div>
</div>
</div>
CSS
#symbol-container {
height: 600px;
overflow-y: auto;
}
Javascript
processingComplete: function(stitcher) {
this.symbols = stitcher.GetDMCList();
var clients = [
{ Name: "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ Name: "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ Name: "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ Name: "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ Name: "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
$('#symbol-container').jsGrid({
width: "100%",
height: "600px",
pageLoading: false,
inserting: true,
editing: true,
sorting: true,
paging: false,
autoload: true,
data: clients,
// controller: {
// loadData: function(filter) {
// console.log("loading");
// return clients;
// },
// insertItem: function(item) {
// console.log("insertItem being called..")
// },
// updateItem: function(item) {
// console.log("updateItem being called..")
// },
// deleteItem: function(item) {
// console.log("deleteItem being called..")
// }
// },
fields: [
{ name: "Name", type: "text", width: "50" }
]
});
processingComplete() gets triggered later than expected after user interaction. Trying to assign "this.symbols" to "data". Checked format of data (image below). Currently setting the static "clients" array as data. Tried using the controller but no success. Few unnecessary properties present due to multiple attempts. Only need sorting feature - no paging or editing. Also, no errors shown in console output.
Sample snapshot of this.symbols data: