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

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

Posted by: thomas-reiger on 14 September 2017, 3:06 am EST

• 

  thomas-reiger

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 3:06 am 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.

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 3:06 am EST

  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

• 

  narasimha.peta

  • Post Options:
  • Link
    Copy

  Posted 19 August 2019, 3:05 am EST

  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>
  

• 

  ken_perregaux

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 6:20 am EST

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

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 25 March 2020, 9:27 pm EST

  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