Adding New Row in Wijmo Grid with dynamic collection for a column& preselection

Posted by: technical.store.technical on 27 May 2021, 12:06 am EST

  • Posted 27 May 2021, 12:06 am EST

    Hi,

    Can you please provide us a small demo in which we want to bind new dropdown collection to a newly added row with its preselection.

    For example -
    We have added a new blank row in below snippet. But on selection of one of the element from section column we need to show different dropdown collection for subject column for that particular new row.
    Example - Subject dropdown collection can be [1,2,3] instead of ['english', 'maths', 'Computers', 'physics', 'chemistry'] and in this we also need to show 'All' as preselected.

    https://stackblitz.com/edit/angular-wvvf7h?file=src/app/app.component.html

    Please provide solution.

    Thank You.
  • Replied 27 May 2021, 12:10 am EST

    Hi,

    Also in above snippet , we are unable to add new row at the top.
    For that we have used [newRowAtTop] = true.

    https://stackblitz.com/edit/angular-wvvf7h?file=src/app/app.component.html

    Thank You.
  • Replied 27 May 2021, 3:03 pm EST

    Hi,

    Please help us with the solution.

    Thank You.
  • Replied 28 May 2021, 8:42 pm EST

    Hi,

    Please help us with the solution.

    Thank You.
  • Replied 30 May 2021, 3:04 pm EST

    Hi,

    We apologize for the delay, we are currently investigation this and will provide you an update soon.

    Regards
  • Replied 30 May 2021, 8:29 pm EST

    Hi,

    Can you also let us know how to add click event on cell or column.

    Thank You.
  • Replied 31 May 2021, 2:10 pm EST

    Hi,

    Sorry for the delay, please refer to the following sample that demonstrates how we could add the newly added row at top, and show a different list of subjects for new items and existing items.
    https://stackblitz.com/edit/angular-jcmet5?file=src%2Fapp%2Fapp.component.ts

    To handle click events, we may add mousedown listener on the grid's hostElement and use hitTest() method to determine which row/column was clicked. You may refer to the above shared sample or the following code snippet:
    grid.hostElement.addEventListener('mousedown', e => {
    let ht = grid.hitTest(e);

    let htInfo = '';
    htInfo += `area: ${wjGrid.CellType[ht.panel.cellType]}`;
    htInfo += `\nrowIndex: ${ht.row}`;
    htInfo += `\ncolIndex: ${ht.col}`;

    if (this.showClickAlert) {
    alert(htInfo);
    }
    });


    Regards
  • Replied 31 May 2021, 6:29 pm EST

    Hi Admin,

    Thanks for solution.
    But In above snippet we just changed the type of section column. We have added the [cellType]="'Cell'" and [(selectedItem)]="cell.item.section".

    After this we can see on adding new row, the section cell of new row is not getting cleared even though we are clearing it from ts file.
    For Example -

    addNewUser() {
    const newItem = {
    name: '',
    section: '',
    subjects: this.additionalSubjects,
    isNew: true
    };
    }
    Snippet of above code -
    https://stackblitz.com/edit/angular-lrhbq4?file=src/app/app.component.ts
    Can you please help in this.

    Thank You.
  • Replied 2 June 2021, 5:00 am EST

    Thank you for the sample.
    To allow empty values in combobox, we need to set the isRequired property of ComboBox to false. You may refer to the following updated sample:
    https://stackblitz.com/edit/angular-8rw4de?file=src%2Fapp%2Fapp.component.html
  • Marked as Answer

    Replied 2 June 2021, 3:09 pm EST

    Hi Sharad,

    Thank you for responding.
    This works.

    Thank You.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels