Dynamic Collection Value for Wijmo Grid cell

Posted by: technical.store.technical on 18 May 2021, 11:08 pm EST

  • Posted 18 May 2021, 11:08 pm EST

    How can we bind different set of data to different cells of same column ?

    I have table with 2 columns Id, role
    Role Column has a dropdown.
    On Initial load of table ,I have to set different collection array for Role column for different rows.

    Eg.

    Row with Id 1 may have role dropdown with [1, 2]
    Row with Id 2 may have role dropdown with ['a', 'b']
    Row with Id 3 may have role dropdown with ['x', 'y', 'z']

    How can we implement this ? ( I need my [itemsource] to be dynamic as i need to add filters)

    Html Code -
    <wj-flex-grid-column [header]="'role'" [binding]="'roleArray'">
    <ng-template wjFlexGridCellTemplate cellType="Cell" let-cell="cell">

    <wj-multi-select [placeholder]="'Select Role"
    [showSelectAllCheckbox]="showSelectAllCheckbox"
    [itemsSource]="'RoleArray'">
    </wj-multi-select>
    </ng-template>
    </wj-flex-grid-column>
  • Replied 20 May 2021, 10:37 pm EST

    Hi,

    Please help me with the solution.

    Thank You.
  • Replied 21 May 2021, 12:03 am EST

    Hi,

    I'm preparing a sample for you to demonstrate how we could use multiselect in Flexgrid. Will provide you an update soon.

    Regards
  • Replied 21 May 2021, 3:23 am EST

    Please refer to the following sample:
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-ycxrb8?file=src%2Fapp%2Fapp.component.ts

    To achieve the required functionality you may set checkedItems property of multiselect to correponding cell value and use ngModel to bind multiselect with respective cell. The above shared demonstrates the same, Please refer to the same let us know if you face any issues.
  • Replied 24 May 2021, 9:43 pm EST

    Hi,

    Thanks for the response. It works but we are facing one 'Selection issue' when we use the above solution.

    We trying to implement the above logic but after selection of multiple values from dropdown it show 'selected 3' or 'selected 4' on dropdown UI.
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-zuuttq?file=src/app/app.component.html


    We want comma separated values or 'ALL' for which we got solution from this link.
    https://stackblitz.com/edit/angular-y5qja5?file=src/app/app.component.html


    Please provide solution.

    Thanks.
  • Replied 25 May 2021, 12:45 am EST

    Hi,

    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-aunmcn?file=src/app/app.component.ts

    In above solution, if we change the length of collection data for dropdown then preselection doesn't works.

    Example -
    In first condition we are sending ['US', 'Germany', 'UK', 'Greece', 'Italy'] and preselection for the first row was 'US'. Although that value is still present in collection but it is not getting preselected.

    getMultData(id) {
    if (id % 2 == 0) {
    return ['US', 'Germany', 'UK', 'Greece', 'Italy'];
    } else {
    return this.multiSelectData[1];
    }
    }


    Please provide solution.

    Thanks.
  • Replied 25 May 2021, 6:06 pm EST

    Hi,

    Can you please help us with solution.

    Thank you.
  • Replied 26 May 2021, 1:12 am EST

    Hi,

    To get comma-separated values on multiSelect input box you may use headerFormat property of multi select. You may refer to the following code snippet:
    [headerFormat]="multSelect.checkedItems.length !==getMultData(cell.item.id).length? multSelect.checkedItems.toString():'All'"


    Regarding the preselect issue, it is observed because getMultData(id) is returning a new instance of array on each call which in turns assign a new source to the multiselect and hence the selected gets reset. To fix the issue, you may save the array on the state/instance and return the same instance on each call.
    You may also refer to the following sample:
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-b6hqhb?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 26 May 2021, 3:25 pm EST

    Hi,

    For the second point preselection, as you are saying to return instance of array for a cell, we can't return the same instance of array for cell as we have to filter that array so the length might get changed for a collection.
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-aunmcn?file=src/app/app.component.ts

    getMultData(id) {
    if (id % 2 == 0) {
    return ['US', 'Germany', 'UK', 'Greece', 'Italy'];
    } else {
    return this.multiSelectData[1];
    }
    }


    Please provide solution for a filtered collection like in above snippet , we are returning some elements of collection array instead of whole.

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

    Hi,

    Please help us with the solution.

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

    Hi,

    In this case, To achieve the required functionality, Instead of returning a new array each time, You may change in the respective state. As in the code sample to demonstrate the same, I have changed the multiSelectData[0] inside the ngAfterContentInit lifecycle hook.
    For better understanding, you may refer to the below code sample -
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-m9wtla?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 27 May 2021, 9:01 pm EST

    Hi,

    This solution will work for small data and for 1 or 2 column. But, in our application we have thousand's of records with multiple columns and every cell is going to get filtered with different set of collections. So this solution will not work for us.
    Is there any other solution for multiple columns and huge amount of data.
    Please reply.

    Thank you.
  • Replied 28 May 2021, 8:43 pm EST

    Hi

    Help us with the solution.

    thank you.
  • Replied 31 May 2021, 2:47 pm EST

    Hi,

    In this case, I would suggest you to use formatItem event to add multiselect instead of the cell templates, I've prepared a sample to demonstrate the same, you may refer to the following sample:
    https://stackblitz.com/edit/wijmo-flexgrid-multiselect-cell-template-xmzha4?file=src%2Fapp%2Fapp.component.ts

    Regards
    Sharad
  • Replied 1 June 2021, 6:19 pm EST

    Hi Sharad,

    Thank you for responding.
    We have following doubts in this snippet :
    1) initially in HTML we use to show ALL preselection condition as per the collection length.

    <wj-flex-grid-column [header]="'Subjects'" [binding]="'subjects'" [isReadOnly]="true">
    <!-- <ng-template wjFlexGridCellTemplate cellType="Cell" let-item="item">
    <div *ngIf="item.subjects.length === subjects.length">ALL</div>
    <div *ngIf="item.subjects.length < subjects.length">{{item.subjects.join(', ')}}</div>
    </ng-template>
    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <wj-multi-select #multSelect [(checkedItems)]="cell.item.subjects"
    [itemsSource]="cell.item.isNew? additionalSubjects : totalSubjects"
    [showSelectAllCheckbox]="showSelectAllCheckbox"
    [headerFormat]="multSelect.checkedItems.length !== multSelect.itemsSource?.length? multSelect.checkedItems.toString():'ALL'">
    </wj-multi-select>
    </ng-template> -->
    <ng-template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'">
    <wj-multi-select [checkedItems]="additionalSubjects" [itemsSource]="additionalSubjects" [headerFormat]="'All'">
    </wj-multi-select>
    </ng-template>
    </wj-flex-grid-column>


    How we can add this conditions in ts file ?

    2) On selection of a section column value, we need to change the subject for that particular row.
    getSubjects(cell) {
    if (cell.section == 'A')
    return ['maths', 'english', 'Computers', 'chemistry', 'korean'];
    else if (cell.section == 'B') return this.totalSubjects;
    else if (cell.section == 'C')
    return ['english', 'physics', 'chemistry', 'maths'];
    else return ['maths', 'Computers', 'chemistry', 'drama', 'korean'];
    }


    On Initial load subjects collection value is getting updated but on section cell value change , subject collection is not getting updated.
    How can we implement this ?

    Snippet Link -
    https://stackblitz.com/edit/angular-ecgjl1?file=src/app/app.component.ts

    Thank You.
  • Replied 2 June 2021, 3:15 pm EST

    Hi Sharad,

    Can you please provide solution.

    Thank you.
  • Replied 2 June 2021, 11:03 pm EST

    Hi,

    In order to show headerFormat based on preselection condition, You may write the condition inside checkedItemsChanged event as follows-
    checkedItemsChanged: s => {
    s.headerFormat =
    s.checkedItems.length !== s.collectionView.sourceCollection.length
    ? s.checkedItems.toString()
    : 'ALL';
    item.subjects = s.checkedItems;
    }

    And In order to change subject collection on section cell value change, You may handle the selectedIndexChanged event on combobox and refresh the grid inside its handler.
    For better understanding you may refer to the below code sample -
    https://stackblitz.com/edit/angular-q4fqxw?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 3 June 2021, 9:13 pm EST

    Hi Sharad,

    Thank you for providing the solution.
    It works but a got a small issue while implementing the above solution.
    In the below image, I added that piece of code because i want on change of subjects cell value, my subsubjects collection should get changed.
    By doing selectedIndexChanged - It is changing the sub-subjects collection values but my dropdown of subjects is getting stuck.(it remains in open state).

    Code Sample -
    https://stackblitz.com/edit/angular-e3228b?file=src/app/app.component.ts

    Can you please help us with the solution.

    Thank You.
  • Replied 6 June 2021, 2:26 pm EST

    Hi,

    Can you please provide solution.

    Thank you.
  • Replied 6 June 2021, 7:10 pm EST

    Hi,

    Refreshing the collection would refresh the whole grid, which disposes the current cells and recreates new once, due to which the old drop-down is not removed. To fix the issue, you may refresh only the required range using the refreshRange() method. PLease refer to the following code snippet and the sample demonstrating the same:
    selectedIndexChanged: s => {
    // refresh next cell range to update subjects
    const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
    .index;
    const rng = new wjcGrid.CellRange(rowIndex, subSubjectsColIndex);
    grid.refreshRange(rng);
    // grid.collectionView.refresh();
    }

    https://stackblitz.com/edit/angular-2m5lrk?file=src%2Fapp%2Fapp.component.ts

    Regards
  • Replied 6 June 2021, 10:01 pm EST

    Hi Sharad,

    Thank you so much for replying.
    While implemented the above the change i'm getting an issue for while refreshing the range. It is not gettting detected.

    Snippet -
    https://stackblitz.com/edit/angular-h3pqhv?file=src/app/app.component.ts


    checkedItemsChanged: s => {
    s.headerFormat =
    s.checkedItems.length !== s.collectionView.sourceCollection.length
    ? s.checkedItems.toString()
    : 'ALL';
    item.section = s.checkedItems;
    const subjectColIndex = grid.columns.getColumn('subjects').index;
    const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
    .index;
    const rng = new wjcGrid.CellRange(
    rowIndex,
    subjectColIndex,
    rowIndex,
    subSubjectsColIndex
    );
    grid.refreshRange(rng);
    }


    On change of section i want to change the subjects and sub-subjects collection value. but using above code it's changing the subject cell value on UI but its object which we get on checkedItemsChanged is not getting updated.

    Example:
    For 1st Row - on selection of two values in section (A,B) , it shows all selected in subjects column but if i print the object it shows the previous value instead of ALL because of which our sub-subjects collection value remains as it is.
    I've attached the images for UI and the object.


    One more thing , in the snippet bottom border of the dropdown is not properly visible.

    Can you please provide solution for both the issues.

    Thank You.
  • Replied 7 June 2021, 9:20 pm EST

    Hi,

    Can you please look into the issue and provide a solution for the same.

    Thank you.
  • Marked as Answer

    Replied 7 June 2021, 10:52 pm EST

    The observed behaviour is expected because you refreshCells do not update the data it just redraws the cells according to the updated content, if you want to update the underlying value too then you need to set the value on the items too like:
    checkedItemsChanged: s => {
    s.headerFormat =
    s.checkedItems.length !== s.collectionView.sourceCollection.length
    ? s.checkedItems.toString()
    : 'ALL';
    item.section = s.checkedItems;
    const subjectColIndex = grid.columns.getColumn('subjects').index;
    const subSubjectsColIndex = grid.columns.getColumn('Subsubjects')
    .index;
    const rng = new wjcGrid.CellRange(
    rowIndex,
    subjectColIndex,
    rowIndex,
    subSubjectsColIndex
    );
    console.log(' Item on change : ', item);
    // also assign the desired subjects here
    item.subjects = this.getSubjects(item);
    grid.refreshRange(rng);
    }

    You may also refer to the following updated sample: https://stackblitz.com/edit/angular-gh3vup?file=src%2Fapp%2Fapp.component.ts

    Regarding the style issue, you may add cssClass on the cells and apply CSS accordingly. Above shared sample also demonstrates the same.
  • Replied 8 June 2021, 4:51 pm EST

    Hi Sharad,

    Thank you for replying
    It 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