[jonfrainParticipant]

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);
}

[jonfrainParticipant]

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.

[jonfrainParticipant]

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

[jonfrainParticipant]

Thank you very much!

[jonfrainParticipant]

it looks like I didn’t read the api well enough as autoOpen seems to handle that.

[jonfrainParticipant]

I think I need to fix the jqui CSS z-index. I think changing that will be easiest.

[jonfrainParticipant]

I have a quick correction. I’m pulling up a jquery ui dialog box, not a form.

[Author]

Posts