I have a mui-datagrid in my react application.In the datagrid, some data with the headers ('CSA NAME', 'START DATE'). I would like to select all items in column 'CSA NAME' while writing test case in jest.used 'getAllByRole('cell', { description: /CSA NAME/i })'
but it's not working.
If you want to click to checkbox for select all items you could try to use something like this:
const tableCheckBoxes = screen.getAllByRole('checkbox', {name: '...'});
// you can set aria-label attribute to each checkbox for accessibility improvements and then get checkboxes by role and name additionally
userEvent.click(tableCheckBoxes[0]);
// where tableCheckBoxes[0] is your select all checkbox
It should work in case if you have only table checkboxes on the page.
Related
i trying to find some way to display/insert/update the information on the form where the information is dynamic. the extjs i currently using is Ext JS 7.1.x Classic
the schema are as below
name of item
cost price of the item
product code of the item
location ([latitude and longitude];rack number;shelves number)
remarks
For example the forms will have a list of location in the form for that item which i able to to add, delete and update each row of location?
data are as show below
PowerBank,10,MPB001,["000.1,111";2;2,"000.2,222";2;2,"000.1,111";1;2],My Power Bank
Earphone,4,MEP001,["000.1,111";2;3],My Earphone
i thinking of something like ListView or Datagrid?
For initial data, update data and insert you can use
form.setValues({
name: 'PowerBank',
cost: 10,
code: 'MPB001',
locationLatitude: '000.1',
locationLongitude: '111'
rack: 2,
shelves: 2,
remarks: 'My Power Bank'
});
Other than that you could use data-binding
data-binding
Let's say you have a grid and bind the selection:
xtype: 'grid',
bind: {selection: '{gridSelection}'}
And you have the selected dataset in your viewModel
data: {
gridSelection: null
}
Then you can add the data to the form like this:
items: {
xtype: 'textfield',
name: 'remarks',
bind: {value: '{gridSelection.remarks}'}
}
problem
you might run into a problem if you are trying to listen on the dirty states with data-binding. But you can solve this by making all fields not dirty after the data-binding triggers.
I'm currently working on a springboot/reactjs project. I'm using the react select library to set a multi select input in one of my forms but I could not get the selected values here's some code to make it a bit clearer.
these are my options generated dynamically from the database each option has the webService Id as a value
this is my select input, I need to get the selected values "Ids" and then call the method that retrieves the webservices from the database and then assign the list of webServices to my newApplicationData.webservices
this is the get web service function
Update : I kind off found a solution to my problem : on the onChange prop I used this
onChange={(selectedOptions) => {
const state = this.state;
state.selectedWebServices = [];
selectedOptions.forEach((option) => {
this.getWS(option.value);
state.selectedWebServices.push(this.state.getWSData);
});
state.newApplicationData.webServices =
state.selectedWebServices;
this.setState(state);
}}
and then I found out another problem: even if I select two deffrent options the list of selected options only gets one duplicated option????!!!!
I have a ng-multiselect dropdown. When I select all the values Instead of displaying all the values from the dropdown It should just display "All" in the dropdown.
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: false
};
When selected all the dropdowns it should display 'All' in the dropdown
you can try by changing the value of dropdowns.value with "ALL" when you select all options.
and you can do this in this event (onSelectAll).
In .ts file:
onSelectAll(event){dropdowns.value="ALL"}
It seems you have done some changes in node_module and you are not able to get changes in build. It's common in angular. Angular will not get your custom changes in the production build.
If you your custom changes works fine then use this command to make a build. With the help of this command you will get your changes in build.
ng build --aot=false
I have tried a lot for implementing the same but couldn't find any solution as it is already built library.
I've found an alternative for it. Set the itemShowLimit to 0, this means there won't be any item to display. In that case, add a span right next to the multiselect dropdown and adjust the position accordingly. Worked for me :)
Sample code:
In .ts file:
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 0,
allowSearchFilter: false
};
In HTML File:
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
><span>All</span>
I have customized display as I wanted to show the number of items selected: https://i.stack.imgur.com/BsmRN.png
I am setting custom fields in a template via the DocuSign API from Salesforce. This works great for text fields. I am having trouble setting a checkbox field to checked. What is the value to send to a checkbox field so it shows as checked?
Here is an example of code to set text fields:
DocuSignAPI.TemplateReferenceFieldDataDataValue fd0 = new DocuSignAPI.TemplateReferenceFieldDataDataValue();
fd0.TabLabel = 'Lead Name';
fd0.Value = c.FirstName + ' ' + c.LastName;
I've tried setting the Value to true, checked, Checked, TRUE but none of these seem to work.
If you look at the official documentation of the CheckBox Tab, in order to your check box checked, you need to set the following property to true as my example in C# below :
Checkbox myCheckBox = new Checkbox
{
Selected = "true"
};
I am currently using lumx Select with multiple choices in my angular material application. I have to implement a 'select all' option in the select to select all the values in the dropdown.
I referred the documentation for angular select but can't able to find whether it has native support for 'select all' option.
Doc : Lumx Select
From the docs you referenced, the distinction between selected and not selected items is given by two attributes: ng-model="vm.selectModel.selectedPeople" and lx-choices="vm.selectPeople".
So basically you would have to create an "All" option to include in lx-choices (vm.selectPeople in this case) and then detect when it's selected. This can be done invoking a function in your controller:
HTML:
<lx-select ... lx-multiple="true" change="$scope.selectCallback(newValue, oldValue)">
Controller
vm.selectCallback = selectCallback;
function selectCallback(_newValue, _oldValue) {
console.log('Old value: ', _oldValue);
console.log('New value: ', _newValue);
if (_newValue == 'all')
vm.selectModel.selectedPeople = vm.selectPeople.slice()
}
Notice in the function we detect the "All" option and change the model accordingly.
See my fork from someone's select example with that feature implemented:
https://jsfiddle.net/Khullah/wyfcy6ko/1/