Products

[admin]

Hi cetinsert,
Additional Grid settings are required:

   /*1*/   'commandColumnEdit': { visible: false },
   /*2*/   'commandColumnCancel': { visible: false },
   /*3*/   'commandColumnUpdate': { visible: false }

Best Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com/

[admin]

The problem was that I had the first row frozen. It will get an exception as shown above if you try to insert before a frozen row.
If not frozen, then I can insert at 0, and it works. This gives me the most-recent-first insertion I want to show history.
I can see that it’s not obvious what the “correct” behaviour might be. It depends on the full definition of what you consider to be “frozen”.
I think anyway I didn’t need to freeze, as I just want to freeze the headers. I supposed the headers are automatically frozen anyway.

[admin]

Thank you so much – I appreciate the prompt feedback! It allows me to move on to other things while waiting for a fix.

[admin]

I would prefer to work with the bound data, though.
I’m afraid I am thoroughly confused about adding rows by creating a row and adding nodes to the grid, vs. adding rows to the data source.
The latter is my preference, and it does work, but only for append and insert but not insert at top.
I had hoped I could manipulate the data source, as it is most convenient for e.g. update an array from a REST fetch, but only having partial luck with this. Works if I want to add to the end or middle, just not at the top.

[admin]

Based on: https://www.htmlelements.com/demos/grid/dynamic-rows/.
Use rows.splice(0, 0, createRow()); in the example, within the addRow click handler.
Regards,
George
Smart Html Elements Team
https://www.htmlelements.com/

[admin]

Hello,
We confirm the Grid component issue reported by jtara. We will resolve it in the next update.
Regards,
George
Smart Html Elements Team
https://www.htmlelements.com/

[admin]

Sorry, I can’t find how to delete a post, I have to leave the duplicate above.
I looked at source code, and I find nothing that seems to prepend. Only add() and insert().

[admin]

Ugh, sorry about that. The impossible forum software again.

smart.grid.row.js:282 Uncaught TypeError: Cannot set property 'row' of undefined
at Row.render (smart.grid.row.js:282)
at HTMLElement._renderFrozenRows (smart.grid.core.js:6944)
at HTMLElement._recycle (smart.grid.core.js:6914)
at DataAdapter.notifyFn (smart.grid.core.js:4535)
at DataAdapter._notify (smart.data.js:193)
at DataAdapter.insert (smart.data.js:634)
at <anonymous>:1:35

[admin]

So, then I experiment from the console with e.g.:
document.addCourseGrid.dataSource.add({id:’mytest 2′, code:’f123aacdee’});
with results as I explained above.
This is with 4.3.

[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

 

[admin]

It doesn’t seem to really be resolved in 4.3. I can’t get it to show more than 4 rows when I add.
But maybe I am not adding correctly. I had a heck of a time figuring out from the documentation just how to add rows. Lots of extensive documentation, but seems lacking in presenting key concepts. Maybe it is easier if you are coming from jsWidgets?  I guess part of the problem is there are several ways. I have a number of requests into support about this, so they will be busy after the holiday. 😉
There are demos that create a grid row, and add the row to the grid. I tried to guess what to do with a data adapter. I finally came across a useful demo, and for the common case where you just have an array of source data, e.g. mygrid.dataSource.add({id: ‘foo’, code: ‘bar’} seems to work and updates both the source array and the displayed grid – UNTIL you get to 4 rows.
After 4 rows are in the grid, if the height is auto, the height will increase, but it will display a blank row. I can confirm that the data is in the dataSource. But it doesn’t show.
Setting a fixed height doesn’t help. It won’t show more than 4. If you set height to auto, at least it demonstrates that rows are being added, because the height is seen to increase by observing the border – but the rows are not shown on the page.
 

[admin]

Sorry, for the typo. It is toJSON(), not jsonData in 4.3.
Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi cetinsert,
The file is updated.
Best Regards,
George
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

4.3 has an app.toJSON() method – cannot find app.jsonData property though.

[admin]

Hi George,
Your response times are astonishing! It makes using your forums such a pleasure.
Thanks,
Cetin

[Author]

Posts