Forums Home / Wijmo / General Discussion
Posted by: gupta.prakul on 15 December 2017, 12:10 am EST
gupta.prakul
Posted 15 December 2017, 12:10 am EST
Hi Team,
I’m looking forward to use datamap in a way that abbreviated value of selected drop down value is displayed in cell.
Example Countries = [‘US’, ‘Germany’, ‘UK’, ‘Japan’, ‘Italy’, ‘Greece’];
If I select Germany, the cell displays “G”.
I have attached a basic wijmo application which has a sheet. I want to implement above stated feature in Country column in this example.
Let me know how to achieve this. Wijmo_AbreviatedColumn.zip
manish.gupta
Posted 17 December 2017, 11:40 pm EST
Hi Prakul,
We are investigating on this. We will update you soon.
~Manish
manish.gupta
Posted 18 December 2017, 3:38 pm EST
Hi Prakul,
Currently, using dataMap, abbreviated values can not be shown. This enhancement has been forwarded to the concerned team with tracking id 301479.
The abbreviated values can be shown using ComboBox in place of DataMap and set headerPath property to abbreviated value key.
Please refer to the attached sample that implements how ComboBox/AutoComplete can be used inplace of dataMap.
~Manish
gupta.prakul
Posted 20 December 2017, 1:05 am EST
Hi Manish,
Thanks for your input.
I looked into the solution provided by you, which is using ComboBox.
The cell doesn’t show abbreviated value. Say you selected “Japan”, it shows only “Japan” and not “J”.
I tried updating the method where you are setting the cell data with input.selectedValue.charAt(0). In doing so, the cell gets empty. I have attached a screenshot for reference.
The method I updated-
input.lostFocus.addHandler((s,e)=>{
if(selection.row!=0){
sheet.setCellData(selection.row,selection.col,input.selectedValue.charAt(0));
}
});
It would be great if you can provide a solution which shows abbreviated value in cell after selection.
manish.gupta
Posted 20 December 2017, 9:00 pm EST
Hi Prakul,
You would need to add a property with abbreviated value and map this property to headerPath.
data=[
{id:1,country:"Japan",value:"J"}
];
var combobox=new wijmo.input.ComboBox("#combo",{
itemsSource:data,
displayMemberPath:"country",
selectedValuePath:"id",
headerPath:"value"
}
~Manish
gupta.prakul
Posted 26 December 2017, 6:35 pm EST
Hi Manish,
Thanks for the quick response. Your approach worked.
I need to achieve following use case- On change of combobox value, I need to disable the comboxbox until server response is received.
But as I need to use formatItem.addHandler to dynamically add combobox. And using this approach, grid cells are created every time if any event is fired and so combobox is also created very time. So it is getting complex to achieve the above stated use case.
Isn’t there any other way to dynamically add combobox in columns ? Like DataMap is added to flex.datamap property directly ?
Also on making row isReadyOnly, the combobox in that row doesn’t get into isReadonly state.
Let me know what’s the best way to achieve this use case.
Used following code to create combobox.
grid.formatItem.addHandler((s, e:wjGrid.FormatItemEventArgs)=> {
var editRange = grid.editRange,
column = e.panel.columns[e.col];
// check whether this is an editing cell of the wanted column
if (!(e.panel.cellType === wjGrid.CellType.Cell &&
column === editColumn && e.row!==0)) {
return;
}
// hide standard editor (don't remove!)
if (e.cell.firstChild) {
// e.cell.firstChild.style.display = 'none';
}
e.cell.innerHTML = "";
// add custom editor
var editorRoot = document.createElement('div');
var input;
if (column.dataType === wjCore.DataType.String) {
input = new wjInput.ComboBox(editorRoot);
input.itemsSource = this.countries;
input.displayMemberPath = "country";
input.selectedValuePath = "id";
input.headerPath = "value";
input.isRequired = false;
input.selectedValue = sheet.getCellData(e.row, e.col, false);
// console.log(e.row,e.col,sheet.getCellData(e.row, e.col, false),input.selectedValue)
e.cell.appendChild(editorRoot);
input.focus();
var selection;
input.gotFocus.addHandler((s,e)=>{
selection=sheet.selection;
});
input.lostFocus.addHandler((s,e)=>{
if(selection.row!=0){
sheet.setCellData(selection.row,selection.col,input.selectedValue);
}
});
}
});
manish.gupta
Posted 28 December 2017, 7:10 pm EST
Hi Prakul,
We are sorry for the delayed response.
We need to call beginUpdate method on selectedIndex changed and endUpdate once response is get from server within ComboBox selectedIndexChanged event. Please refer to the following code snippet for the same:
input.selectedIndexChanged.addHandler((s,e)=>{
sheet.beginUpdate();
input.isDisabled=true;
//service delay
setTimeout(()=>{
input.isDisabled=false;
console.log("Response from server");
sheet.endUpdate();
},5000);
});
Regarding isReadonly, the custom editor placed at cell level will not set to read only. For this, we need to check if row or column is set to read only in which ComboBox is placed.
Please refer to the following code snippet for the same within formatItem event:
if(sheet.rows[e.row].isReadOnly || sheet.columns[e.col].isReadOnly){
input.isReadOnly=true;
}
Also find the attached sample for the same where column with ComboBox is set to readonly.
~Manish
