I'm trying to disable a dropdown element in AG-Grid and React. Like this example from W3Schools:
option value="volvo" disabled>Volvo
This will be a dynamically built dropdown and I can find no mention of the ability to do this using a cellEditor or cellEditorParams. I can find no evidence that disabling a dropdown option is possible in AG-Grid.
You can achieve this by using a custom cell renderer for that field i.e
{
field: 'yourField',
cellRenderer: 'selectboxRenderer',
// Here **disable** is the prop that will get passed to your selectBoxRenderer
// You can put your condition when based on which you want to disable
// You will also have to receive that **prop** in your component
cellRendererParams: {
disable: ({ data }) => {
// Your condition here
},
}
}
Related
I am trying to implement filtering in my grid.Panel component. The filtering works fine (date, string and numbers) but I can not uncheck the "Filters" checkbox by clicking on it. As far as I have seen in the Ext js documentation there is nothing that I should add extra to be able to uncheck the Filters checkbox (see image below)
When I click on the Filters checkbox, nothing happens, no error also. The only way to disable this particular "Wholesaler" filter is if I go to the text box and remove the entry. This of course would be just fine, but at the date filters, I also can not click the checkbox and thus can not remove the filter once applied (see image below) The only way to remove it is to refresh the page.
I am using Ext JS version 5.1.2, and here is the sample code:
{
dataIndex: 'Wholesaler',
text: 'Wholesaler',
filter: {
type: 'string'
},
}
And the Panel componenet itself:
Ext.apply(this, {
region: 'center',
api: new Dextop.api('sample'),
border: false,
plugins: 'gridfilters',
columns: sample.getController().getGridColumns(),
storeOptions: {
autoLoad: false
}
});
Any help is appreciated!
I am using Angular 5 with Ag-Grid and want a column's cells to have a rich drop down select (I have achieved this), but also want an option to add a new item to this list.
I was trying to achieve this by using a custom renderer to render a button next to the cell value. I wanted this button to fire off an event but when I click the cell either nothing happens, or if I double click the select options pop up displays. I would prefer to not have to create a new renderer component if this is possible to do in a simple renderer function. This is how I was attempting to do it. The button renders, but there is no event fire on click. Is there maybe a way to add the button to the pop-up select editor?
I am trying to achieve something similar to this: https://stackblitz.com/edit/angular-ag-grid-button-renderer?file=src%2Fapp%2Frenderer%2Fbutton-renderer.component.ts
but without the extra renderer component.
columnDef: {
headerName: col,
field: col.toLowerCase(),
type: [],
editable: true,
cellRenderer: this.subCatButtonRenderer,
cellRendererParams: {onClick: this.addSubCat.bind(this)}
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {values: ['subCat1', 'subCat2', 'subCat3']}
}
addSubCat(e) {
console.log(e.rowData);
}
subCatButtonRenderer(params) {
return params.value + ' <button (click)="onClick($event)">Add New</button>';
}
I'm using a Webix datatable with some filters and want to be able to set the focus to some particular filter input, for instance, after initialization. Unfortunately, I can't find a way to do so.
A minimal required configuration is
{
view:"datatable",
columns:[
{ id:"id"},
{ id:"value", header:{content:"textFilter"}, fillspace:true}
],
data:list_data,
ready:function(){
alert("datatable loaded")
}
}
http://webix.com/snippet/ba52bfc1
But how can I get filter's id or object and set the focus to it?
ready:function(){
this.getFilter("value").focus();
}
Updated snippet : http://webix.com/snippet/b4f50020
I'm using ExtJs 4 to build out a new web page with a few forms in it, nothing crazy. On this page I have a gridpanel using a checkbox selection model with mode set to 'Single'. Here is my selection model configuration:
Ext.create('Ext.selection.CheckboxModel', {
mode: 'Single',
checkOnly: true,
showHeaderCheckbox: false
/*listeners: {
select: function(model, record, idx) {},
deselect: function(model, record, idx) {}
}*/
});
Functionally speaking, this works absolutely fine. It limits the user to one selection in the gridpanel in which is it being used. However, in my requirements this field is defined as a radio button (which makes sense since in basic HTML this would be the input type used for a single selection, not a checkbox).
Is there configuration setting I could add to the selection model to make the field display as radio buttons instead of checkboxes? Alternatively, is there a CSS update I could make to show the field as a radio button?
Absolutely you can achieve with CSS.
You can find that the default image is coming from build/production/{app name}/resources/images/form/checkbox.png.
Inside extjs:
{
xtype: 'grid',
cls: 'checkbox-overwrite',
selModel:{
selType: 'checkboxmodel',
mode: 'SINGLE'
}
...
}
Inside CSS
.checkbox-overwrite .x-grid-row-checker,
.checkbox-overwrite .x-column-header-checkbox .x-column-header-text {
background-image: url(from your css file path to build/production/{app name}/resources/images/form/radio.png);
}
Sometimes, the path from your css file to the resource may not be stable or not convenience to define it. I suggest you just go to the folder find the radio.png and save it to your application's defaults images folder. Then it will be much easier to work with the path inside CSS.
You can use the radiobutton
see the difference there is only one change if you change the defaultTYpe to radiogroup thats it remaining things are same
docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Radio
can you please tell me how to get event of on change of drop down in angular ?.
I make a drop down from json .I need to show alert when user change the drop down ng:change and get it drop down value ? I make form form using this doc
https://github.com/Textalk/angular-schema-form/blob/master/docs/index.md#global-options
here is my plunker http://plnkr.co/edit/wbziK5aRUg69JuwXDoVy?p=preview
how I i bind ng:change ?
here is my drop down
title: {
type: "string",
required: true,
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
how to bind the drop down event ?
angularjs Select with filter to filter out the option that's already selected
refer this you need to use ng options and you r using array.and ur trying to populate object thats why it is not getting binded i guess