Wijmo multi select in multi column style

Wijmo multi select in multi column style

Posted by: reeshabh.choudhary on 30 August 2019, 5:05 am EST

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 August 2019, 5:05 am EST

  In refrence to:
  
  https://www.grapecity.com/forums/wijmo/wijmo-multi-select-dropdow
  
  ,
  
  I tried the approach but failed to get result. I am attaching my .less file for reference.

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 30 August 2019, 5:06 am EST

  wijmo.less code attached below is my global style for wijmo components.

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 30 August 2019, 5:08 am EST

  body {
    wj-multi-select {
      height: 30px;
      width: 100%;
      border-radius: 2px !important;
    }
  
    .wj-control {
      .wj-input-group-btn {
        display: none !important;
      }
    }
  
    .wj-dropdown-panel{
      z-index: 150000000000 !important;
    }
  
    .wj-content {
      border-radius: 0;
      border: none;
      border: 1px solid rgba(0, 0, 0, .1);
  
      .wj-colheaders {
        > div {
          background-color: #f6f6f6;
        }
      }
  
      &.wj-flexsheet{
        .wj-cell {
          text-align: left !important;
          padding: 5px 10px !important;
          border-color: rgba(0, 0, 0, .1);
          color: #444;
          font-size: 13px;
          font-weight: 400;
        }
  
        .wj-readonly-cell{
          background: lightgrey !important;
          font-weight: 600;
        }
      }
  
      &.wj-flexgrid:not(.wj-flexsheet){
        .wj-cell.wj-alt {
          background: lightgrey !important;
        }
        .wj-cell {
          padding: 5px 10px 2px !important;
          text-align: left !important;
          border-color: rgba(0, 0, 0, .1);
          color: #444;
          font-size: 13px;
          font-weight: 400;
  
          &.wj-frozen-col:not(.wj-header){
            background: @white !important;
          }
        
          .form-group,
          .form-control {
            margin-bottom: 0;
          }
  
          span {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            overflow: hidden;
  
            .icon {
              + .icon {
                margin-left: 10px;
              }
            }
  
            &.wj-glyph-filter {
              overflow: visible;
              width: auto;
            }
  
            &.wj-glyph-down,
            &.wj-glyph-up {
              width: auto;
            }
          }
        }
      }
    }
    div[wj-part=ch] {
      box-shadow: 0 0 10px rgba(0,0,0,.2);
    }
    .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
      background-color: transparent;
    }
  
    .wj-input-group {
      border-radius: 0;
      .wj-input-group-btn {
        border-radius: 0;
        >.wj-btn {
          border-radius: 0;
          &:hover {
            border-radius: 0;
          }
        }
      }
    }
  }
  
  
  .checklist-grid {
    .wj-cell {
      span {
        line-height: 30px;
      }
  
      .wj-multiselect {
        margin-top: 0px;
  
        div:empty {
          height: 0;
        }
      }
    }
  }
  
  .wj-flexchart {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .wj-flexchart .wj-gridline{
    stroke: #d2d2d2 !important;
  }
  
  

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 30 August 2019, 5:08 am EST

  My wijmo multi select html code:

    <wj-multi-select #multiRef [itemsSource]="items" [dropDownCssClass]="'multi-column'"
    (initialized)="initMS(multiRef)"
      [displayMemberPath]="'name'" [selectedValuePath]="'value'" [isEditable]="false" [isRequired]="false"
      [(checkedItems)]="selectedItemsInput" (checkedItemsChanged)="onCheckedItemsChanged($event)">
    </wj-multi-select>
  

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 30 August 2019, 5:09 am EST

  Wijmo multi select component.ts code:

  import { Component, OnInit, Input, ViewChild, Output, EventEmitter } from '@angular/core';
  import * as wjcCore from 'wijmo/wijmo';
  import * as wjcInput from 'wijmo/wijmo.input';
  
  @Component({
    selector: 'app-wijmo-multi-select',
    templateUrl: './wijmo-multi-select.component.html',
    styleUrls: ['./wijmo-multi-select.component.css']
  })
  export class WijmoMultiSelectComponent implements OnInit {
  
    @Input() items: any;
    @Input() selectedItemsInput: any;
    @Input() placeholder: any;
    @Output() multiSelectChanged = new EventEmitter<any>();
    @ViewChild('multiRef') multiRef: any;
    selectedItem = [];
    constructor() {
  
    }
  
    ngOnInit() {
      console.log('items', this.items);
      this.multiRef.placeholder = this.placeholder;
    }
  
    initMS(mls: wjcInput.MultiSelect) {
      const dd = mls.dropDown;
      dd.style.width = mls.hostElement.offsetWidth + 'px';
    }
  
    onCheckedItemsChanged(e: any) {
      this.multiSelectChanged.emit(this.selectedItemsInput);
    }
  
  }
  
  

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 2 September 2019, 12:52 am EST

  Hi Reeshabh,

  From looking at your code, it seems like you have not added the ‘multi-column’ class in you less file. Please make sure that you have added the following code in your main stylesheet:

  .multi-column.wj-listbox,
  .multi-column .wj-listbox {
    display: flex;
    flex-wrap: wrap;
  }
  
  .multi-column .wj-listbox-item {
    min-width: 200px;
  }
  

  I also added the code provided in my project but the sample was working as expected. Please refer to the sample attached.

  Regards,
  
  Ashwin

  MultiSelectMultiColumn.zip

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 3 September 2019, 5:25 am EST

  In the sample code attached, I did npm install and run the code. It is still not showing in drowdown format. Attaching the snapshot as well.

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 3 September 2019, 5:25 am EST - Updated 3 October 2022, 7:28 pm EST

  

  1915×814 55 KB

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 4 September 2019, 1:32 am EST

  Hi,

  From what I understand, it seems that your issue is that the drop-down button is not visible. To show the drop-down button in the MultiSelect, you will need to remove the part shown below from your .less code:

  .wj-control {
  	.wj-input-group-btn {
  		display: none !important;
  	}
  }
  

  Let me know if this was your issue or otherwise.

  Regards,
  
  Ashwin