How can i add wj-multi-select into wj-flex-grid-column?

Originally Posted 18 June 2017, 11:45 pm EST

  • Originally Posted 18 June 2017, 11:45 pm EST

    Hello Everyone :)

    I'm trying to make a Table which includes this properties:

    Name | Description | Units (Array of Units)

    Name and Description is no Problem, but I have to make a Cell with a dropdown where the User can select multiple entries.
    I'm using Angular with Typescript.
    Now my Code looks like this but this does not work...
    Can someone please help me with this.


    <wj-flex-grid [(itemsSource)]="data" [allowSorting]="false" [allowAddNew]="true" [allowDelete]="true" [isDisabled]="disableTable"
    #adminTable>
    <wj-flex-grid-column [header]="name" [binding]="'name'" width="*"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="description" [binding]="'description'" width="*"></wj-flex-grid-column>

    <wj-flex-grid-column [header]="'Units'" [binding]="'allowedUnits'">
    <ng-template wjFlexGridCellTemplate cellType="Cell" let-cell="dropdownData">
    <wj-multi-select [placeholder]="'choose'" [(itemsSource)]="dropdownData" [displayMemberPath]="'name'" [checkedMemberPath]="selected"
    [checkedItems]="checked">
    </wj-multi-select>
    </ng-template>
    </wj-flex-grid-column>

    </wj-flex-grid>




    Another thing I have to think about is how to get the correct Data.
    My dropdownData is another Table with Units which should be shown in the Dropdown.
    The User can select multiple and the selected should be saved in an Object Array.

    Every Help would be nice. :)

    Thank you.
  • Marked as Answer

    Reply

    Hi Thomas,
    You need to bind MultiSelect control's itemSource property to array for showing Units in the MultiSelect. For this, please use the following code snippet for the same.
    <wj-flex-grid [itemsSource]="data" [allowSorting]="false" [allowAddNew]="true" [allowDelete]="true" [isDisabled]="disableTable"
    #adminTable>
    <wj-flex-grid-column [header]="name" [binding]="'name'" width="*"></wj-flex-grid-column>
    <wj-flex-grid-column [header]="description" [binding]="'description'" width="*"></wj-flex-grid-column>

    <wj-flex-grid-column [header]="'Units'" [binding]="'allowedUnits'">
    <ng-template wjFlexGridCellTemplate cellType="Cell" let-cell="cell">
    <!-- make sure allowedUnits property contains array -->
    <wj-multi-select [placeholder]="'choose'" [itemsSource]="cell.item.allowedUnits" [displayMemberPath]="'name'" [checkedMemberPath]="selected"
    [checkedItems]="checked">
    </wj-multi-select>
    </ng-template>
    </wj-flex-grid-column>
    </wj-flex-grid>




    Hope it helps!

    If the issue persists, please share a demo sample depicting your issue.

    Thanks,
    Manish Kumar Gupta
  • Reply

    Hi Manish,

    I am trying to add the multiselect combobox in the wijmo grid. But if i checked the checkbox in one entry in the grid, it is getting duplicated in the other entry also. Can you please help on this. Thank you so much.

    <ng-template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell" let-item="item">
    <wj-multi-select #msUpdatePin
    class="multiselect"
    [itemsSource]="relatedPinSysTypeList"
    [headerFormat]="'{count} item selected'"
    [displayMemberPath]="'descr'"
    [selectedValuePath]="'id'"

    (checkedItemsChanged)="onCheckedMultiSelectItem(msUpdatePin, item)">
    </wj-multi-select>
  • Reply

    We create our columns dynamically in type script, can this be done like that as well?
  • Reply

    Hi Ken,

    If you want to bind MultiSelect as the grid's editor, then you will need to bind this to a column whose data is in array form. And if a column contains array values, then it is not automatically bound to the FlexGrid.
    You will need to manually create the create the column and push it to the columns collection of the grid.
    After this, you can use the CustomGridEditor class, provided in the sample link below, to bind MultiSelect as the editor. You can also use bind input controls using this class.

    https://stackblitz.com/edit/angular-ec7jnf

    Regards,
    Ashwin
Need extra support?

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

Learn More

Forum Channels