I need to implement Autocomplete feature in ag grid cell on the table. Is ag provides any options for that. I am just seeing select with options. But my need is to edit the cell and while start typing the values has to display below based the character.
Like you I could not find this feature. I decided to write an Angular component for this purpose and share it.
It has the ability to filter by starting to type, as well as clicking the selection by mouse. Keyboard arrow up and down navigation is also included.
It's a simple component and should be quite straightforward to edit to your likings, or take the code and implement in JS or a different framework if you are not using Angular. I am having some unfortunate cosmetic issues (primarily on the last column of the grid), which I hopefully can solve soon and then will update the repository.
https://github.com/superman-lopez/ag-grid-auto-complete
Edit:
Since my original post, a new project has started and this is not limited to Angular projects:
https://github.com/avallete/ag-grid-autocomplete-editor
You can use a jQuery autocomplete as part of the cell editor. You have to do it in the afterGuiAttached function of the custom editor so it won't run until after your input has been created.
// function to act as a class
function YourCustomEditor () {}
// gets called once before the renderer is used
YourCustomEditor.prototype.init = function(params) {
this.eInput = document.createElement('input');
this.eInput.setAttribute('class', 'inputClass');
this.eInput.setAttribute('type', 'text');
}
};
YourCustomEditor.prototype.afterGuiAttached = function() {
$('.inputClass').autocomplete({
source: function(request, response) {
// Do your autocomplete filtering here
},
datatype: 'json',
select: function(event, ui) {
// Do Stuff on select
}
});
this.eInput.focus();
};
Related
i use jodit in my website and wonder, how the content of an existing jodit editor can be updated within a function.
first i do....
$( document ).ready(function() {
var editor_adressblock = new Jodit('#adressblock', {
fullsize: false
});
});
and the editor is correctly created.
I have a function, which can be executed by the user and then should load content (via json-request) and then put the content into the existing jodit textarea.
Here is my try (for this example i have simplified the function) :
function takeover_adressblock(kunde_id, kunden_adresse_id) {
// get data by ajax.... not shown in this example
var data_by_ajax="test";
editor_adressblock.value=data_by_ajax; // this fails....
}
Means, i don't know how i can send data to the existing jodit texteditor...
I am a jquery beginner, so please don't be too hard ;-)
Best regards
Daniel
Per the documentation you seem to have the right format, so it would help to see the code for the ajax request you're making in case the issue is there.
Otherwise, I would suggest initializing the editor without jQuery in case it's a reference or scoping issue:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
I've been searching non-stop for this on the documentation but haven't been able to find any sort of information. I would like to know how to add checkboxes in my custom view container, similar to the breakpoints' checkboxes.
You can simulate the checkbox by playing with the icon, create a new TreeItem with a different icon when clicked.
Somehow they have knowledge on where on the TreeItem you click.
Looking with the dev tools, it is an <input type="checkbox"/>.
This means that you can do more with TreeItems than the docs explain.
Looking at the source code the BreakpointView is not implemented with a TreeItemProvider, it extends the ViewPane class and uses some kind of templates to render an item. Beside a checkbox it is also possible to have a combobox (SelectBox class).
I have added a feature request (101175) to extend the vscode API so extension developers can write Views with ViewItems that have additional UI-Elements like the Breakpoint view.
You can do this in the proposed api: treeItemCheckbox in Insiders v1.72 now and since it is a fairly simple new api I suspect it will be released with Stable 1.72.
You can play with this now, see using the proposed apis.
Instead of extending TreeItem you will extend TreeItem2 (which extends TreeItem) if you want to use checkboxes. Here is some sample code I put together:
export class TreeTab extends vscode.TreeItem2 {
...
if (tab.isActive) {
this.iconPath = new vscode.ThemeIcon("arrow-small-right", new vscode.ThemeColor("tab.unfocusedActiveBackground"));
this.checkboxState = vscode.TreeItemCheckboxState.Checked;
// this.checkboxState = {state: vscode.TreeItemCheckboxState.Checked, tooltip: "my nifty checkbox tooltip"};
}
...
and elsewhere in your code if you want to detect when that checkbox is clicked/unclicked:
// use your TreeView variable instead of 'tabView'
// from this.tabView = vscode.window.createTreeView(...);
const checkBoxListener = this.tabView.onDidChangeCheckboxState(async event => {
// event = {item: Array(n)}, which TreeItem's checkbox was clicked and its state after clicking:0/1 = on/off
console.log(event);
});
I made a combobox using sap.m library:
var oSelection = new sap.m.ComboBox({
name: <name>,
id: <id>,
items: {
<items here>
})
},
});
Now, how do I make this field kind of read only, so when I tap it on mobile, it wouldn't bring up the mobile's keyboard, but it would bring up the selection options?
I've tried to use editable: false, but it disables the selection together with keyboard.
Thank you.
From what I could find out there's no method that allows such behaviour.
One option, that I personally would not advice, is to access the HTML DOM and disable the input field that composes the sap.m.Combobox component.
Keep in mind that if the development SAPUI5 changes the inner workings of the Combobox component your code could be broken if you update the SAPUI5 libraries.
This being said, to use this option you could do something like:
oSelection.onAfterRendering = function() {
if (sap.m.ComboBox.prototype.onAfterRendering) {
sap.m.ComboBox.prototype.onAfterRendering.apply(this);
}
document.getElementById("<id>-inner").disabled=true;
}
replace the < id>-inner by the correct id given to your component.
This was tested using version 1.22.8 of SAPUI5 development toolkit.
Use sap.m.Select instead of sap.m.ComboBox.
Select does not provide the ability to edit the field content.
In many instances the Select control can directly replace a ComboBox without any other changes to the properties or the items aggregation!
I want to develop an application which is getting form data via JSON from an external database. I need to create the form fields and its properties according this dynamic data.
It seemed to me that I need to use the classical way in Titanium instead of alloy because I think I can not add any rows dynamically on the xml (view) side in Alloy. Am I correct or is it also possible to do it in Alloy? If yes can you please tell me how
This can be done. Using this widget https://github.com/albinotonnina/it.numidia.gridWidget I was able to figure out how to create dynamic content in Alloy. Similar to the method used in this widget, I have a controller for each item I want to support. I created a textfield, textarea, label among others. It allows me to still use the Alloy styling and dynamically add the elements to my views.
Here is an example of my textfield controller:
XML
<Alloy>
<TextField id="textfield"/>
</Alloy>
js
function applyProperties(_props){
var apply = {};
_.extend(apply, _.pick(_props, 'left', 'value', 'textAlign', 'font', 'color', 'shadowOff'));
// alert(apply);
$.textfield.applyProperties(apply);
}
exports.getContent = function(){
return $.textfield.value;
};
exports.setContent = function(val){
$.textfield.value = val;
};
if(arguments[0]){
applyProperties(arguments[0]);
}
exports.applyProperties = applyProperties;
The style is completely empty since I'm using the app.tss to style this element.
My situation is: Im making a simple inbox page. The inbox is a listing made from a DevExpress grid. Each row in the grid has a checkbox that the user can check so that they can multi delete records (similar to yahoo mail etc).
When the user clicks the select all link or the clear all link i need to set all the checkboxes within the grid to be checked or unchecked. How do I go about this with client-side scripting? Thanks
The easiest way to do this is to use jQuery. With the right selector it's pretty much a one liner. I don't know how much you know about jQuery so here's a link to the selector docs if you want to read up:
http://api.jquery.com/category/selectors/
The selector will depend on the layout of your page. I've done it before using something like this:
$("#tableId tr td input:checkbox").attr("checked", true);
In this example all checkboxes within a table with an id of "tableId" are checked
Using jquery it should be pretty easy- assuming you can use one of the selectors to select all of the checkboxes (take a look at the different jquery selectors http://api.jquery.com/category/selectors/).
Attach a toggle handler:
$('Selector for the "select all" checkbox>').toggle(function() {
alert('First handler for .toggle() called.');
}, function() {
alert('Second handler for .toggle() called.');
});
Select all checkboxes and when toggled switch the checked state of the other checkboxes:
$('<Selector for the ones you want to toggle>').attr('checked', true);
Provide some sample HTML, or a link to a page, if you need further help.
So putting it together, assuming your "select all" checkbox had an ID of "uxSelectAll" and the ones you want to change have a CSS class of "checkbox-mail-items" it would be something like:
$('#uxSelectAll').toggle(function() {
$('.checkbox-mail-items').attr('checked', true);
}, function() {
$('.checkbox-mail-items').attr('checked', false);
});
you can create a delegate (jquery) for all the checkboxes once you've done the answer above. with something like to perform an action for each check box:
$('div.myGridDivClass tbody').delegate(':checkbox', 'click', function(){
var $checkedRow = $(this), $row = $checkedRow.closest('tr')
// check row is checked
// toggleclass for checked css class and apply to the $row or whatever u want
// do something here
});