BIG data loading

Webix JS
1

hi, i’m loading a very huge data from SQL, like 100 000 rows and the page take a long time to load this data into datatable, there i s a way to avoid this waiting time? or a way to load 1000 rows every 0.001 sec?
Thanks very much

2

If you are not using autoheight mode the loading time must be not so big.
How big is the result data file?

Also, you can configure datatable to load data during scrolling, on demand.

http://docs.webix.com/desktop__plain_dynamic_loading.html

3

I’m using this to load data 15000 rows

webix.ready(function () 
{

webix.ui({
     rows:
     [   
 {
                                     view: "datatable",
                                     id: "tblResult",
                                     resizeColumn: true,
                                     select: true,
                                     hover: "gridHover",
                                     css: "custom",
                                     columns:
                                     [
                                         { id: "IDCrmContact", header: "ID", hidden: true, adjust: true },
                                         { id: "name", header: ["Customer", { content: "textFilter" }], fillspace: true },
                                         { id: "email", header: ["E-mail", { content: "textFilter" }], fillspace: true },
                                         { id: "category", header: ["category", { content: "selectFilter" }], hidden: false, adjust: true },
                                         { id: "isCompany", header: ["type", { content: "selectFilter" }], hidden: false, adjust: true },
                                         { id: "state", header: ["State", { content: "selectFilter" }], hidden: false, adjust: true },
                                         { id: "province", header: ["Province", { content: "selectFilter" }], hidden: false, adjust: true },
                                         { id: "city", header: ["City", { content: "selectFilter" }], hidden: false, adjust: true },
                                     ],
                                 },
     
     ]
});
getContacts();


function getContacts()
{
 $.ajax(
                          {
                              type: 'GET',
                              async: false,
                              url: 'WSContacts.asmx/GetContacts',
                              contentType: 'application/json; charset=utf-8',
                              dataType: 'json',                             
                              success: function (data)
                              {                            
                                  $$("tblResult").parse(data['d']);                               
                              },
                              error: function () {
                                  alert('Error on loading contacts');
                              }
                          });

}
});

it take 2 seconds to load the page

4

How big is the result data file?

It is quite possible that most part of time is consumed by data generation and data loading, not by parsing and rendering in Webix components.

5

the data is 3.2 MB, there is a way to load this data in steps?or to give a loading screen into datatable?

6

Dynamical loading, will load data on demand

http://docs.webix.com/desktop__plain_dynamic_loading.html

Or, you can have a progress indicator

http://docs.webix.com/desktop__progress.html

7

Ok thanks as always maksim! I’will use progress indicator

8

Hi Maksim, i’ve noted that is parsing in webix to slow everithing. if a parse 15000 row from database it go slow, there is a way to parse data without block the whole page? eaven with progress i have to wait till the data is parsed

9

The data parsing is relative fast, I don’t think that parsing of 15k rows will take more than 100ms on average PC. Rendering can take a time, but must not be a problem for DataTable, as it always renders only part of the data.

10

If you have some demo, where issue can be checked, please share the link.

11

i cant creatre a variable with huge data in snippet but there is a website that do that.

here the snippet
http://webix.com/snippet/a3c73d4c

here the json generator:

tray to generate this:
[
‘{{repeat(5, 15000)}}’,
{
_id: ‘{{objectId()}}’,
isActive: ‘{{bool()}}’,
age: ‘{{integer(20, 40)}}’,
eyeColor: ‘{{random(“blue”, “brown”, “green”)}}’,
name: ‘{{firstName()}} {{surname()}}’,
gender: ‘{{gender()}}’,
company: ‘{{company().toUpperCase()}}’,
email: ‘{{email()}}’,
phone: ‘+1 {{phone()}}’,
address: ‘{{integer(100, 999)}} {{street()}}, {{city()}}, {{state()}}, {{integer(100, 10000)}}’,
registered: ‘{{date(new Date(2014, 0, 1), new Date(), “YYYY-MM-ddThh:mm:ss Z”)}}’
}
]

copy the generated json into the snippet, in "var data = "
try it as you can see it take time.
Thanks

12

In latest IE it takes 107ms locally.

988×704 39.3 KB

13

I found the problem, if i set adjust:true on datatable i take a lots of time but if i remove all the adjust:true the datatable is loaded istant!
How i can solve the problem?

14

To adjust column to content, component need to render all data in the column, it is a slow operation. So, just minimize usage of the “adjust”.

15

ok thanks