ViewState width with different screen sizes

[BenediktK]

Hi,
I want to implement the usage of viewState in our application. Therefore i run into other bugs, but besides that i have the problem that most of our listgrids we are using are defined with a width of 100%. So if the user has a small display the ListGrid fills the whole width and if he has a large display it also fills the whole width.

The current implementation of viewState does always return some absolute-pixel-width per ListGridField. After doing the calculation with width-attributes in percentages for each field it's understandable and easier to get the pixel-width insted of the percentages.

But if we are using the current implementation it will break the users listgrid if he ever switches the display-size (or resizes the browser). Then the listgrid is resized to the pixel-sizes fields which were saved after resizing on a large screen. This responds to a result, where some fields are hidden on the right, because the viewstate indirectly indicated that the listgrid is also large. So if you switch from a small to large screen, the white-space at the right side is always visible (and not needed) and switching from a large screen to a small screen you maybe not seeing all fields because they are only visible by scrolling there.

One solution to this would be before saving the viewState replacing all pixel-width in the fields wih a percentage-width.
This could be done by this snippet:

var viewstate = listGrid.getViewState();
a = viewstate.replace(/width:(\d*)/g,function(s,aWidth){
  var theListGridWidth = listGrid.width;
  if(aWidth != ""){
    return "\""+Math.round((parseInt(aWidth)/theListGridWidth)*100)+"%\"";
  } else{
    return ""
  }
});
console.log(a);

If this "relativeViewState" is saved in the backend this could be delivered at the initilaization of the view. But it seems that the viewState is fixed to a absolute-pixel width per field, so the whole viewState is ignored.

To build a workaround for this, we could send the proportionalViewState to the client and do the reverse-calculation (percentage-width to absolute-width) and after this do setViewState.
This doesn't seems to be a good solution. Is there a solution to work with differend screen-resolution (display-sizes)?

I have tested this behavior in all current browsers (IE 11, Firefox 34, Chrome 39) with the latest nightly build (SmartClient_v100p_2014-12-17_Pro)

Best Regards

[Isomorphic]

This is not actually what viewState does - we don't save specific pixel widths unless you either provided specific pixel widths or the user resized the field.

You can see this in samples.

If you've found a case where viewState seems to use pixel values when it shouldn't, we'll need a way to reproduce that problem.

[BenediktK]

The list grid perfoms well when setting field widths with percentage numbers and resizing the browser.
But if you set these percentage widths and ask the list grid for its viewState, it will answer the widths as null.
Here the view state should answer the real percentage widths. This also implies, that the view state should be able to handle percentage widths, to be able to set these view states.

Following is a small example list grid, where I tried to set a view state with percentage widths which currently doesn't work. Below that list grid code the resulting view state you'll get after initializing the list grid.

The list grid with percentage widths and percentage view state:

isc.ListGrid.create({
	"ID" : "listGrid",
	"viewStateChanged" : function () {
		console.log(listGrid.getViewState())
	},
	"width" : "100%",
	"height" : "100%",
	"viewState" : "({field:[{name:\"aField\",width:\"80%\"},{name:\"anotherField\",width:\"20%\"}]})",
	"fields" :
	[{
			"name" : "aField",
			"width" : "20%"
		}, {
			"name" : "anotherField",
			"width" : "80%"
		}
	],
	"members" :
	[],
	"data" :
	[]
})

The resulting viewState:

({selected:null,field:[{name:"aField",width:null},{name:"anotherField",width:null}],sort:{fieldName:null,sortDir:"ascending"},hilite:null,group:""})

As you can see, the set percentage widths are claimed to be null. This shouldn't happen, because these aren't null, just percentage widths.

Best Regards

[Isomorphic]

The purpose of viewState is to represent user preferences relative to the default grid configuration.

If you apply this viewState to a grid in which the fields have default percentage widths, the fact that there are nulls in the viewState means that the default settings on the grid will be left alone.

This is the right behavior, because it covers the case that the grid has changed it's default field sizing - you don't want the viewState to retain the old default grid configuration for fields where the user hasn't customized the field widths.