[13] ListGrid - Fieldstate vs viewstate

[SimonF]

Hi there,
we have a problem with the ListGrid in the latest Smartclient 13-Build
We have used the fieldStateChanged when the viewState of the ListGrid changed, but this method contains no sort information. So we changed to the viewStateChanged which includes the sort information. We thought that the viewStateChanged behaves otherwise the same as fieldStateChanged. But with the viewStateChanged we have the problem that the resizing of the columns does not behave in the same way as fieldStateChanged. With the viewStateChanged only the width of the last adjusted column is passed to the viewState. The width of columns that have been modified before will not be passed to the viewStat.
Is there any possibility to get both information, the sort information and the resizing of the colums like in fieldStateChanged in the viewState?


Sidenote: We are removing the "selected" and "open" attributes from the viewstate.
Also we do calculate the absolute widths of the colums to a percentage-width for each field.

function viewStateWithPercentageWidths(usePercentage, viewState, gridName) {
    var grid = isc.Canvas.getById(gridName);
    var gridWidth = grid.getWidth();
    if (usePercentage) {
        viewState = viewState.replace(/\"width\":(\d*(\.\d*)?)/g, function (s, aWidth) {
            var percentageWidth = "\"width\":";
            if (aWidth != "") {
                percentageWidth = percentageWidth + "\"" + ((parseInt(aWidth) / gridWidth) * 100) + "%\"";
            }
            return percentageWidth
        });
    } else {
        viewState = viewState.replace(/\"width\":\"(\d*(\.\d*)?)\%\"/g, function (s, aWidth) {
            var realWidth = "\"width\":";
            if (aWidth != "") {
                realWidth = realWidth + Math.ceil((parseFloat(aWidth) * gridWidth) / 100)
            }
            return realWidth
        });
        viewState = "(" + viewState + ")"
    };
    return viewState
}

viewStateChanged -> only the last width but with sorting

viewState: {
   "field":[
      {
         "name":"fieldOne",
         "autoFitWidth":false
      },
      {
         "name":"fieldTwo",
         "autoFitWidth":false
      },
      {
         "name":"fieldThree",
         "autoFitWidth":false,
         "width":"43.10776942355889%"
      }
   ],
   "sort":{
      "sortSpecifiers":[
         {
            "property":"fieldOne",
            "direction":"ascending"
         }
      ]
   },
   "hilite":"[No Hilites]",
   "group":"[No Grouping]",
   "showFilterEditor":false
}

fieldStateChanged -> no sorting but all widths

viewState: {
   "field":[
      {
         "name":"fieldOne",
         "autoFitWidth":false,
         "width":"4.385964912280701%"
      },
      {
         "name":"fieldTwo",
         "autoFitWidth":false,
         "width":"34.08521303258145%"
      },
      {
         "name":"fieldThree",
         "autoFitWidth":false,
         "width":"34.21052631578947%"
      }
   ],
   "sort":"[No Sorting],"hilite":"[
      No Hilites
   ]","group":"[
      No Grouping
   ]","showFilterEditor":false}

Best regards

[Blama]

Hi SimonF,

you have grid = isc.Canvas.getById(gridName). Can't you just call grid.getViewState()?

Best regards
Blama

[Isomorphic]

hi SimonF

Can you show the setup for your ListGrid? No need for data - in particular, we're interested in your state-changed handlers and any settings related to field-width or auto-fitting at the grid or field level, which can affect viewState content.

thanks

Isomorphic Support

[SimonF]

Hi there,
I had to isolate the problem: therefore I needed some more time.
Here you can see the problem again in the gif. calling the method getViewState() does return different values after "fieldStateChanged" and "sortChanged".
In both cases the widths of all columns should be in the viewstate


I'm aware thats not pretty code, but you can reproduce this behaviour with this code:

var step = 0
function viewStateWithPercentageWidths(usePercentage, viewState, gridName) {
    var grid = isc.Canvas.getById(gridName);
    var gridWidth = grid.getWidth();
    if (usePercentage) {
        viewState = viewState.replace(/\"width\":(\d*(\.\d*)?)/g, function (s, aWidth) {
            var percentageWidth = "\"width\":";
            if (aWidth != "") {
                percentageWidth = percentageWidth + "\"" + ((parseInt(aWidth) / gridWidth) * 100) + "%\"";
            }
            return percentageWidth
        });
    } else {
        viewState = viewState.replace(/\"width\":\"(\d*(\.\d*)?)\%\"/g, function (s, aWidth) {
            var realWidth = "\"width\":";
            if (aWidth != "") {
                realWidth = realWidth + Math.ceil((parseFloat(aWidth) * gridWidth) / 100)
            }
            return realWidth
        });
        viewState = "(" + viewState + ")"
    };
    return viewState
}
function drawAndSetViewState(gridName) {
    var grid = isc.Canvas.getById(gridName);
    grid.Super("draw");
    if (typeof(grid.percentageViewState) != "undefined") {
        var viewState = viewStateWithPercentageWidths(false, grid.percentageViewState, gridName);
        console.log("Setting viewState: " + viewState);
        grid.setViewState(viewState);
        grid.percentageViewState = undefined
    }
}
function logViewState(gridName, sourceString){
    var grid = isc.Canvas.getById(gridName);
    var viewState = JSON.stringify(eval(grid.getViewState()));
    viewState = viewState.replace(/\"selected\":\[.*?\],/g, '');
    viewState = viewState.replace(/\"selected\":\[.*?\]/g, '');
    viewState = viewState.replace(/\"selected\":null.*?,/g, '');
    viewState = viewState.replace(/\"selected\":null.*?/g, '');
    viewState = viewState.replace(/,\"open\":\"\[.*?\]\"/g, '');
    viewState = viewState.replace(/\"open\":\"\[.*?\]\"/g, '');
    viewStatePercentage = viewStateWithPercentageWidths(true, viewState, gridName);
    canvas = step%2==0?canvas1:canvas2;
    step++;
    const output = viewState.replace(/("width":\d+)/g, '<span style="background-color: yellow">$1</span>');

    canvas.setContents("<span style='font-size:1.5rem'><b>"+sourceString+":</b>"+output+"</span>");

}
isc.VLayout.create({width:820, height:600,"members": [
isc.ListGrid.create(
                     {
                         "autoDraw": true,
                         "ID": "theGrid",
                         "selectionUpdated": function (p1, p2) {
                         },
                         "selectionChanged": function (record, state) {
                         },
                         "width": "100%",
                         "height": "60",
                         "canHover": true,
                         "hideUsingDisplayNone": false,
                         "hoverWidth": 200,
                         "leaveScrollbarGap": true,
                         "selectionType": "multiple",
                         "canEdit": false,
                         "alternateRecordStyles": true,
                         "autoFitWidthApproach": "both",
                         "showFilterEditor": false,
                         "selectionProperty": "isSelected",
                         "canGroupBy": false,
                         "saveCriteriaInViewState": false,
                         "useAdvancedCriteria": false,
                         "canShowFilterEditor": false,
                         "allowFilterWindow": false,
                         "canSaveSearches": false,
                        "percentageViewState":"{\r \"hilite\": \"[No Hilites]\",\r \"group\": \"[No Grouping]\",\r \"field\": [\r \r {\r \"width\": \"20%\",\r \"autoFitWidth\": false,\r \"name\": \"fieldOne\"\r },{\r \"width\": \"20%\",\r \"autoFitWidth\": false,\r \"name\": \"fieldTwo\"\r },\r {\r \"width\": \"60%\",\r \"autoFitWidth\": false,\r \"name\": \"fieldThree\"\r } \r ],\r \"showFilterEditor\": false\r}",
                         "draw":function(){drawAndSetViewState("theGrid")},
                         "sortChanged": function (p1) {
                             logViewState("theGrid","sortChanged")
                         },
                         "fieldStateChanged": function () {
                             logViewState("theGrid","fieldStateChanged")
                         },
                         "groupStateChanged": function () {
                             logViewState("theGrid","groupStateChanged")
                         },
                         "initialSort": [{
                                 "property": "fieldEight",
                                 "direction": "descending"
                             }
                         ],
                         "fields":
                         [{
                                 "name": "fieldOne",
                                 "title": "fieldOne",
                                 "type": "text",
                                 "width": 400,
                                 "canEdit": false,
                                 "canSort": true,
                                 "canGroupBy": false,
                                 "escapeHTML": true,
                                 "shouldPrint": true,
                                 "editorProperties": {
                                     "escapeHTML": true
                                 }
                             }, {
                                 "name": "fieldTwo",
                                 "title": "fieldTwo",
                                 "type": "text",
                                 "width": 200,
                                 "canEdit": false,
                                 "canSort": true,
                                 "canGroupBy": false,
                                 "escapeHTML": true,
                                 "shouldPrint": true,
                                 "editorProperties": {
                                     "escapeHTML": true
                                 }
                             }, {
                                 "name": "fieldThree",
                                 "title": "fieldThree",
                                 "type": "boolean",
                                 "width": 200,
                                 "canEdit": false,
                                 "canSort": true,
                                 "canGroupBy": false,
                                 "escapeHTML": false,
                                 "shouldPrint": true,
                                 "editorProperties": {
                                     "escapeHTML": false
                                 }
                             }
                         ],
                         "members":
                         []
                     }
                     ),
                     isc.Canvas.create({ID: "canvas1"}),
                     isc.Canvas.create({ID: "canvas2"})]})

Best regards