Can't get rows to populate

Discussion Ask a question
,
1

Hi everyone. Thanks in advance.
I have this code for creating columns and it works as expected:

$w(“#myGrid”).columns = [
{ “id”: “1”, “label”: “one”, “width”: 15, “datapath”: “1”, “visible”: true , “type”: “string” },
{ “id”: “2”, “label”: “two”, “datapath”: “2”, “width”: 15, “visible”: true , “type”: “string” },
{ “id”: “3”, “label”: “three”, “datapath”: “3”, “width”: 15, “visible”: true , “type”: “string”},
{ “id”: “4”, “label”: “four”, “datapath”: “4”, width": 15, “visible”: true , “type”: “string” }
];

However, I can’t get the rows to populate.
I’ve tried copying and editing the code from http://intense-brook-61045.herokuapp.com/$w.Grid.html#columns, and that didn’t work.
I tried using the syntax found on https://www.wix.com/code/reference/$w.Table.html#rows but that didn’t work.
I’ve tried using single, double and no quotes around the ID and Label fields, but that didn’t produce output either.

Currently, the latest try is this:

let myGrid = $w(“#myGrid”);
let rowData = myGrid.rows;
rowData.push({
one:“D”,
two:“g”,
three:“N”,
four:“g”
});

With the above I do get a single row (intended), but no text shows in any column. Can someone please tell me what I’ve overlooked? I’ve tried many variations and I don’t know what I’m not understanding about tables/grids.

I’m not using a database for the data; I’m just hard coding it right now.

Thanks all.
LT.

2

Hello Therrion,

A couple things to note:

  1. The table comes with default row data, and does not match with the field values you set in your column array. Pushing is not recommended here since you are creating the columns with code, and it would be better to set the rows in an array object.

  2. You are using datapath and this is only used for connected to datasets and collections so this should be removed. Instead use the field key to link rows and columns, also the id value should not be in quotes.

  3. All together it should look like this:

$w("#myGrid").columns = [
{"id": 0, "label": "one","field": "one", "width": 15, "visible": true, "type": "string"},
{"id": 1, "label": "two","field": "two", "width": 15, "visible": true, "type": "string"},
{"id": 2, "label": "three","field": "three", "width": 15, "visible": true, "type": "string"},
{"id": 3, "label": "four","field": "four", "width": 15, "visible": true, "type": "string"}
];

const myTableData = [
{"one": "A", "two": "45", "three": "hello", "four": "goodbye"},
{"one": "A", "two": "45", "three": "hello", "four": "goodbye"},
{"one": "A", "two": "45", "three": "hello", "four": "goodbye"},
{"one": "A", "two": "45", "three": "hello", "four": "goodbye"}
]; 
$w('#myGrid').rows = myTableData;

That code produces this table:

888×325 15.4 KB

Best,
Majd Qumseya

1 Like
3

Hi Majd. Thanks so much for the reply.

Here’s a copy of my $w.onReady() function exactly as it is in my code. I copied and pasted it directly from your post. When I run this I get this error:

“Wix code SDK error: The id parameter of item at index 0 that is passed to the columns method cannot be set to the value 0. it must be of type string.”

Am I using the wrong control? When I highlight my table and right click I see, “Manage Table” so I’m pretty sure I’m using a table control and not something else. Do do you know why I’m getting this error? The line number that Wix points to in the error is the last column definition (“id”: 3).

$w.onReady(function () {
//TODO: write your page related code here…

$w("#myGrid").columns = [ 
    { "id": 0, "label": "one", "field": "one", "width": 15, "visible": true, "type": "string" }, 
    { "id": 1, "label": "two", "field": "two", "width": 15, "visible": true, "type": "string" }, 
    { "id": 2, "label": "three", "field": "three", "width": 15, "visible": true, "type": "string" }, 
    { "id": 3, "label": "four", "field": "four", "width": 15, "visible": true, "type": "string" } 
];

const myTableData = [
{ “one”: “A”, “two”: “45”, “three”: “hello”, “four”: “goodbye” },
{ “one”: “A”, “two”: “45”, “three”: “hello”, “four”: “goodbye” },
{ “one”: “A”, “two”: “45”, “three”: “hello”, “four”: “goodbye” },
{ “one”: “A”, “two”: “45”, “three”: “hello”, “four”: “goodbye” }
];
$w(‘#myGrid’).rows = myTableData;
});

4

Hello Therrion,

Try clicking on manage table, and setting the fields - not labels- to match your column data.

Let me know if this works,
Majd

1 Like
5

That was it! Thank you!!

One last question. I’m kind of familiar with programming but I am new to WIX’s version of Javascript. There’s some syntax that I’m not familiar with, such as, try/catch blocks, " => ", exception handling, data types, etc.

Do you know a place where this kind of info is? I’ve looked at the WIX API section and that talks about all the classes and such, and that’s great. But I’m missing the fundamentals. I’ve reviewed this - Wix Editor Elements ($w) - Velo API Reference - Wix.com and it’s great if I want to know about certain functions within a class. But I’m talking more basic than that at this point.

And if you have info about how to dynamically change the text decoration (font size, font, color, etc) of one cell only in the table based on user input - things like customizing controls, that would be fantastic as well. I’m presuming you can do this?

Majd, thank you for the help!

6

Hello Therrion,

The examples you said are all javascript related and I would strongly recommending learning javascript if you plan to continue developing websites and especially if you are going to use wix. There are a lot of javascript tutorials and documentation online, I would recommend W3Schools and then MDN for additional information.

Best,
Majd

1 Like
7

Thanks Majd. You’ve been awesome. :slight_smile:

1 Like
8

My pleasure Therrion :slight_smile: