JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid grid with css height auto and add new row fails to display rows after ~3 adds

Tagged: 

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #100186
    admin
    Keymaster

    https://codepen.io/cetinsert/pen/mdbPYRJ
    in 4.1, not tested with older releases

    #100187
    admin
    Keymaster

    https://codepen.io/cetinsert/pen/mdbPYRJ – just edited to show another issue:
    appearance: { showRowNumber: true },
    editing: { addNewRow: { visible: true, position: ‘near’ }
    starts counting rows from 2 not 1

    #100188
    admin
    Keymaster

    work arounds for both are welcome before fixes in a future release

    #100189
    admin
    Keymaster

    Thanks for the auto height feedback.
    The workaround is to use the feature as shown on the website demos – grid has height different than auto. We will address the reported behavior in the next release of the grid component.

    #100190
    admin
    Keymaster

    I had already found a better workaround earlier for height auto, addNewRow!

    1. Start with fixed height in CSS
    2. Change height to auto in JS

    Auto-height with add new row:

    <hr />
    What about the counter starting at 2?
    Is that going to be addressed as well?

    #100192
    admin
    Keymaster

    Yes, we will.
    Regards,
    Boyko Markov
    Smart Html Elements Team
    https://www.htmlelements.com/

    #100194
    admin
    Keymaster

    https://codepen.io/cetinsert/pen/eYOZqEg – I realized this works up to the CSS-defined height and fails again (9 rows in this link). Increase height in CSS and it works longer.
    Thank you for your prompt responses.

    #100195
    admin
    Keymaster

    I wrote in my previous post that it works only with defined height as shown in demos.
    Regards,
    Boyko Markov
    Smart Html Elements Team
    https://www.htmlelements.com/

    #100237
    admin
    Keymaster

    Hi,
    Update: The reported behavior of the Grid is resolved in ver. 4.2.0.
    Regards,
    Boyko Markov
    Smart Html Elements Team
    https://www.htmlelements.com/

    #100253
    admin
    Keymaster

    Thank you!
    Still persists if

    • editing.batch == true

    also holds though.
    https://codepen.io/cetinsert/pen/rNBmxBK (marked !!)

    #100256
    admin
    Keymaster

    Hi,
    New Update: The reported behavior of the Grid is resolved in ver. 4.3.0.
    Regards,
    Boyko Markov
    Smart Html Elements Team
    https://www.htmlelements.com/

    #100271
    admin
    Keymaster

    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.
     

    #100272
    admin
    Keymaster

     
    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

     

    #100274
    admin
    Keymaster

    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.

    #100280
    admin
    Keymaster

    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/

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.