SmartClient_v101p_2016-02-16_PowerEdition
Here is another small UI issue that our users have encountered. We allow users to group on a string field using one of two options, normal or parsed. Parsed basically groups the grid on N fields that have been dynamically created when data is fetched. I omitted the custom grouping code for brevity, but the creation of the dynamic fields is contained within this test case. I also found the area of the code that seems to be causing this issue, and talk about that below.
REPRO steps
===========
1. Load the test case
2. Right click the path column, and select Configure Grouping
3. Observe that path is already displayed
4. Add a new group, Project
5. Add a new group, Path Level 1
6. Observe that the dropdown is displayed for grouping modes
I have tried setting grouping modes on the field to null or an empty array with no success.
I played around with the code and seemed to narrow it down to the code in the attached screenshot. Basically, looks like its checking for null but in my case the code is returning false. I didn't really do much more analysis other than returning null to resolve the issue.
Here is another small UI issue that our users have encountered. We allow users to group on a string field using one of two options, normal or parsed. Parsed basically groups the grid on N fields that have been dynamically created when data is fetched. I omitted the custom grouping code for brevity, but the creation of the dynamic fields is contained within this test case. I also found the area of the code that seems to be causing this issue, and talk about that below.
REPRO steps
===========
1. Load the test case
2. Right click the path column, and select Configure Grouping
3. Observe that path is already displayed
4. Add a new group, Project
5. Add a new group, Path Level 1
6. Observe that the dropdown is displayed for grouping modes
I have tried setting grouping modes on the field to null or an empty array with no success.
I played around with the code and seemed to narrow it down to the code in the attached screenshot. Basically, looks like its checking for null but in my case the code is returning false. I didn't really do much more analysis other than returning null to resolve the issue.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.diagInfo {
font-size: 14px;
font-weight: bold;
padding: 5px;
}
</style>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Core.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Foundation.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Containers.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Grids.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Forms.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_DataBinding.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Drawing.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_PluginBridges.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/system/modules/ISC_Charts.js"></script>
<script type="text/javascript" SRC="http://localhost:8080/isomorphic/skins/EnterpriseBlue/load_skin.js"></script>
<script type="text/javascript" >
var isomorphicDir="http://localhost:8080/isomorphic/";
// set this to the correct JIRA ticket
var JIRA_TICKET = "SNT-14287";
// test data
var data = [
{ project: "123 Avenue", path:"East->GA->Atlanta->Engineering", redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Long Project Name", path:"East->PA->Pittsburgh->Engineering",redflag: "", owner: "Staples", ins: 33, obs: 231, unsafe: 9, safe: 80, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "6789 Avenue B", path:"East->PA->Pittsburgh->Finance",redflag: "", owner: "University of MD", ins: 33, obs: 23, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", path:"East->PA->Pittsburgh->Maintenance",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Feliz Navidad", path:"East->VA->Newport News",redflag: "", owner: "University of MD", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", path:"East->VA->Newport News->Engineering",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 10, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "Whitehouse Lawn Maintenance", path:"East->PA->Philadelphia->Electrical",redflag: "", owner: "University of MD", ins: 33, obs: 231, unsafe: 9, safe: 220, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" },
{ project: "123 Avenue", path:"East->PA->Philadelphia->Electrical", redflag: "", owner: "Staples", ins: 33, obs: 1, unsafe: 9, safe: 222, insDate: "10/12/2011", score:"<img src='star-4.png'/>55%", link:"<a href=''>View Analysis</a>" }
];
isc.DataSource.create({
ID: "ds",
fields: [
{name:"project", title:"Project", type:"text" },
{name:"path", title:"Path", type:"text", groupingModes: ["String", "Parse"] },
{name:"owner", type:"text", title:"Owner"},
{name:"ins", type:"integer", title:"#Inspections"},
{name:"obs", type:"integer", title:"#Observations"}
],
cacheData:data,
clientOnly: true
});
// once page loads set some diagnostic information, DO NOT CHANGE
isc.Page.setEvent("load", function() {
document.title = JIRA_TICKET + " (SmartClient version " + isc.versionNumber + ")";
var html = [];
html.push("Jira: " + JIRA_TICKET);
html.push("SmartClient: " + isc.versionNumber);
html.push("Browser: " + navigator.appCodeName + " " + navigator.appName + " " + navigator.appVersion);
diagLabel.setContents( html.join("<br>"));
});
</script>
</head>
<body>
<script>
// ===== DO NOT REMOVE =====
var diagLabel = isc.Label.create({
ID: "diagInfo",
width: "100%",
styleName: "diagInfo",
autoFit: true
});
// ===== DO NOT REMOVE =====
// basic grid
var grid = isc.ListGrid.create({
dataSource: ds,
dataFetchMode : "local",
autoFetchData: true,
clientOnly: true,
position: "relative",
width : "100%",
align : "center",
autoFitData : "vertical",
autoFitMaxHeight : 400,
alternateRecordStyles : true,
canAddFormulaFields : true,
canAddSummaryFields : true,
canGroupBy : true,
canReorderFields : true,
showGroupSummary : true,
useAdvancedFieldPicker: true,
advancedFieldPickerThreshold: 5,
autoDraw: false,
badFormulaResultValue: "NA",
canMultiGroup: true
});
// the main page layout - place all other components afetr diagLabel
var layout = isc.VLayout.create({
width:"100%",
membersMargin: 20,
members: [
// ===== DO NOT REMOVE diagLabel
diagLabel,
// ===== place anty components here
grid
]
});
// add additional fields to grid based on level
var createPathValueFnx = function(field) {
var name = field.name;
return function(value, record, rowNum, colNum, grid) {
var str = "";
// get the level of this field
var level = field.name.split("-")[1];
var path = record["path"];
if (path != null && typeof (path) != "undefined") {
var values = path.split("->");
if (values.length > level)
str = values[level].trim();
record[name] = str;
}
return str;
}
}
var fields = grid.getAllFields();
var field = {
name : "path_level-1",
title : "Path Level 1",
type : "text"
};
field.formatCellValue = createPathValueFnx(field);
field.getGroupValue = createPathValueFnx(field);
fields.push(field);
var field = {
name : "path_level-2",
title : "Path Level 2",
type : "text"
};
field.formatCellValue = createPathValueFnx(field);
field.getGroupValue = createPathValueFnx(field);
fields.push(field);
grid.setFields(fields);
</script>
</body>
</html>
Comment