For a multi-select dropdown, is it possible to display one selected item (+ number of remaining items)
instead of listing all items in the textbox:
It is supported to customize via Dropdown.onRenderTitle:
Optional custom renderer for selected option displayed in input
For example:
<Dropdown
onRenderTitle={this.handleRenderTitle}
...
/>
where
private handleRenderTitle(items: IDropdownOption[]) {
if(items.length === 1) {
return <>{`${items[0].text}`}</>;
}
return <>{`${items[0].text} (+ ${items.length - 1})`}</>;
}
Result
Related
Initially I setted the text as list in use-state and it change to grid when I click on it.How to show the list again when I click?
const [buttonText, setButtonText] = useState('List');
function handleClick() {
setButtonText('Grid');
};
This is the use-state and the function that changes the text.Can anyone help me ?
You can call same method and use ternary operator (check your current state and setState according to it).
function handleClick() {
setButtonText(buttonText == 'Grid' ? 'List' : 'Grid');
};
I have a vaadin-checkbox:
<vaadin-checkbox id=[[item.id]] disabled="true" checked="[[item.checked]]">[[item.description]]</vaadin-checkbox>
I defined my properties:
static get properties() {
return {
items: {
type: Array,
notify: true,
value: function() {
return [];
}
}
};
}
When I now change the data by pressing some button:
_selectItem(event) {
const item = event.model.item;
if (item.checked === true) {
this.$.grid.deselectItem(item);
} else {
this.$.grid.selectItem(item);
}
item.checked = !item.checked;
}
The state of the checkbox is still checked="true". Why isnt the checkbox getting updated? The same thing when I change the description of the item:
_selectItem(event) {
event.model.item.description = 'test';
}
The test description is never appearing. The checkbox is never getting updated.
The reason why the checkbox does not get updated by the button click handler is in the Polymer 2 data system. Polymer does not detect the change and does not update the template accordingly.
In order to make the change in a way that Polymer would detect it you have two options:
Use this.set(`items.${event.model.index}.checked`, !item.checked) if you can reliably assume that the index used by dom-repeat always matches that elements's index in the items array (it is not the case if you use sorting or filtering features of dom-repeat). See an example here https://jsfiddle.net/vlukashov/epd0dn2j/
If you do not know the index of the updated item in the items array, you can also use the Polymer.MutableData mixin and notify Polymer that something has changed inside the items array without specifying the index of the changed item. This is done by calling this.notifyPath('items') after making a change. However, this requires that your element extends the Polymer.MutableData mixin, and that dom-repeat has the mutable-data attribute set. See an example here: https://jsfiddle.net/vlukashov/epd0dn2j/24/
More information on this in the Polymer 2 docs.
I am creating a Dynamic Kendo Grid using GridBoundColumnBuilder().
I loop through all of the controls on the previous page to create the grid.
For example with myTextbox(), myCheckbox(), etc.
These create columns in the grid. I have all of the columns creating and populating with data.
My issue is with the Dropdownlist and the Multiselect list, they populate with data but do not display the correct data when the grid is created.
The dropdown list displays the value, not the text of the previous control:
1 = My
2 = Data
The Dropdownlist will display 1 instead of My. And, the Multiselect only displays [object Object].
When you click on either of the controls in the grid it switches to show the proper text, but loses it when you click off.
Any ideas of what I am doing wrong?
foreach (ControlBase control in flatColumns)
{
GridBoundColumnBuilder<dynamic> thisColumn;
if (control.Lookups != null && control.Lookups.Any())
{
if (!control.IsMultiSelect){
thisColumn = column.Bound(control.ControlType, control.ColumnName).Title(control.Description);
thisColumn.EditorTemplateName("DropDownList");
thisColumn.Width(250);
}
else
{
thisColumn = column.Bound(control.ControlType, control.ColumnName).Title(control.Description);
thisColumn.EditorTemplateName("MultiDropDownList");
thisColumn.Width(250);
}
}
}
Dropdown Template
#(Html.Kendo().DropDownListFor(m => m).HtmlAttributes(new { #class = "form-control" })
.BindTo((IEnumerable) ViewData[currentColumn + "List"])
.DataTextField("Text")
.DataValueField("Value")
.ValuePrimitive(true)
.Text("Value")
Multiselect Templage
#(Html.Kendo().MultiSelectFor(m => m)
.HtmlAttributes(new { #class = "form-control" })
.BindTo((IEnumerable)ViewData[currentColumn + "List"])
.DataTextField("Text")
.DataValueField("Value")
Have you tried changing the .Text to display the Text rather than the Value?
.DataTextField("Text")
.DataValueField("Value")
.ValuePrimitive(true)
.Text("Text")
I am making a form. I want to display the options only related to the selected option, which select the user.
Select Degree
<select id="Degree">
#foreach (var v in Model.deg)
{
<option value=#v.Degree_Title>
#v.Degree_Title
</option>
}
</select>
for example if the user selects the degree It only it related options will display on the next select box. Kindly response me soon.
When you select a Degree (try to put it in DropDown in controller) and on select do autopostback which will populated the options related to selected degree.
Include this in javascript
function CausePostBack() {
//alert('hello');
var form1 = document.forms[0];
if (!form1.onsubmit || (form1.onsubmit() != false)) {
//alert('hello again');
form1.submit();
}
}
and for the DropDown
#Html.DropDownList("SomeName", (SelectList)ViewBag.ABC, new { #class = "DropDownList W150 ", onchange = "return CausePostBack();", value = #ViewBag.SelectedVal })
I am using uimap in coded ui test to get information about controlers in an application, the value returned for a listbox is "client" - controlType, technologyname MSAA and Name = session.
My goal is to be able to get all values of a listbox and then select a value using the code.
Is there a way to do that ?
Many thanks.
Given the UITestControl object for the list box you should be able to get all list entries by using the GetChildren method. It returns a collection having all the child controls of the parent control. Depending on the exact structure of your list box and its contents, you may need to call the method repeatedly to get the grandchild or deeper controls.
See http://msdn.microsoft.com/en-us/library/microsoft.visualstudio.testtools.uitesting.uitestcontrol.getchildren.aspx
Update
In C# you might write code based on the following:
foreach (UITestControl child in parent.GetChildren()) {
if ( someTestOfTheControl(child) ) {
... process the child control here ...
}
}
Or possibly on
foreach (UITestControl child in parent.GetChildren()) {
foreach (UITestControl grandChild in child.GetChildren()) {
if ( someTestOfTheControl(grandChild) ) {
... process the grandChild control here ...
}
}
}
Where someTestOfTheControl() tests whether the control is the one you are interested in.
Using UIMap - Get the control of ListBox
ItemToSelect - Is the name of item in string
WinList ListControl = new WinList(Control);
string[] CompleteList = ListControl.GetContent();
CompleteList = CompleteList.Where(x => x != null).ToArray();
string Value = CompleteList.First(x => x.Contains(ItemToSelect));
Mouse.Click((WinListItem)ListControl.Items.FirstOrDefault(x => x.Name.Contains(Value)));