We have noticed an issue around highlighting and frozen columns I am hoping you can help with. Some of our grids are configured to have a frozen column which is initialized with some data (an image, checkbox, etc.). We do this programtically and do not allow the user to change the field. When applying highlighting to another field, then subsequently grouping by that field, highlighting applies correctly. However, when simply dragging the field to the left highlighting does not work as we would expect.
My underlying requirement is that when all groups are collapsed, and applying a highlight to that group, that the field is highlighted. It seems as though this only occurs when the field is the first (leftmost) field in the grid. However I would expect that the group title and values are both highlighted. The position of the grouped field should not matter in this case.
REPRO Steps
=============
1. Load the test case
2. Click the highlight button
3. Create highlight, Region contains "North", background color any
4. Observe that the fields are highlighted
5. Group by Region
6. Observe that the group title is NOT highlighted (we expect that it should be)
7. Freeze Region (in order to get it to the leftmost column)
8. Observe that the group title IS highlighted
The reason that the "Check" column is important in this test case is because the user can never drag the Region field to the leftmost position, and with the current behavior, the group title is never highlighted in this case. Is this something that should work or does highlighting only apply to group titles if that field is first in the grid?
My underlying requirement is that when all groups are collapsed, and applying a highlight to that group, that the field is highlighted. It seems as though this only occurs when the field is the first (leftmost) field in the grid. However I would expect that the group title and values are both highlighted. The position of the grouped field should not matter in this case.
REPRO Steps
=============
1. Load the test case
2. Click the highlight button
3. Create highlight, Region contains "North", background color any
4. Observe that the fields are highlighted
5. Group by Region
6. Observe that the group title is NOT highlighted (we expect that it should be)
7. Freeze Region (in order to get it to the leftmost column)
8. Observe that the group title IS highlighted
The reason that the "Check" column is important in this test case is because the user can never drag the Region field to the leftmost position, and with the current behavior, the group title is never highlighted in this case. Is this something that should work or does highlighting only apply to group titles if that field is first in the grid?
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 = "SNQA-1166";
// test data
var data = [
{inspectorID:12345, region:"Northeast", inspections:206, observations:2,lastInspectionDate:new Date(2012, 8, 13), index:52.6 },
{inspectorID:67890, region:"West", inspections:66, observations:2,lastInspectionDate:new Date(2013, 2,2), index:75.3 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:09876, region:"South", inspections:24, observations:0,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:67890, region:"West", inspections:66, observations:2,lastInspectionDate:new Date(2013, 2,2), index:75.3 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:67890, region:"West", inspections:66, observations:2,lastInspectionDate:new Date(2013, 2,2), index:75.3 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:09876, region:"South", inspections:24, observations:0,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:67890, region:"West", inspections:66, observations:2,lastInspectionDate:new Date(2013, 2,2), index:75.3 },
{inspectorID:54321, region:"Northeast", inspections:4, observations:7,lastInspectionDate:new Date(2013,2,3), index:75.3 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 },
{inspectorID:09876, region:"West", inspections:24, observations:1,lastInspectionDate:new Date(2012,8,31), index:52.6 }
];
// datasource for the grid
isc.DataSource.create({
ID: "ds",
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,
fields: [
{name:"check", type:"text", title:"Check", canDragResize:false, canReorder:false, formatCellValue: function( value, record, rowNum, colNum, grid) {
return "<input type='checkbox'></input>";
}},
{name:"region", type:"text", title:"Region/Country"},
{name:"observations", title:"# Observations", summaryFunction: _createAggregateFunctions()}
],
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,
canGroup: true,
useAdvancedFieldPicker: true,
advancedFieldPickerThreshold: 5,
autoDraw: false,
badFormulaResultValue: "NA"
});
// 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,
isc.IButton.create({
title : "Hilites...",
click : function() {
grid.editHilites();
}
})
]
});
</script>
</body>
</html>
Comment