Forums Home / Wijmo / General Discussion
Posted by: 1071118072 on 22 October 2024, 10:39 am EST
1071118072
Posted 22 October 2024, 10:39 am EST - Updated 22 October 2024, 11:28 am EST
Multiselect editor need a array value, but I want to turn a string cell value (like ‘a, b, c’) to array(like [‘a’, ‘b’, ‘c’]) when open editor, and save the checked item value as string(like ‘a, b’) when close editor. So, how to create custom dropdown editor like multiselect in flexgrid ?
vivek.pannu
Posted 23 October 2024, 1:18 am EST
Hi,
You can use the multiselect as a custom editor for the column, it will automatically convert the comma-separated values in the array and display them as the selected values while editing. But when edit ends, it will save the new values in an array, you’ll have to handle the ‘cellEditEnded’ event to convert the array in comma-separated values again.
Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/js-m3smum?file=index.js
In case, you face any issues, please let us know.
Regards
1071118072
Posted 23 October 2024, 3:35 am EST - Updated 23 October 2024, 3:41 am EST
In your sample, I copy the last cell value and paste to the first cell, the first cell value becomes to an array.
1071118072
Posted 23 October 2024, 3:57 am EST
According to DropDownTree code, I create a custom Editor class DropDownList to sove this problem. But it do not work when I click the dropdown button, is there something wrong ?
import { addClass, createElement, Event, EventArgs} from '@grapecity/wijmo'
import { DropDown, ListBox } from '@grapecity/wijmo.input'
export class DropDownList extends DropDown {
private _lbx!: ListBox
readonly checkedItemsChanged = new Event()
get listBox() {
return this._lbx
}
get itemsSource() {
return this._lbx.itemsSource
}
set itemsSource(value: any[]) {
this._lbx.itemsSource = value
}
get value() {
return this._lbx.checkedItems.join(', ')
}
set value(v: string) {
this._lbx.checkedItems = v
.split(',')
.map(x => x.trim())
.filter(x => this.itemsSource.includes(x))
}
constructor(element: HTMLElement, options?: any) {
super(element)
addClass(this.hostElement, 'wj-dropdown-list')
this._tbx.readOnly = true
this._createDropDown()
this._updateHeader()
this.initialize(options)
}
onCheckedItemsChanged(e?: EventArgs) {
this.checkedItemsChanged.raise(this, e)
}
private _updateHeader() {
this.inputElement.value = this.value
}
protected _createDropDown() {
const el = createElement('<div></div>', this._dropDown)
this._lbx = new ListBox(el)
this._lbx.checkedItemsChanged.addHandler(() => {
this._updateHeader()
this.onCheckedItemsChanged()
})
this._lbx.loadedItems.addHandler(() => {
this._updateHeader()
})
super._createDropDown.call(this)
}
onIsDroppedDownChanged(e?: EventArgs) {
super.onIsDroppedDownChanged(e)
if (this.containsFocus() && this.isDroppedDown) {
this._lbx.focus()
}
}
dispose() {
this._lbx.dispose()
super.dispose()
}
}vivek.pannu
Posted 24 October 2024, 3:06 am EST
Hi,
As you are using an older version of Wijmo, to use MultiSelect as a custom editor, you’ll have to handle a few events of the FlexGrid to make it work properly. Please refer to the following sample for the same - https://stackblitz.com/edit/js-mlqqyr?file=index.js
In the above sample, we have created the ‘CustomGridEditor’ class to attach Multiselect as a custom editor on the ‘Country’ column.
We have also updated the last sample we shared with you to handle the copy-paste scenario, by handling the ‘collectionChanged’ event of the collectionView to convert array to string, instead of ‘cellEditEnded’ event.
Hopefully, it will solve all your issues. However, if you still need help with your current implementation, i.e. by using a custom class DropDownList by extending DropDown class, then please share a small sample with your current implementation in which the issue can be replicated, so that we can have a better understanding of your requirements and assist you accordingly.
Regards
1071118072
Posted 24 October 2024, 5:49 am EST
Thank you for patiently helping me.
My requirement is that the flexgrid has 100 columns, and the editor for each column can be switched between DropDownList and ComboBox. So, create a custom editor that extends DropDown is the best solution.
https://stackblitz.com/edit/js-zwtacb?file=CustomEditor.js,index.js
There is only one column in this case, and the editor can be switched. However, when the editor is set to DropDownList and click the dropdown button, the list component does not appear.
The DropDownList code is referenced from DropDownTree code in your website.
1071118072
Posted 24 October 2024, 8:45 pm EST
The DropDownTree code link is https://developer.mescius.com/blogs/creating-wijmo-dropdowntree-control
vivek.pannu
Posted 25 October 2024, 5:46 am EST
Hi,
Thank you for sharing the sample, after investigating the sample we found that there were some issues with the current implementation, the dropdown was not showing due to various conditions mismatch internally. After a thorough investigation, it is concluded that modifying the custom class code that you shared, to achieve the desired results, would be a more complex operation, as you need the features of the MultiSelect control, which is indirectly inherited from the DropDown class. So, we would need major customizations in a custom Class that extends DropDown class to make it work like a custom MultiSelect control, however, only a small customization is needed in MultiSelect control to make it work as per your requirements. So, we have modified the ‘CustomGridEditor’ class that we shared in our previous sample, to work as per your requirements.
Please refer to the following sample for the same - https://stackblitz.com/edit/js-yhbf1d?file=CustomEditor.js
You’ll be able to change the editor for the column anytime, as shown in the above sample.
Please note that, it is a complete custom implementation and may break in certain scenarios. For a smoother experience, we recommend upgrading your Wijmo version to the latest.
Regards
1071118072
Posted 25 October 2024, 6:44 am EST
Thank you a lot. By the way, is it possible that MultiSelect will support returning string value only by setting it’s property in next version ?
vivek.pannu
Posted 28 October 2024, 1:45 am EST
Hi,
We have created an enhancement request as per your suggestion. The internal tracking ID for the same is - WJM-35175. We will update you on its progress when we have some updates to share.
Regards
