JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Data Grid adding children to expanded row using groupy

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #104771
    Winston SocialApps
    Participant

    I have groupy with a lot of data row in full is around 55k

    my datasource:
    const dataSource = new window.Smart.DataAdapter({
    autobind: false,
    dataSource: entitlementBalancesByHR,
    groupBy: [’employeeNameForDisplay’],
    dataFields: [
    ‘id: number’,
    ‘requestTypeCode: string’,
    ‘requestType: string’,
    ’employeeName: string’,
    ’employeeNameForDisplay: string’,
    ‘year: string’,
    ‘entitled: number’,
    ‘used: number’,
    ‘balanced: number’,
    ‘pending: number’,
    ‘selectedRow: bool’
    ]
    });


    and
    const onRowExpand = (event?: Event | undefined) => {

    }

    is it possible to add a row as new children in onRowExpand?

    #104781

    Hi,

    Yes, you can do it, simply use the addRow method.
    Here is an example: https://codepen.io/svetoslavjqwidgets/pen/GRYEKjr

    I hope this helps!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    #104805
    Winston SocialApps
    Participant

    Thanks,
    It works!

    Just a follow-up,
    how to clear the rows previously added or clear the rows before expand?

    #104810
    Markov
    Keymaster

    Hi,

    You can delete a row by using the deleteRow method. For example: grid.deleteRow(1); To clear all rows, you can set the Grid’s source property to an empty array or null.

    Regards,
    Markov

    #104812
    Winston SocialApps
    Participant

    Sorry another problem I got, It can add a row using function addRow,
    the problem after multiple rows, the whole expanded rows will collapsed.

    is there any property to set?
    i tried

    ———————-

    currentHRGrid.beginUpdate();
    // add-row
    data.forEach((item:EntitlementsBalance, index:number, items:EntitlementsBalance[])=>{
    const nextRequestType = index > 0 ? (item.requestType === data[index – 1].requestType ? ” : item.requestType) : item.requestType;
    currentHRGrid.addRow({
    id:item.id,
    employeeName: item.employeeName,
    employeeNameForDisplay: item.employeeNameForDisplay,
    requestTypeCode: item.requestTypeCode,
    requestType: nextRequestType,
    year: item.year,
    entitled: item.entitled,
    pending: item.pending,
    used: item.used,
    balanced: item.balanced,
    },true,(row:GridRow)=>{
    console.debug(‘new-row-added:’, row);
    });
    });

    currentHRGrid.endUpdate(true);
    ———————–

    still same behaviour

    also tried putting
    grid.refreshView()

    no luck,

    any possible suggestion?

    #104814
    Winston SocialApps
    Participant

    or is this wierd behaviour is because I used Grid as functional component?


    const MyComponent:FC=() => {
    const {datasource} = useGridHooks();
    const {getColumns, onRowExpand} = useGridEvents();

    useEffect(()=>{

    },[])

     

    return (
    <Grid
    columns={getColumns}
    datasource={datasource}
    onRowExpand = {onRowExpand}
    />
    )
    }

    Is this supported approach?

    #104815
    Markov
    Keymaster

    Hi,

    If the Grid is re-rendered, the rows will be in their initial state. We will need a full example in order to check your use case.

    Regards,
    Markov

    Smart UI Team
    https://www.htmlelements.com/

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