jQuery UI Widgets Forums Grid Best way to increase size of all columns to fit 100%

This topic contains 7 replies, has 3 voices, and was last updated by  jonfrain 10 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author

  • jonfrain
    Participant

    I have a grid and set it to be 100%. I also store column minimum widths in a database table.

    Let’s assume the grid at 100% is 1000px wide, but the sum of my columns is only 500px. What is the easiest way to force the columns to each increase by the same amount of pixels to fit into the 100% width?


    jonfrain
    Participant

    I should note that setting autowidth = true seems to just shrink everything and lose the pagination and sorting and such.


    jonfrain
    Participant

    I should also say that using percentages won’t work because we want it to scale down to mobile size. And so my goal is to increase it to 100% but not shrink it down.


    Dimitar
    Participant

    Hello jonfrain,

    You can set both percentage width and minwidth to achieve this. Please try out the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/products.xml";
    
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ProductName', type: 'string' },
                        { name: 'QuantityPerUnit', type: 'int' },
                        { name: 'UnitPrice', type: 'float' },
                        { name: 'UnitsInStock', type: 'float' },
                        { name: 'Discontinued', type: 'bool' }
                    ],
                    root: "Products",
                    record: "Product",
                    id: 'ProductID',
                    url: url
                };
    
                var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                    if (value < 20) {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                    }
                    else {
                        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                    }
                }
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: "100%",
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    sortable: true,
                    altrows: true,
                    enabletooltips: true,
                    editable: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: "20%", minwidth: 100 },
                      { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: "20%", minwidth: 100 },
                      { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: "20%", minwidth: 100 },
                      { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: "20%", minwidth: 100 },
                      { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', width: "20%", minwidth: 100 }
                    ],
                    columngroups: [
                        { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    jonfrain
    Participant

    It doesn’t seem to be obeying the minwidth settings, the width % per column seems to override it and shrink the columns below the mindwidth when I resize. I’d expect to see scrollbars show up when I make the width really large as well, but they never match the mindwidth.

    if (grid.hasClass(currentGrid)) {
    	var myData  = { module: currentDiv, expansion: currentDataId, grid: currentGrid};
    	var myDatafields = [];
    	var myColumns =[];
    
    	$.ajax({
    		type: "POST",
    		url: myHeaderUrl,
    		data: JSON.stringify(myData),
    		dataType: "json",
    		contentType: "application/json; charset=utf-8",
    		complete: function(response){
    			var response2 = response.responseText;                                   
    			if (typeof(response2) == 'string'){
    				jsonData = $.parseJSON(response2);
    				for (var i in jsonData) {
    					var entry = jsonData[i];
    					var dataFieldRow = {name: entry.attribute_var_name, type: entry.type};
    					myDatafields.push(dataFieldRow);
    					var dataColsRow = { text: entry.display_name, datafield: entry.attribute_var_name, minwidth: '600px', width: entry.grid_field_width_percent}; //width: entry1.grid_field_width };
    					myColumns.push(dataColsRow);
    				}
    				var mySource =
    				{
    					datatype: "json",
    					datafields: myDatafields,
    					url: myGridUrl1,
    					root: 'rows',
    					beforeprocessing: function(data){       
    						mySource.totalrecords = data.totalRows;
    					},
    					sort: function (){                                               
    						currentDataOpened.find("."+currentGrid).jqxGrid('updatebounddata');
    					},
    					filter: function () {       
    					   currentDataOpened.find("."+currentGrid).jqxGrid('updatebounddata', 'filter');
    					}
    				};  
    
    				var addfilter = function () {
    					var filtergroup = new $.jqx.filter();
    				}
    
    				var myDataAdapter = new $.jqx.dataAdapter(mySource);
    				currentDataOpened.find("."+currentGrid).jqxGrid({
    					width: '100%',               
    					source: myDataAdapter,
    					autoheight: true,
    					pageable: true,
    					sortable: true,
    					altrows: true,
    					filterable: false, //true,
    					columnsresize: true,
    					virtualmode: true,
    					autoshowfiltericon: true,
    					rendergridrows: function(){
    						return myDataAdapter
    						.records;     
    					},
    					columns: myColumns,
    
    					ready: function () {
    						addfilter();
    						var localizationObject = {
    							filterstringcomparisonoperators:    ['contains'],                                                    
    							filternumericcomparisonoperators:   ['less than', 'greater than'],
    							filterdatecomparisonoperators:      ['less than', 'greater than'],
    							filterbooleancomparisonoperators:   ['equal'],  
    						}
    						currentDataOpened.find("."+currentGrid).jqxGrid('localizestrings', localizationObject);  
    					},
    
    					updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
    					 columnfilter, filtertype, filterconditions) {
    						var index1 = 0;
    						var index2 = 0;
    						if (columnfilter != null) {
    							var filter1 = columnfilter.getfilterat(0);
    							var filter2 = columnfilter.getfilterat(1);
    							if (filter1) {
    								index1 = filterconditions.indexOf(filter1.comparisonoperator);
    								var value1 = filter1.filtervalue;
    								filterinputfield1.val(value1);
    							}
    							if (filter2) {
    								index2 = filterconditions.indexOf(filter2.comparisonoperator);
    								var value2 = filter2.filtervalue;
    								filterinputfield2.val(value2);
    							}
    						}
    						filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
    						filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
    					},
    					updatefilterconditions: function (type, defaultconditions) {
    						var stringcomparisonoperators = ['CONTAINS'];
    						var numericcomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    						var datecomparisonoperators = ['LESS_THAN', 'GREATER_THAN'];
    						var booleancomparisonoperators = [];
    						switch (type) {
    							case 'stringfilter':
    								return stringcomparisonoperators;
    							case 'numericfilter':
    								return numericcomparisonoperators;
    							case 'datefilter':
    								return datecomparisonoperators;
    							case 'booleanfilter':
    								return booleancomparisonoperators;
    						}
    					}                                          
    				});
    			}
    		},
    		error: function(jqXHR, textStatus, errorThrown){
    			console.log(jqXHR);
    		}
    	}); // $ajax
    	// asynch nature of ajax makes this problematic
    	// by the time it executes, the variable has been incremented
    	// i = i+1;
    	// var currentGrid =  "jqxgrid"+i; 
    	// console.log("currentGrid = "+currentGrid);
    }

    Peter Stoev
    Keymaster

    Hi guys,

    Just to mention that there is no autowidth property in jqxGrid so please use only documented API – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    jonfrain
    Participant

    I’m not actually using autowidth in this example. Any thoughts on why the minwidth is being overridden and it’s only using %


    jonfrain
    Participant

    I just figured it out. I misused minwidth as it isn’t in ‘100px’ format it is inn just 100 format.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.