How to prevent select change event fires when the select biding is initiated? an add button on the page that will add select dynamically to the DOM. when each select box is adding to the DOM, the change event is firing rather than I select the item from the select?
The thing is that KnockoutJS attempts to find which element of your listbox matches the requiredItem observable. There is none in the beginning, which is why it then attempts to set it to the "caption" of the listbox. You did not provide one, so it sets requiredItem to the first element of the listbox.
What you could do is add a caption item to your array:
self.requireditems = ko.observableArray([
{ desc: "Select an option from the list...", key: 0, editable: false } // ... and then all other items]);
and if you really don't want requiredItem to be updated:
self.selectedItem = ko.observable(self.requiredItems()[0]);
Then if you want to know if a valid element has been selected from the list, you could add the following property:
self.isValidSelectedItem = ko.computed(function() {
return self.selectedItem().id;
});
Related
I just did a cypress curse on Udemy and I am trying to learn a bit more.
I am using this simple code line to get a box and enter a value inside using type and enter, however I am getting no error and the value is not showing inside the box.
here is the code line cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}')
how I am new I am using index to get the box since in the page there is more than 18 boxes with the attributes.
cy.get('[class="multiselect__tags"]').eq('10').type('2,000,000{enter}')
cy.get('[class="multiselect__tags"]').eq('11').type('2,000,000{enter}')
cy.get('[class="multiselect__tags"]').eq('12').type('1,500{enter}')
Here is the DOM
here is how it shows in the test
The Vue-multiselect control allows the user to select items from a list, or type a value and press enter to select it.
The result is a "tag" for each of the selected items is added to the input box.
To select by typing, this is how it can be done on the demo page
it('selects from vue-multiselect by typing', () => {
cy.viewport(1000,1000)
cy.visit('https://vue-multiselect.js.org/')
cy.get('div.multiselect').eq(0) // there is no id to work with so just get 1st
.type('NO Dependencies{enter}'); // select an item
cy.get('div.multiselect').eq(0) // same parent as above
.within(() => { // now work within that select
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', 'NO Dependencies') // has the expected text
})
cy.get('div.multiselect').eq(0) // same select
.type('GitHub Stars{enter}'); // select another item
cy.get('div.multiselect').eq(0)
.within(() => {
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 2) // now two selected
.invoke('text')
.should('contain', 'GitHub Stars') // has the expected text
})
})
To select by clicking the dropdown list
it('selects from vue-multiselect by clicking', () => {
cy.viewport(1000,1000)
cy.visit('https://vue-multiselect.js.org/')
cy.get('div.multiselect').eq(0)
.within(() => {
cy.get('div.multiselect__select').click() // open the dropdown
cy.get('li.multiselect__element')
.contains('NO Dependencies')
.click() // select an item
})
cy.get('div.multiselect').eq(0) // same parent as above
.within(() => { // now work within that select
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', 'NO Dependencies') // has the expected text
})
})
In your web page, the multiselect has a data-vv-name attribute which should pinpoint the particular control we want,
const controlSelector = 'div.multiselect[data-vv-name="data.eoConditions.liability"]';
cy.get(controlSelector)
.type('2,000,000{enter}'); // select an item
cy.get(controlSelector) // same parent as above
.within(() => { // work within that control
cy.get('span.multiselect__tag') // check the tags
.should('have.length', 1) // only one selected
.invoke('text')
.should('contain', '2,000,000') // has the expected text
})
})
I'm not sure if you can select two values on this particular control, it does not make sense to do so since there could be only one liability limit.
I want to control row focus process. I need to show confirm dialog on row focus change in my table.
I tried to do this with rowClassRules property, but as I understood that functionality apply classes when table rendering, after that row classes stop changing
rowClassRules = {
'custom-row-focus': (params) => {
return params.data.id === this.currentSelectedItem.id
}
}
currentSelectedItem set's when I click on the row
Found an answer in docs
https://www.ag-grid.com/javascript-grid-row-styles/#refresh-of-styles
If you refresh a row, or a cell is updated due to editing, the rowStyle, rowClass and rowClassRules are all applied again.
So, when I'm clicking to the row I should make something like that:
onClicked($event: RowClickedEvent) {
$event.node.setData({...$event.data});
}
I am using a sap.m.Table which is bound to an OData model. I have set growing="true" and growingScrollToLoad="true". This way the UI only fetches 20 rows at a time as the user scrolls down. I am also using the table in multi selection mode, so the user can select some (or all rows using the "select all" checkbox). All this is working as expected.
I am now adding an export to Excel functionality, and I see that when the user selects the "select all" checkbox, only the rows that are on the client are selected. So for example, if the user doesnt scroll after the data is fetched, only the first 20 rows are selected even if there are a hundred records in the back end. My plan is to get all data from the backend and export it to a spreadsheet if the "select all" is checked, if not just export the selected rows. Question is how do I know when the select all is checked? I havent found an API that gives me this information. Is there a better way of achieving this? I would love to hear your thoughts.
Thanks.
You can add a selection event listener on your table:
<Table selectionChange=".onSelectionChange">
The parameter selectAll will be true if the header checkbox is checked, undefined otherwise.
onSelectionChanged: function(event) {
var selectAll = event.getParamerter("selectAll") === true;
}
You can define combobox in the xml:
<ComboBox id="comboBoxSelectAll">
<core:Item id="sellectAll" text="Select all" key="All" />
<core:Item id="sellectNotAll" text="Select not all" key="notAll" />
</ComboBox>
You can register combo box event handler in the controller:
var comboBoxSelectAll = this.getView().byId("comboBoxSelectAll");
comboBoxPerc.attachSelectionChange(this.comboBoxSelectAllchanged, this);
And handle event in the controller:
comboBoxSelectAllchanged: function(oEvent){
var key = oEvent.getParameters().selectedItem.getKey();
if (key === "selectAll"){
//save all data
}
else{
//save just loaded data
}
}
I hope this is what you are looking for, if not feel free to ask.
EDITED 10:10 130117:
Sorry now I see you are using Check Box, so in the xml:
<VBox>
<CheckBox id="checkBoxAll" text="Select all"/>
</VBox>
And in the function where you save data you use Check Box method getSelected:
var oCheckBoxAll = this.getView().byId("checkBoxAll");
var bIsSelected = oCheckBoxAll.getSelected();
if(bIsSelected === true){
//save all data
}
EDITED 10:14 130117:
Here is working example in jsbin.
The selectionChange event fired by the table has a listItems parameter. If the length is more than 1, then the select all button was pressed. To determine whether all rows were selected or deselected, you can check the selected parameter of the same event.
onSelectionChanged: function(oEvent) {
//this will return true if more than 1 item was selected
var bSelectAll = oEvent.getParameter("listItems").length > 1
//this will return true if the rows were selected, false if they were deselected
var bSelected = oEvent.getParameter("selected");
if (bSelectAll && bSelected) {
//make a call to the backend to get all data
}
}
You can also check the number of selected items vs the number of items in the table. oTable.getItems().length will indicate how many items are currently in the table. Comparing the number of items in the table vs the number of selected items, will tell you if all are selected.
var bAll = oTable.getSelectedItems().length === oTable.getItems().length;
For further validation, you can use the $count function of your oData service to find the total number of items in the backend, and then compare that with your table data.
var total;
oModel.read("/EntitySet/$count", {
success: function(response) {
total = response;
}
}
The table also has a growingFinished event you can use to determine if all rows have been retrieved from the backend or not.
I have a SelectItem object which has a few items. I set a value MAP with:
organizations[0] = "A";
organizations[0] = "B";
selectItem.setValueMap(organizations);
When displayed, the combo box is showing "A" as selected item. Then, I need to programatically select value "B" and select this on the current SelectItem object. I've been looking all over the place with no avail.
Anyone?
If you want any option of selectItem to be manually selected, then you should try following:
selectItem.setValue("B");
After doing this when you open the picklist of the selectItem, value "B" will be highlighted.
In Jqgrid, I want to restrict user to select only one check box at any time. When user selects multiple check box only last selected to be in 'selected' state, remaining should be automatically un-selected.
I have set multi select attribute to true. But I am not able to do un-select previously selected item. Is it possible to do if so how?
Thanks
You can use the event beforeSelectRow and reset the selection:
beforeSelectRow: function(rowid, e)
{
jQuery("#list47").jqGrid('resetSelection');
return(true);
}
I've got a fiddle for you so you can check how it works.
You have to do some more stuff:
1. Set multiboxonly to true and multiselect to true
2. Define the events onSelectRow and beforeSelectRow:
3. Define global variable: var lastSel;
The OnSelectRow and beforeSelectRow implementation:
onSelectRow: function (rowId, status, e) {
if (rowId == lastSel) {
$(this).jqGrid("resetSelection");
lastSel = undefined;
status = false;
} else {
lastSel = rowId;
}
},
beforeSelectRow: function (rowId, e) {
$(this).jqGrid("resetSelection");
return true;
}
Having a checkbox in each column implies that you can click more than one at a time. What you are asking for is basically the multiselect: false behavior but with the checkbox column - are you sure you really want the checkboxes in this case?
I know this question is old, but I found a better solution in this Stack Post.
All you have to do is set the following two properties of the jqGrid:
multiselect:true // multi-select checkboxes appear
multiboxonly:true // checkboxes act like radio buttons where only one is selected at a time
I have updated the fiddle made by LeftyX to simply use the multiboxonly setting at this JsFiddle
This was what I needed. It may help someone else.