autoresizecolumns is executed correctly, when virtualmode: true is enabled

[svedParticipant]

Hello,
is there any existing limit of autoresizecolumns method with virtualmode enabled in grid? I’m trying to fit the cells content and headers, but with no success. I’m following the example here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28classic%29#demos/jqxgrid/autoresizecolumns.htm
I’m using 3 pinned columns and about 20 unpinned. When I’m clicking on the grid columns are not resized correctly (there are still columns, that have not visible content)

[Peter StoevKeymaster]

Hi sved,

Auto-Resize of the columns happens by calling a Grid method, not by clicking on the Columns. In addition, If the Grid is in virtual mode, the method will use the cell values which are already loaded and visible in the Grid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[svedParticipant]

Sorry, there was a typo error, I mean, when I’m clicking on the resize button.
The resize actually happen, but it doesn’t resize till all content is visible.

[Peter StoevKeymaster]

Hi sved,

That is expected, because the Grid Cells are loaded on demand in virtual mode. When you click the resize button, the Grid will resize the columns using the loaded cells and their values, but when you change the view by scrolling or changing the current page, the new cells are loaded and the columns may not fit for the new cell values. Then you will need to call the resize method for the new cell values.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[svedParticipant]

I’m receiving following error, when clicking on the button:

TypeError: p is null in file: jqxgrid.columnsresize.js

code is:
$(“#button”).jqxButton();
$(“#button”).click(function () { $(“#jqxgrid”).jqxGrid(‘autoresizecolumns’); });

Here is the grid code:

	$("#jqxgrid").jqxGrid({
		source:dataAdapter,
		filterable: true,
		sortable: true,
		height: 520,
		width: 955,
		pageable: false,
		enableellipsis: true,
		enablebrowserselection: true,
		rendergridrows: function(obj)
		{
		    if (obj.data == "")
		    {
		        emptyGrid = 'true';
		        return '';
		    }
		    
		    emptyGrid = 'false';
            var start = obj.startindex;
            var end = obj.endindex;
            var array = new Array();
            
            for (i = start; i < end; i++)
            {
                array[i] = this.source.recordids[i];
            }
            return array;
		},
		columnsresize: true,
		columnsreorder: true,
		columns: rowData,
        pagesize: 60,
        virtualmode: true
    });

Do you think there might be bug in columnsresize, if one column, doesn’t contain values?

[Peter StoevKeymaster]

What kind of data do you use to populate the Grid? I don’t see the columns definition in the provided code, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[svedParticipant]

Hello,
thanks for respond, I’m using following json string for populating the columns with data:

"[
{"text": "", "datafield": "id", "width": 20, "cellsformat": "", "cellsalign": "left", "cellclassname": "gridCellAction", "cellsrenderer": "actionsrenderer", "pinned": "true"}, 
{"text": "Product Name", "datafield": "product_name", "width": 100, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 1}, 
{"text": "Category 1", "datafield": "category_1", "width": 80, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 1}, 
{"text": "Category 2", "datafield": "category_2", "width": 100, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Category 3", "datafield": "category_3", "width": 120, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Product ID", "datafield": "product_id", "width": 80, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 0},
{"text": "Returns Rate", "datafield": "returns_rate", "width": 70, "cellsformat": "p2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Shipped", "datafield": "shipped", "width": 70, "cellsformat": "c2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Value", "datafield": "value", "width": 80, "cellsformat": "c2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Units", "datafield": "units", "width": 60, "cellsformat": "c2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Cost %", "datafield": "cost", "width": 70, "cellsformat": "p2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Availability", "datafield": "availability", "width": 70, "cellsformat": "p2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Views", "datafield": "views", "width": 60, "cellsformat": "c2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Rate", "datafield": "rate", "width": 60, "cellsformat": "p2", "cellsalign": "right", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Status", "datafield": "status", "width": 70, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 0}, 
{"text": "Brand", "datafield": "brand", "width": 100, "cellsformat": "", "cellsalign": "left", "cellclassname": "", "cellsrenderer": "", "pinned": 0}
] 

First column doesn’t contain any value. If I use:

	$("#jqxgrid").bind('bindingcomplete', function () {
	    $("#jqxgrid").jqxGrid('autoresizecolumn', 'product_name', 'all');
	});

column product_name is resized correctly, but if i change the code to

	$("#jqxgrid").bind('bindingcomplete', function () {
	    $("#jqxgrid").jqxGrid('autoresizecolumns');
	});

The columns are not resized to the size of the contents in it.

[niravParticipant]

Hello sir

I have problem with autoresize column with performance issue.
My scenario is that, i have fetching all columns and data from database and grid bind dynamically.
In database i have 5000 records and 100 columns . jqxgrid takes 50 seconds to load.

can you please suggest how i reduce this time to load grid.

i don’t want to implement paging. i just load all data without paging and filtering.

i research more in my code. i am using autoresize property of jqxgrid .
i think it takes time to load jqxgrid .

please suggest.

Regards
nirav

[Peter StoevKeymaster]

Hi nirav,

I suggest you to see the demos and documentation of jqxGrid to learn how to use it. It takes several seconds to load 30 000 rows in one of our demos so I don’t think that it takes 50 seconds to load 5000 records with the current version. Here’s a sample with 5000 records with 100 columns and loading is less than 3 seconds – http://jsfiddle.net/wofbsjrn/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts