I am using Antd menu
I am new to antd and I was trying to disable a particular menu item and the menu is of type inline.
I see that MenuItem has disabled props but with inline type, I am not understanding how to disable a particular menu item.
Here is a code sandbox link.
Any leads will be appreciated.
Thank you.
change getItem function to this
function getItem(
label: React.ReactNode,
key: React.Key,
icon?: React.ReactNode,
children?: MenuItem[],
type?: 'group',
disabled?: boolean,
): MenuItem {
return {
key,
icon,
children,
label,
type,
disabled
} as MenuItem;
}
and pass disabled argument
getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4', null, null, null, true)], 'group'),
this will disable option 4
Related
I am trying to hide/show column based on headername using ag-grid. As you can see below, I have used setColumnsVisible to achieve the same. But I need to this based on headername amd not field.
{ headerName: 'Rating Name', field: 'newRatingName', filter: true}
this.gridColumnApi.setColumnsVisible(['newRatingName', 'newRatingReleaseDate'], false);true }
Is some other way to achieve it?
If you have access to the columnApi, then I'd suggest you get the column using the columnApi and the headerName, and then use that to set the visibility.
For example:
const ratingNameColumn = this.gridColumnApi.getAllColumns().find(x => x.colDef.headerName == 'Rating Name');
this.gridColumnApi.setColumnVisible(ratingNameColumn, false);
Here's a StackBlitz for you.
You can use hide property in the column definition to conditionally hide your column. This is a boolean property that can be set to true/false. For example:
{ headerName: 'Rating Name',
field: 'newRatingName',
filter: true,
hide: this.shouldHide(),
}
shouldHide = () => (true);
Is there a way to programmatically trigger filtering on Antd Table Columns?
I'm building a custom Header which is a standalone styled component (So, I set the prop showHeader={ false } on the table and use my custom header to communicate with the table by setting states).
I want to be able to use it to trigger filtering on the table columns.
For sorting, I can pass a value to the sortOrder prop and trigger the sorter function externally. For filtering however, I don't have any obvious way to trigger the filter function.
{
title: 'Title',
dataIndex: 'title',
width: '40%',
key: 'title',
sorter: (a, b) => a.title.localeCompare(b.title),
sortOrder: { this.state.columns['title'].sortOrder }
},
{
title: 'Type',
dataIndex: 'operation',
key: 'defectType',
width: '10%',
filters: Object.keys(topicType).map(key => ({ text: topicType[key], value: key })),
onFilter: (value, record) => String(value) === record.defectType
},
Just managed to get this figured.
If you want to explicitly filter your items on a table and manage the filter state on your own; you need to pass the filteredValue prop on the column configuration.
Setting this to null renders the whole list without filtering.
I'm using select2 (v 4.0.3) with Bootstrap 3 and I have to display several hundreds of alternatives per optgroup. Now I wish to collapse/expand the optgroups on click to make it a bit more manageable. I couldn't find any info on this so I thought I'd post a question.
I found an approach to this problem but I couldn't get it to work (it seems a bit outdated issue #730). The basic problem with that approach now is that in the current version of select2 elements aren't created until they are needed. Also, the class names seem to have changed a bit, as have apparently the names of events in the move to the latest version.
So far I've managed to get the collapse/expand functionality to work for the optgroups, but issues arise when the user provides text input (check the fiddle).
$(function () {
var data = [
{
text: "Group 1",
children: [
{ id: 'A1', text: 'a1'},
{ id: 'B2', text: 'b2'},
{ id: 'C3', text: 'c3'}]
},
{
text: "Group 2",
children: [
{ id: 'A2', text: 'a2'},
{ id: 'B3', text: 'b3'},
{ id: 'C1', text: 'c1'}
]
}];
$('#mySelect')
.select2({data: data, placeholder : 'Select one' });
// Toggle group on click
$('.select2')
.on('click', function(){
$('.select2-results__option').on('click', function(){
$(this).find('.select2-results__options--nested').toggle();
});
});
});
When the text input is used select2 runs the search and the events I've registered are dropped. My plan was to capture text input and check if the input field is empty or not, based on which I can decide to recreate the optgroup listeners or show all optgroups. Any help in this direction would be appreciated.
I added a select2 and it always show first option as blank.
just below the blank option, it always shows what i type in select2 textfield. Any Idea, how i can fix it.
= hidden_field_tag :tags // present in HAML form
// javascript
$('#tags').select2
createSearchChoice: (term, data) ->
if $(data).filter((->
#text.localeCompare(term) == 0
)).length == 0
return {
id: term
text: term
}
return
multiple: false
data: [
{
id: 0
text: 'story'
}
{
id: 1
text: 'bug'
}
{
id: 2
text: 'task'
}`enter code here`
]
Try this .....
Your input field should be like this
%input#tags{:style => "width: 300px", :type => "hidden"}
Your js code should be like this
$("#tags").select2({
placeholder:"Select an option",
createSearchChoice: function(term, data) {
if ($(data).filter((function() {
return this.text.localeCompare(term) === 0;
})).length === 0) {
return {
id: term,
text: term
};
}
},
multiple: false,
data: [
{
id: 0,
text: 'story'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'task'
}
]
});
You no longer need to use createSearchChoice if you want to do this with Select2, you can just use the tags option. Right now you shouldn't be seeing the blank option, as you aren't passing one to Select2 at all, so this is lacking a bit of information that would explain that issue.
Select2 will automatically hide blank options though if you have a placeholder set, which I would always recommend. So the hacky solution is to set the placeholder option to whatever you want ("Select a few tags..."), but that only works if this is actually a blank option and not just a CSS issue. You can tell if it's a blank option if Select2 highlights it whenever you start searching, as it will automatically highlight the first option.
It would make more sense for this to be a CSS issue, maybe a bit too much padding somewhere, as the tag (or choice from createSearchChoice) should be inserted automatically at the top of the search results. So even if there was a spare blank option sitting around, it would show under the newly created search choice.
So in my PhoneJS web app, I have a dxList widget, with checkboxes on each item. I want to be able to select multiple items, and then do something with them. I'm trying to bind the 'checked' binding to an observable, but I get an 'undefined' error.
Here's the code for the dxTemplate for the list
<div data-options="dxTemplate:{name:'item'}">
<span data-bind="text: $data.information"></span>
<div data-bind="dxCheckBox: { checked: check_boxes }"></div>
</div>
The problem is that check_boxes is in the viewModel, not the item array. I need to access values in the viewModel. I've tried viewModel.check_boxes, but with no success.
Here's the js code:
AppNamespace.otherView = function (params) {
var viewModel = {
my_list: [
{
key: 'Group 1',
items: [
{ information: 'Test 1' },
{ information: 'Test 2'},
{ information: 'Test 3' }
]
}
],
check_boxes: ko.observable(false),
//...etc
Has anyone had any experience with this, and is there a solution?
Thanks!
Knockout provides special properties to access parent binding contexts. In your case both $parent and $root should work.
More on this topic in Knockout docs: Binding context.