display view problem

Webix JS
1

I try to display a view which contain a datatable but I succeed displaying data in my datatable only, and only if I scroll. Nevertheless, if I don’t scroll data doesn’t appear; it’s quite odd. Have you any idea where the problem comes from ? Display problem appear in grid2

it’s just a datatable, nothing more which calls and ajax request like this :

var datatable = {

    	id : "datatable",

    	header : "title",

    	body : {

    		id:"datatablegrid",

	        view:"datatable", 

	        select:"row",

	        resizeColumn:true, 

	        resizeRow:true,

	        width:"100",

	        columns:[

	            { id:"data1", header:"data1", adjust:true, width:80,  maxWidth:250},

	            { id:"data2", header:"data2", adjust:true, width:80,  maxWidth:250},

	          	{ id:"data3", header:"data3", adjust:true, width:80,  maxWidth:250},

	            { id:"data4", header:"data4", adjust:true, width:80,  maxWidth:250},

	        ],
	    	on: {		        	
	    	 	"onItemClick" : function(id) {	

        		var data = this.getItem(data).data;   
	
        		webix.ajax().get("/mysite/"+data+"/news", function(text, data) {
        		if(isEmpty(text) == false){

		        		$$("Grid2").clearAll();

        				$$("Grid2").load("");	

        				$$("Grid2container").refresh();	
        				
		        	}

		        }

        		});

        	}	

	    	}

    	},

    };

var Grid2 = {
id : “Grid2container”,

		view : "accordionitem",

    	header : "title2",

    	body : {

    		id:"Grid2

	        view:"datatable", 

	        select:"row",

	        width:"100",

	        columns:[

	            { id:"data1", header:"data1", adjust:true, width:80,  maxWidth:250},

	            { id:"data2", header:"data2", adjust:true, width:80,  maxWidth:250},

	          	{ id:"data3", header:"data3", adjust:true, width:80,  maxWidth:250},
	            { id:"data4", header:"data4", adjust:true, width:80,  maxWidth:250}, 
	        ]   
    	}
    };

thank you in advance

2

The similar code works for me

http://webix.com/snippet/e81cc8a3

All looks fine, the $$(“Grid2container”).refresh line is not necessary, but it will not cause any issues in any case.

3

in fact, when i click on a line in datatable grid (first grid) i create a view and then I will fill this last view (grid 2 in fact). The first time it’s work fine, but when a call removeView on grid 2 and then I click again on datatable line to generate again a grid2 view, my grid is not filled. i must scroll to see data on grid view, which is not the case the first time.

I’ve checked all ajax call and in two case there is no differences but the result is not the same…I don’t know why. maybe when a generate again a grid2 view, i deleted just before, it’s changes id of my grid2 view ? or maybe I must done a refresh on all my page and in this case how can we do to refresh all my ui ? (ui.refresh() maybe ? )

4

has addView some specific properties ? i have the feeling we can’t starting from a view, call addView and fill it, then delete this last view, then call addView again to fill it with same data.

my code :

var datatable = {
id : “datatable”,

    	header : "title",

    	body : {

    		id:"datatablegrid",

	        view:"datatable", 

	        select:"row",

	        resizeColumn:true, 

	        resizeRow:true,

	        width:"100",

	        columns:[

	            { id:"data1", header:"data1", adjust:true, width:80,  maxWidth:250},

	            { id:"data2", header:"data2", adjust:true, width:80,  maxWidth:250},

	          	{ id:"data3", header:"data3", adjust:true, width:80,  maxWidth:250},

	            { id:"data4", header:"data4", adjust:true, width:80,  maxWidth:250},

	        ],
	    	on: {		
    	
	    	 	"onItemClick" : function(id) {

if ($$(“mainui-columns”).getChildViews().length <= 2) {

        			webix.ajax().get("my url", function(text, data) {
			        	var json_data = text;	
			        	if(isEmpty(json_data) == false){
        					
			        		$$("mainui-columns").addView(grid2);   	
        							

						}
        			});
        	  	 }



        		var data = this.getItem(data).data;      		
        		webix.ajax().get("an other url in order to fill Grid2", function(text, data) {
        		if(isEmpty(text) == false){
		        		$$("Grid2").clearAll();
        				$$("Grid2").load("");	
        				$$("Grid2container").refresh();		        				
		        	}
		        }
        		});
        	}	
	    	}
    	},
    };

var Grid2 = {

5

Change the next line

$$("mainui-columns").addView(grid2);

like follows

$$(“mainui-columns”).addView(webix.copy(grid2));

Currently, you are reusing the same structure and it can have some garbage from the first initialization. webix.copy will guarantee that webix.ui will receive the clean structure.