Reply To: grid with css height auto and add new row fails to display rows after ~3 adds

[admin]

 
I’ve been doing some experiments. There seems to be a problem if the initial number of rows in the data source is 1 or 0. If it is > 1, then new rows that are added are correctly displayed.
It is rather bizarre behaviour.
If there are zero rows initially, it seems it will never show any row.
If there is one row initially, it seems it will only ever show 2 rows.
If there are two or more rows initially, it seems to work correctly, and added rows are displayed.
In all cases, the height does increase when rows are added, but it does not render the new rows. Just white space.
.refresh() seems to do nothing.
See module below that sets up the grid <div id=add_course_history_grid></div>
addCourseGrid.js

// Grid for add Course
const dataFields = [
'id: string',
'schoolID: string',
'code: string',
'enrollmentStartDate: string',
'enrollmentEndDate: string',
'activeStartDate: string',
'activeEndDate: string',
'syllabusCode: string',
'name: string',
'shortName: string',
'description: string',
'academicTerm: string',
'paymentKind: string',
'isPaid: bool',
'enrollmentRules: string',
'gradingParameters: string',
'tags: string',
'notes: string',
'annex: string',
'serverCreatedAt: string',
'serverUpdatedAt: string',
'rowVersion: number',
];
const columnGroups = [
{ label: 'Enrollment', name: 'enrollment', align: 'center' },
{ label: 'Active', name: 'active', align: 'center' },
{ label: 'Payment', name: 'payment', align: 'center' },
{ label: 'Housekeeping', name: 'housekeeping', align: 'center' },
];
const columns = [
{ label: 'id', width: '10em', dataField: 'id' },
{ label: 'schoolID', width: '12em', dataField: 'schoolID' },
{ label: 'code', width: '10em', dataField: 'code' },
{ label: 'StartDate', dataField: 'enrollmentStartDate', columnGroup: 'enrollment' },
{ label: 'EndDate', dataField: 'enrollmentEndDate', columnGroup: 'enrollment' },
{ label: 'StartDate', width: '15em', dataField: 'activeStartDate', columnGroup: 'active' },
{ label: 'EndDate', width: '15em', dataField: 'activeEndDate', columnGroup: 'active' },
{ label: 'syllabusCode', width: '6em', dataField: 'syllabusCode' },
{ label: 'name', width: '20em', dataField: 'name' },
{ label: 'shortName', width: '12em', dataField: 'shortName' },
{ label: 'description', width: '12em', dataField: 'description' },
{ label: 'academicTerm', width: '12em', dataField: 'academicTerm' },
{ label: 'Kind', width: '10em', dataField: 'paymentKind', columnGroup: 'payment' },
{ label: 'Paid ?', width: '5em', align: 'center', dataField: 'isPaid', columnGroup: 'payment', template: 'checkBox' },
{ label: 'tags', width: '10em', dataField: 'tags' },
{ label: 'notes', width: '10em', dataField: 'notes' },
{ label: 'annex', width: '10em', dataField: 'annex' },
{ label: 'serverCreatedAt', width: '20em', dataField: 'serverCreatedAt', columnGroup: 'housekeeping' },
{ label: 'serverUpdatedAt', width: '20em', dataField: 'serverUpdatedAt', columnGroup: 'housekeeping' },
{ label: 'rowVersion', width: '12em', dataField: 'rowVersion', columnGroup: 'housekeeping' },
];
const appearance = {
alternationCount: 2,
showRowNumber: true,
showRowHeader: true,
};
const selection = {
enabled: true,
allowCellSelection: true,
allowRowHeaderSelection: true,
allowColumnHeaderSelection: true,
mode: 'extended'
};
const dataSource = new Array(
{id: 'one', schoolID: 'FooState', code: 'Foo101'},
{id: 'two', schoolID: 'UFoo', code: 'Foo102'},
//{id: 'three', schoolID: 'BarPoly', code: 'Foo103'},
//{id: 'four', schoolID: 'UCBar', code: 'Foo104'},
);
//const dataSource = new Array();
const dataAdapter = new Smart.DataAdapter({
dataSource: dataSource,
dataFields: dataFields,
});
function onRowInit(index, row) {
if (index < 1) {
row.freeze = true;
}
}
export const addCourseGrid = new Smart.Grid('#add_course_history_grid', {
dataSource: dataAdapter,
columnGroups: columnGroups,
columns: columns,
columnResizeMode: 'growAndShrink',
appearance: appearance,
sorting: { enabled: true, },
selection: selection,
onRowInit: onRowInit,
});
document.addCourseGrid = addCourseGrid; // for easy debug