loading data from a variable in datatable

Webix JS
1

Hi,

I have a GUI where an user inputs a store number. The program then reads various files and creates a variable which store the desire data into an object. I then want to show that data in a datatable. This is not working. Here is what the object looks like before the data is stored in it.

var rossObj = {
    "store_number":{"store_number":""},
    machines:[]
}

I store the desire data in the machines array. The data in the firefox using firebug console looks like this

Object { id=1, EQUIPMENT="Cash Office", MAC_ADDRESS=" 34-17-EB-AE-1F-0D\\r"}
Object { id=2, EQUIPMENT="ISP", MAC_ADDRESS=" C8-1F-66-FB-9E-92\\r"}
Object { id=3, EQUIPMENT="ISP", MAC_ADDRESS=" C8-1F-66-FB-9E-91\\r"}

To show the able I call a function that has the following code

function populateTable(rossObj){
    webix.ready(function(){
        //display table
        var gridB = new webix.ui({
    	container:"areaB",
    	view:"datatable",
            css:"my_style",
            select:"cell",  //allow cell selection
            multiselect:true,  //allow for multiple cells selectin
            clipboard:"selection",  //allow to copy to clipboard
            headermenu:true,
    	columns:[
                { id:"EQUIPMENT",	header:"EQUIPMENT", sort:"string", width:150, height:50},
                { id:"MAC_ADDRESS",	header:"MAC ADDRESS", sort:"string", width:150, height:50}
    	],
            data:rossObj.machines,
            autoheight:true,
    	autowidth:true,
        }); //end var gridB =	
    });//end webix.ready
}

what could be the problem. no error is shown. I’m thinking the formatting must be wrong. Even though firefox shows the data as
Object { id=2, EQUIPMENT=“ISP”, MAC_ADDRESS=" C8-1F-66-FB-9E-92\r"}, when i store it I store it using the following code

rossObj.machines.push({
    "id": idCounter,
    "EQUIPMENT" : equipment,
    "MAC_ADDRESS" : macAddr
});
++idCounter;

Is it the json formatting that is wrong?Could it be that I’m missing a parameter in the datatable viewer? I’m pretty sure my object is global.

2

UGH!!! that code above came out ugly? Do you guys have some tags to make posting code come out wight. i mean, that thing is unreadable.

3

You need to wrap the code in PRE tags I think. Its also a good idea to use the webix snippet tool found here http://webix.com/snippet/

4

The same code works for me

http://webix.com/snippet/737b4202

is rossObj.machines already filled with data on moment of populateTable call ? Data parsing occurs once, and later changes in the machines array will not be reflected in the datatable.

5

As for formatting

  • you can use 
     tags
  • you can use 4-spaces padding ( same as at StackOverflow )
  • you can use Github-flavored markdown
6

Ok here is what I think is going on. I think that the datable is being run before the rossObj has data in it. The reason I say this is that if I input the data manually like in the example you gave this works. If I however, dynamically put in the data via reading a file then this does not works. To prove this I created a second object called rossObj2 (yeah not very clever with the naming convention. I initiated the object manually as in the example. i then called a function and added one more entry. This new entry did not show up in the datatable but it does show up in the console. I don’t understand how this happens since the table is the last thing being called. Seems to be some sort of synchronization problem.

7 
put in the data via reading a file

Data loading is async. by default, so it can be the reason.

If you have some online demo, where problem occurs - please share the link

8

I was able to solve the problem (and then created a new one hahaha). The thing was that the file was being read through a webix.ajax and I guess that operation never finished before the table was built thus it missed the data. Here is how the program was originally laid out in pseudo code
description

  1. wait for button click then call foo()
  2. in foo read file and put data in object
  3. call a function to display table

So had


    function foo(){
        getData();
        populateTable();
    }

the fix was to put the populateTable() function inside the get data that way it only called it when the data was ready. Something like this


       webix.ajax(theURL{
           error:function(text, xml, XmlHttpRequest){
               //handle error
           }

          success:function(text, xml, XmlHttpRequest){
              //1) handle data returned in the text variable 
              //2) now call populateTable()
           }
    });

    populateTable(){
            //display table
	    var gridB = new webix.ui({
        	container:"areaB",
                view:"datatable",
                ....
                ....
                ....
           })
)

I don’t know if this is the best aproash but, it works.

9

Yep, that is common approach for async data loading.

By the way, you can use webix.ajax to load data in sync mode
http://docs.webix.com/helpers__ajax_operations.html

var data = webix.ajax().sync().get("some.php");