Need help in implementing datatable with dynamic loading using rest proxy

edited August 2018 in Technical questions

Hello,

I am new to the Webix and trying to implement the datatable using the Rest API with headers. I am using ReactJS in the frond end.
I am trying to implement as per this docs - https://blog.webix.com/dynamic-loading-fetching-unlimited-number-of-records-from-server-side/ with the modification to use REST API.
But here issue is the no data is rendering on the datatable even after the successful rest call. I tried to search through the docs but didn't get any help. Could anyone help me to resolve this issue?

Requirements:
1. Load datatable with limited data(For eg. 10 Rows) from the REST API
2. Load remaining rows with the scroll events plus custom sorting

var grid = {
      view:"datatable", id:"grid", autoConfig:true,
      scroll:false,
      select:true, minHeight: 600,
      autoheight:true, minWidth: 990, columns:[
        { id:"status", header:"Status" ,width:80, cssFormat:mark_votes},
        { id:"userid", header:"User ID" , minWidth:50},
        { id:"name", header:"Name" , minWidth:50, width: 200,sort:"string" },
        { id:"usergroup", header:"User Role" , minWidth:50, width: 120},
          { id:"email", header:"Email" ,minWidth:50, width:120, adjust: "data" },
        { id:"registrationdate", header:"Registration Date" , sort:"date", format: window.webix.Date.dateToStr("%d/%m/%y"), fillspace:true}
      ],
      datafetch:10,
      url:"idata->https://api.skuops.com/users",
      on:{
        onBeforeLoad:function() {
            this.showOverlay("<div class='alert alert-secondary'>Loading ...</div>");
          },
        onAfterLoad:function() {
           window.webix.delay(function(){
             if(this.count()) {
                this.hideOverlay();
              } else
                this.showOverlay("No data")
           }, this, null, 1000);
           this.sort("name", "desc");
           this.markSorting("name", "desc");
         }
      }
    };

Below is my proxy data,

window.webix.proxy.idata = {
      $proxy:true,
      load:function(view, callback){
              var url = this.source;
              url += (url.indexOf("?") == -1 ) ? "?": "&";

              var details = arguments[2];
              var count = details?details.count:view.config.datafetch || 0;
              var start = details?details.start:0;
              //console.log(view.config.datafetch);
              url += "pagesize="+count;
              url += start?"&startindex="+start:"";
              //url will look like "./data_dyn.php?count=50&start=51"
              window.webix.attachEvent("onBeforeAjax",
                  function(mode, url, data, request, headers, files, promise){
                      headers["Content-type"] = "application/json";
                      headers['x-access-token'] = (localStorage.getItem("token")) ? JSON.parse(localStorage.getItem("token")) : ""
                  }
              );
              callback.push({ success:this._checkLoadNext});
              window.webix.ajax(url, callback, view);
              view.$ready.push(this._attachHandlers);
          },
          _checkLoadNext:function(text, data, loader){
              console.log(data.json().items);
              //this.data = data.json().items;
              if(!data.json().length)
                  this.data.url._dontLoadNext = true;
          },
          _attachHandlers:function(){
              //this points to widget you work with
              var proxy  = this.config.url;
              if(this.config.columns)
                  this.attachEvent("onScrollY", window.webix.bind(proxy._loadNext, this));
          else
              this.attachEvent("onAfterScroll", window.webix.bind(proxy._loadNext, this));
          },
          _loadNext:function(){
              var proxy  = this.config.url;
              var contentScroll =  this.getScrollState().y+this.$view.clientHeight;
              var last = this.getItemNode(this.getLastId());

              if(last && contentScroll>last.offsetTop && !proxy._dontLoadNext)
                  this.loadNext(this.config.datafetch, this.count()+1);
          }
      };

Finally attaching it to the Webix UI,

this.ui = window.webix.ui({
      cols:[grid],
      isolate:true,
      container:ReactDOM.findDOMNode(this.refs.root),
      datafetch:10
    });

Thanks,
Shan

Comments

  • edited August 2018

    Hi Shan,

    In general you code is correct.

    Here's a snippet version of your code: https://snippet.webix.com/qj9n782k, but for me it does not work due to the incorrect token. I have added the fail() handler to the code to notify about the error. It may as well help you locate the error in your environment.

    And here's a simple proxy that proofs that the above approach is valid: https://snippet.webix.com/fcwbk4i8

    And also please note that headers can be added directly to an Ajax call as webix.ajax().headers({}).get(...).

  • Hi Helga,

    Thanks for the update. I will try to implement the changes and update you if I have any challenges.

    Regards,
    Shan

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!