i want to add some functionality in combo box. I want that it should behave like Google's Search Box. Like i have added items in combo box from a database Say Name of the Doctors.
i want that as user type name of the doctor or first letter of the name of the doctor, the selection bar goes automatically only to related names.
Any suggestion friends???
try AutoCompleteMode of combobox, something like this:
сomboBox.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
сomboBox.AutoCompleteSource = AutoCompleteSource.CustomSource;
comboBox.AutoCompleteCustomSource = MyStringData();
where myStringData is :
public AutoCompleteStringCollection MyStringData()
{
var collection= new AutoCompleteStringCollection();
//you can add names of the doctors retrieved from the database here
collection.Add("one");
collection.Add("two");
collection.Add("three");
collection.Add("four");
return collection;
}
this would suggest those items which begins with those you typed.
If you want to show selection (highlighting) as you type, you can be a little more creative and create a simple combination of a textbox and gridView, which gets bound everytime TextChanged happens on the textBox
Related
I have a js fiddle to show the issue that I am facing.
Tabulator 'email' column has freetext set to true to allow the user to set the value of the cell to a free text entry as follows:
editorParams:{
values:{
"steve#boberson.com":"steve",
"bob#jimmerson.com":"bob",
"jim#stevenson.com":"jim",
"harvy#david.com":"Harvy",
"ken#thompson.com":"Ken",
"denny#beckham.com":"Denny"
},
freetext:true,
searchFunc:function(term, values){
console.log("term and val "+term +" \n"+values);
var matchedEntries = {};
var matchFound = false;
for(var key in values) {
if(key.includes(term)){
matchFound = true;
matchedEntries[key] = values[key];
}
}
if(matchFound){
return matchedEntries;
}
else{
return {term: term};
}
}
}}
Select one of the values from the selector list displayed, say steve, value being 'steve#bobberson.com'.
Then after the value is selected, click on the same tabulator cell, the value displayed suddenly changes to the label.When user clicks enter key now, the label is selected instead of the value,.ie. steve will be displayed instead of steve#bobberson.com
If this is not a bug, how do I make sure that the value steve#bobberson.com remains selected after clicking enter. This is because freetext option is set to true in the editorParams of the column
Attached a gif showing the issue
That is not a bug,
With freetext enabled, users are able to enter any text they like in that field and it will be saved which is exactly what is happening in the example
If they select the email address again from the list then it is correctly saved.
It is an either/or scenario, you can either restrict the users to selecting specific values from the list OR you can allow them freetext in which case anything goes.
If you want a different behaviour then you can always build a custom editor that works in the way you want. Checkout the Custom Editor Documentation for more information
I am trying to set two behaviors, but it is very hard because I do not have any coding background. The idea is that the ticket creation screen would hide/show fields depending on what the user chooses.
So the first behavior should be from a dropdown menu with 3 options (SAP, Jira, Other) and the dropdown menu's name is Affected Software. If the user chooses SAP, a textfield to appear which is called Transaction number. If they choose other, another textfield should appear called Please enter software name and otherwise, these should be hidden and not show any other fields.
Here is the code I tried to write:
import com.onresolve.jira.groovy.user.FormField
FormField dropDown = getFieldByName("Affected Software")
FormField other = getFieldByName("Transaction Number")
FormField other = getFieldByName("Please enter software name")
if (dropdown.getFormValue() == 'SAP') {
other.setHidden(false)
other.setFormValue("SAP chosen")
} if else (dropdown.getFormValue() == "Other")
other.setHidden(false)
other.setFormValue("Other chosen")
else {
other.setHidden(true)
}
The second behavior is a bit simpler. There is again a dropdown field called Is there a workaround with these options(yes, no, I don't know). If the user chooses yes, a field should show up called Explain the workaround. Otherwise nothing should change.
This is the code I tried to write for that one
import com.onresolve.jira.groovy.user.FormField
FormField dropDown = getFieldByName("Is there a workaround?")
FormField other = getFieldByName("Explain the workaround")
if (dropdown.getFormValue() == 'yes') {
other.setHidden(false)
other.setFormValue("yes chosen")
} else {
other.setHidden(true)
}
Could you please let me know what I am doing wrong? Thank you in advance!
I think you are looking for getValue() rather then getFormValue() as this will give you the ID of the underlying value, like an option ID.
I have set up a producttable (kind of a shopping-cart) with one editable column (product amount) like this :
{
title:"Aantal",
field:"product_amount",
align:"center",
responsive: 3,
validator:["required","numeric"],
editor:amountEditor,
cellEdited:recalcPrices,
validator:["required","numeric","min:1","max:10"]
},
I am using a custom jquery amountEditor because this one looks somewhat nicer than the builtin editor. Rows are added to the shopping cart tabel (copied from another producttable) by a button click. Everything works fine but I would like that the user doesn't have to click on the editable columnfield himself. So the only one editable field should be triggered automatically / programmatically after the row is added to the table.
I think I have to combine these commands somehow in the table definition:
rowAdded:function(row){
var cell = row.getCell("product_amount");
cell.edit();
},
I tried everything but I cannot find the right combination to get this work. I can get var rowElement = row.getElement(), however var cells = row.getCells() or var cell = row.getCell(column) look empty. Any help is much appreciated.
You need to scroll to the row using the scrollTo function on the row component to ensure it is visible before you can trigger an edit on the cell, so your rowAdded callback wants to look like this:
rowAdded:function(row){
row.scrollTo().then(function(){
row.getCell("product_amount").edit();
});
},
Is there a way that I can prevent a user from changing the selected row? I was looking for something like a selectedRowChanging event that would either prevent or allow user from selecting a new row.
Kinda depends on how you have things set up...
I have a Grid to which I've added a CheckColumnConfig and RowEditor It's really a window into some DataBase tables. The user can modify any column 'except' the key columns. The user may also Add a new row. I defined 2 ColumConfigs. The EditColumnConfig has the various fileds disabled (i.e. if (column = keyColumn) {textField.disabled(); } the AddColumnConfig has all columns enabled.
Now if the user clicks the checkBox on a row and clicks an 'Add' button I reconfigure the grid with the addColumnModel : rowDataGrid.reconfigure(listStore, addStateColumnModel); When the user clicks the RowEditor 'Save' button I erconfigure the grid back : rowDataGrid.reconfigure(listStore, editStateColumnModel);
I 'spose you could define an uneditable ColumnConfig and swap it in and out. (or... catch the RowEditor 'BeforeEdit' event and disable to row).
That's an idea anyway... hope this helps.
grid.addListener(Events.BeforeEdit, new Listener<GridEvent<MyModel>>(){
#Override
public void handleEvent(GridEvent<MyModel> be) {
//This retrieves the model being edited.
MyModel model = be.getModel();
if (I do not want to edit this model){
be.setCancelled(true);
}
}
});
Each input field in the CKEditor dialogs are renamed with a unique number, but the number changes depending on what options are visible.
I need to reference 'txtUrl' which has an id something like #35_textInput.
So far I have discovered that something like this should work:
alert(CKEDITOR.instances.myElement.document.$.body.getId('txtUrl'));
But it doesn't. Please help.
#Rio, your solution was really close! This was the final solution:
var dialog = CKEDITOR.dialog.getCurrent();
dialog.setValueof('info','txtUrl',"http://google.com");
return false;
var dialog = this.getDialog();
var elem = dialog.getContentElement('info','txtUrl');
within an onchange part of an element I now use
dialog = this.getDialog();
alert(dialog.getContentElement('info', 'grootte').getInputElement().$.id);
and it gives 'cke_117_select' as a result. (It's a selectbox)
alert(dialog.getContentElement('info', 'txtUrl').getInputElement().$.id);
gives 'cke_107_textInput'.
I think this is what you (or other visitors to this page) are looking for.
SetValueOf still doesn't provide the id, which you may need if you want to do more than fill a text field with a certain text.